@zanichelli/albe-web-components 20.0.4 → 20.1.0

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

@@ -47,9 +47,12 @@
   overflow: auto;
   width: 100%;
   max-height: var(--z-searchbar-results-height, 540px);
+  padding-top: var(--space-unit);
+  padding-bottom: calc(var(--space-unit) * 0.5);
   border: var(--border-size-small) solid var(--color-form-surface03);
   border-top: none;
   background: var(--color-form-background);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
 
 .results z-list-element {
@@ -81,6 +84,7 @@
 
 .results z-list-element > .list-item:focus-visible {
   z-index: 1;
+  border-radius: var(--border-radius-small);
   box-shadow: var(--shadow-focus-primary);
   outline: none;
 }

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

@@ -90,6 +90,9 @@ export class ZSelect {
     getResetOptionId() {
         return `${this.htmlid}_key_reset`;
     }
+    getMessageId() {
+        return `${this.htmlid}_message`;
+    }
     getGroupedItems() {
         if (!this.itemsList.length) {
             return [];
@@ -156,6 +159,9 @@ export class ZSelect {
     hasAutocomplete() {
         return boolean(this.autocomplete) === true;
     }
+    hasMessage() {
+        return boolean(this.message) !== false;
+    }
     handleInputChange(e) {
         this.searchString = e.detail.value;
         if (!this.isOpen) {
@@ -348,7 +354,7 @@ export class ZSelect {
             h("z-input", { class: {
                     "active-select": this.isOpen,
                     "cursor-select": !this.autocomplete,
-                }, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: value, label: this.label, autocomplete: "off", htmlAriaLabel: this.htmlAriaLabel || undefined, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: false, message: false, name: this.name, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), required: this.required, status: this.isOpen ? undefined : this.status, size: this.size, role: "combobox", "html-aria-expanded": this.isOpen ? "true" : "false", "html-aria-controls": `${this.htmlid}_list`, "html-aria-activedescendant": this.isOpen ? this.focusedItemId : "", "html-aria-autocomplete": this.hasAutocomplete() ? "list" : undefined, onClick: (e) => this.handleInputClick(e), onKeyDown: (e) => this.handleInputKeyDown(e), onInputChange: (e) => this.handleInputChange(e), onKeyPress: (e) => {
+                }, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: value, label: this.label, autocomplete: "off", htmlAriaLabel: this.htmlAriaLabel || undefined, icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: false, message: false, name: this.name, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), required: this.required, status: this.isOpen ? undefined : this.status, size: this.size, role: "combobox", "html-aria-describedby": this.hasMessage() ? this.getMessageId() : undefined, "html-aria-expanded": this.isOpen ? "true" : "false", "html-aria-controls": `${this.htmlid}_list`, "html-aria-activedescendant": this.isOpen ? this.focusedItemId : "", "html-aria-autocomplete": this.hasAutocomplete() ? "list" : undefined, onClick: (e) => this.handleInputClick(e), onKeyDown: (e) => this.handleInputKeyDown(e), onInputChange: (e) => this.handleInputChange(e), onKeyPress: (e) => {
                     if (!this.hasAutocomplete()) {
                         e.preventDefault();
                         this.scrollToLetter(e.key);
@@ -461,13 +467,13 @@ export class ZSelect {
         return (h("z-list-element", { class: "no-results", size: this.hasTreeItems ? ListSize.MEDIUM : this.listSizeType(), htmlTabindex: null, role: "presentation" }, this.noresultslabel));
     }
     renderMessage() {
-        if (boolean(this.message) === false) {
+        if (!this.hasMessage()) {
             return;
         }
-        return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
+        return (h("z-input-message", { "html-id": this.getMessageId(), message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
     }
     render() {
-        return (h("div", { key: '47cc6b51d4eb4ac1df4a67fc592672a43a30e27b', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: 'fd1afef509078b977d8ca95df6d75e76b36431b6', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     static get is() { return "z-select"; }
     static get encapsulation() { return "scoped"; }
@@ -1009,4 +1015,3 @@ export class ZSelect {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -35,6 +35,7 @@
   box-sizing: border-box;
   border-top: none;
   background: var(--color-form-background);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
   box-shadow: var(--shadow-2);
   outline: none;
 }
@@ -53,8 +54,8 @@
 
 .select-wrapper z-list {
   --background-color-list-element: var(--color-form-background);
-  --background-hover-color-list-element: var(--color-surface02);
-  --background-active-color-list-element: var(--color-surface02);
+  --background-hover-color-list-element: var(--gray100);
+  --background-active-color-list-element: var(--gray100);
 }
 
 .select-wrapper .ul-scroll-wrapper > z-list {
@@ -78,6 +79,7 @@
 }
 
 .select-wrapper .ul-scroll-wrapper z-list z-list-element .list-element-container.active {
+  border-radius: var(--border-radius-small);
   box-shadow: var(--shadow-focus-primary);
 }
 

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

@@ -45,7 +45,7 @@ export class ZSkipToContent {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: 'b19cbb70b81b7446322876b9308ce475934c2c30', class: {
+        return (h(Host, { key: 'ffa48501572ecc3dc5a4ddca0ade656b8cc20384', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {
@@ -152,4 +152,3 @@ export class ZSkipToContent {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZStepper {
     render() {
-        return (h(Host, { key: 'c16bf08a310caae7b712a922a74eace29c560221', role: "navigation" }, h("div", { key: 'df1dcc32d712bd68f12900faf3e7ac72eb4fc6dc', class: "stepper-list", role: "list" }, h("slot", { key: 'c7c8775a5fe29029d271ea6442b094175c695c66' }))));
+        return (h(Host, { key: '1452eb9f08520efc9cef3ed933725bb11b631bcb', role: "navigation" }, h("div", { key: 'b2f7c6dc2e8e3912ae2f9344a3a2de06c47905c5', class: "stepper-list", role: "list" }, h("slot", { key: 'cfb5547bd5d129db5f0408bc5ae4802ba8d4aea8' }))));
     }
     static get is() { return "z-stepper"; }
     static get encapsulation() { return "shadow"; }
@@ -19,4 +19,3 @@ export class ZStepper {
         };
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -10,7 +10,7 @@ export class ZStepperItem {
         return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex), ariaPressed), ariaDisabled);
     }
     render() {
-        return (h(Host, { key: '42329c166903a0ce77e82d222371804f3e7279b1', role: "listitem" }, h("button", Object.assign({ key: 'ed6351193460e7a873cd9867bbd2ded798bbad8f', class: "stepper-item", disabled: this.disabled }, this.getAttributes(), { "aria-label": this.htmlAriaLabel }), h("div", { key: 'fc09e304cff2a9651859002047bd825f32c08e88', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '5a9055a16e1e2481a995ad13ae307d8d67a07b70' }, h("slot", { key: '68926fc154893ac5ed50ded8065590cfb586eb90' })))));
+        return (h(Host, { key: 'f0e472ab78706ca2595eab96be09b292e43b64a4', role: "listitem" }, h("button", Object.assign({ key: '431a21a0276ab381b90e53daa5d476107b162cbe', class: "stepper-item", disabled: this.disabled }, this.getAttributes(), { "aria-label": this.htmlAriaLabel }), h("div", { key: '8a94e23b42d0aedea680f388ddc17832fbb97905', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : h("span", { class: "indicator-number" }, this.index)), h("span", { key: '5c331ddb88e08e7b492ba266126dea9722816d6f' }, h("slot", { key: '5e2f815cd03d435054ab6083530ded9b08ea9b89' })))));
     }
     static get is() { return "z-stepper-item"; }
     static get encapsulation() { return "shadow"; }
@@ -143,4 +143,3 @@ export class ZStepperItem {
         };
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -68,11 +68,16 @@
   font-size: var(--font-size-1);
   font-weight: var(--font-sb);
   letter-spacing: 0.32px;
-  line-height: 1.333;
 }
 
-.stepper-item span {
+.indicator-number {
+  display: block;
+  transform: translateY(0.04em);
+}
+
+.stepper-item span:not(.indicator-number) {
   min-width: 50px;
+  align-self: start;
   color: var(--color-default-text);
   font-size: var(--font-size-2);
   letter-spacing: 0.16px;
@@ -93,7 +98,7 @@
   font-weight: var(--font-sb);
 }
 
-:host([pressed]) .stepper-item span {
+:host([pressed]) .stepper-item span:not(.indicator-number) {
   font-weight: var(--font-sb);
   line-height: 1.5;
 }
@@ -149,7 +154,7 @@
   }
 
   .stepper-item .indicator,
-  .stepper-item span {
+  .stepper-item span:not(.indicator-number) {
     font-size: var(--font-size-3);
     line-height: 1.5;
   }
@@ -166,3 +171,13 @@
     font-size: var(--font-size-6);
   }
 }
+
+/* stylelint-disable property-no-unknown */
+@supports (text-box-trim: trim-both) {
+  .indicator-number {
+    text-box-edge: cap alphabetic;
+    text-box-trim: trim-both;
+    transform: none;
+  }
+}
+/* stylelint-enable property-no-unknown */

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

@@ -5,10 +5,10 @@ import { Host, h } from "@stencil/core";
  */
 export class ZTag {
     render() {
-        return (h(Host, { key: '395a1d2c967fb99bafcea3fa35d56b9aaffe3f4e', class: {
+        return (h(Host, { key: '5c072a259029ca528ae0fcf6300ed5f39f314532', class: {
                 "expandable": this.expandable && !!this.icon,
                 "has-text": !!this.host.textContent.trim(),
-            } }, this.icon && h("z-icon", { key: '9cd7c991e5018d8257d9e3644afe5afd417c5b96', name: this.icon }), h("div", { key: '0eb07e9a40d1dba81b758cb0d988542ca3d19dde' }, h("slot", { key: '96cce8136e7f0516bbdf488ea122238a6d89adff' }))));
+            } }, this.icon && h("z-icon", { key: 'eb153f15fb1ac3acfe3978cc32247ef0bd862c7c', name: this.icon }), h("div", { key: '5fa9238300e946f9fd6378ee6d45cc3c294b8f9c' }, h("slot", { key: '0fd75c9db2d06fc24228043f83655963203b2306' }))));
     }
     static get is() { return "z-tag"; }
     static get encapsulation() { return "scoped"; }
@@ -66,4 +66,3 @@ export class ZTag {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=index.js.map

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

@@ -151,19 +151,19 @@ export class ZToastNotification {
         }
     }
     render() {
-        return (h(Host, { key: '281e32f784c53014c9236fe15bcaffd1c17105fa', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
+        return (h(Host, { key: 'f6c296b024df6fb3026fe725878035259cc00623', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }
                 if (e.animationName.includes("slideout")) {
                     this.hostElement.parentNode.removeChild(this.hostElement);
                 }
-            } }, h("div", { key: 'ea37ca1023a4d2dc38225d70865168dae75a2c5f', class: "toast-notification-container" }, h("div", { key: '246782a577afe9c2ced5a500d678d6b38118b1df', class: "toast-notification-content" }, h("div", { key: '2d8b3d8a19c33ffe2ac37f94253647e88df05925', class: "toast-notification-text" }, this.heading && h("span", { key: '1924b7cf3e1ed690a6ca70d03f8a0dbb87e83968', class: "title" }, this.heading), h("span", { key: '954b54d9b6b78393ccc9118c85c1aaa4605c91ab', class: "message" }, h("slot", { key: 'fc9c584e93789d6d97060a75d7f096bcf486a77a', name: "message" }, this.message && h("span", { key: 'd909af91abe205d1a9f5ebbfe026e0047cfba86e', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: '968e4a2fcb6c825b4a2667de69c910f9f2325e69', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: '1c365d7a4ae2c921767083790c472a64bc964592', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: '8bcba678652e3e6e9a6dccfe7ee10ee739a43fe4', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
+            } }, h("div", { key: 'c07550674afb4037ab0df31748f75a419a41224c', class: "toast-notification-container" }, h("div", { key: '035aa2f2371e5ac1693d0ea87657230bfa3ae87f', class: "toast-notification-content" }, h("div", { key: 'b84b9275faff5107717cd2393641cd275bc059f9', class: "toast-notification-text" }, this.heading && h("span", { key: 'a007dcecde5aa7558b236581b8eef190640f3632', class: "title" }, this.heading), h("span", { key: 'a797c2b9d42857b78fe656ede2cf71bcb631e1d6', class: "message" }, h("slot", { key: '6cfeaffb9adcac19d74370cfa2d594f46caaae96', name: "message" }, this.message && h("span", { key: '98be3226f1d8d9f132b7df4537ef73027f4be16f', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: '5746a85c63657c5e74561e08fb4dbf941145a010', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: '000c5cb576fe72deb0a105237a6666e4e7fdd31d', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: '49d0ce8a7480c661a2202e4ab93941e20bb6031f', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
                 if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
                     e.preventDefault();
                     this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);
                 }
-            } }, h("z-icon", { key: 'c273ab9fe23fb80a267365b263eda04ba0cfc8e4', name: "multiply-circled" }))))));
+            } }, h("z-icon", { key: '34c70c2eb06fe8e9e9cb377274cd7424c4ec1d4c', name: "multiply-circled" }))))));
     }
     static get is() { return "z-toast-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -407,4 +407,3 @@ export class ZToastNotification {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -39,7 +39,7 @@ export class ZToastNotificationList {
         }
     }
     render() {
-        return h("slot", { key: '369ca36cde4f86f5e390568b3526ffab0aad053f', name: "toasts" });
+        return h("slot", { key: 'ba72267ac380c3288ba5d0be6a6bc47e86e81f40', name: "toasts" });
     }
     static get is() { return "z-toast-notification-list"; }
     static get encapsulation() { return "shadow"; }
@@ -112,4 +112,3 @@ export class ZToastNotificationList {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -26,14 +26,14 @@ export class ZToggleSwitch {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: '1771cd2ef07017d9bb0926400770fd275931db16' }, h("input", { key: '1d13feb62af11178228669b743d0ee85cd5d5ae3', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'aa744787a1e16c93a93a686cbcf3b94499e059e5', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: '2af0e6991e384960fcd80acf8f5bfaefe3b7b472' }, h("input", { key: 'e462fa59aaefc149c9ca69451c66240f0901698e', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'e99e0a62bdd5f55f704d0bd1a5e72cfd2cb8e8fc', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: '5ba9f0eecc9ef29343497da129745303e09937f2' }, h("slot", { key: '1940bfaf26ffd133d0c116cd0fe0b621e817b7b1' })), h("span", { key: '175399b96fd332c61abde6880873f6b610796f27', class: {
+            } }, h("span", { key: '8107c045f6ff9011205ed2c69ac2d1c39a845094' }, h("slot", { key: 'ce3100d20bbd1d86584a6279fdbfc9821ce7a8a3' })), h("span", { key: 'dd86e6f64912d5d2bdb89708501b27144aa83fa3', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: 'f216c1347b00f63f68113bf81a5a7e0e920d4f09', class: "circle" }, this.checked && (h("z-icon", { key: 'd635f121906e928977d25f902d8734e5992e3ad9', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: 'e6207655a0986f5ee10dd809a95ace50337f1baa', class: "circle" }, this.checked && (h("z-icon", { key: '5f8ccde6506935b0b5607aab3ea27a50181b7a37', width: 12, height: 12, name: "checkmark" })))))));
     }
     static get is() { return "z-toggle-switch"; }
     static get encapsulation() { return "scoped"; }
@@ -157,4 +157,3 @@ export class ZToggleSwitch {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-toggle-switch/styles.css

@@ -41,9 +41,9 @@ label > span.container {
   width: calc(var(--space-unit) * 4);
   height: 18px;
   align-items: center;
-  background-color: var(--gray500);
+  background-color: var(--color-surface03);
   border-radius: var(--space-unit);
-  color: var(--gray500);
+  color: var(--color-surface03);
   cursor: pointer;
 }
 
@@ -71,7 +71,12 @@ input:focus:focus-visible + label > span.container.disabled {
   outline: none;
 }
 
-label > span.container:not(.disabled):hover {
+label > span.container:not(.disabled, .checked):hover {
+  background-color: var(--color-surface04);
+  fill: var(--color-surface04);
+}
+
+label > span.container.checked:not(.disabled):hover {
   background-color: var(--color-hover-primary);
   fill: var(--color-hover-primary);
 }
@@ -86,7 +91,7 @@ label > span.container > span.circle {
   align-items: center;
   justify-content: center;
   margin: 0;
-  background-color: var(--color-white);
+  background-color: var(--color-surface01);
   border-radius: 7px;
   box-shadow: var(--shadow-1);
   transition: transform 0.3s ease;
@@ -102,3 +107,331 @@ input[type="checkbox"] {
   opacity: 0;
   pointer-events: none;
 }
+
+/* ---------------------------------- */
+
+/* BLACK THEME                        */
+
+/* ---------------------------------- */
+
+.theme-black :host label > span:first-child {
+  color: var(--color-text-inverse);
+}
+
+.theme-black :host label > span.container:not(.checked, .disabled) {
+  background-color: var(--gray500);
+  color: var(--gray500);
+  fill: var(--gray500);
+}
+
+.theme-black :host label > span.container:not(.checked, .disabled) > span.circle {
+  background-color: var(--gray900);
+}
+
+.theme-black :host label > span.container.checked:not(.disabled) {
+  background-color: var(--color-surface01);
+  color: var(--color-surface01);
+  fill: var(--color-primary01);
+}
+
+.theme-black :host label > span.container.checked:not(.disabled) > span.circle {
+  background-color: var(--color-primary01);
+}
+
+.theme-black :host label > span.container.checked:not(.disabled) > span.circle > z-icon {
+  fill: var(--color-surface01);
+}
+
+.theme-black :host label > span.container.disabled:not(.checked) {
+  background-color: var(--color-hover-primary);
+  color: var(--color-hover-primary);
+  cursor: default;
+  fill: var(--color-hover-primary);
+}
+
+.theme-black :host label > span.container.disabled:not(.checked) > span.circle {
+  background-color: var(--gray900);
+}
+
+.theme-black :host label > span.container.checked.disabled {
+  background-color: var(--color-hover-primary);
+  color: var(--color-hover-primary);
+  cursor: default;
+  fill: var(--color-hover-primary);
+}
+
+.theme-black :host label > span.container.checked.disabled > span.circle {
+  background-color: var(--color-surface01);
+}
+
+.theme-black :host label > span.container.checked.disabled > span.circle > z-icon {
+  fill: var(--color-hover-primary);
+}
+
+.theme-black :host label > span.container:not(.checked, .disabled):hover {
+  background-color: var(--color-hover-secondary);
+  color: var(--color-hover-secondary);
+  fill: var(--color-hover-secondary);
+}
+
+.theme-black :host label > span.container.checked:not(.disabled):hover {
+  background-color: var(--color-secondary03);
+  color: var(--color-secondary03);
+  fill: var(--color-secondary03);
+}
+
+.theme-black :host label > span.container:not(.checked, .disabled):active {
+  background-color: var(--color-secondary01);
+  color: var(--color-secondary01);
+  fill: var(--color-secondary01);
+}
+
+.theme-black :host label > span.container.checked:not(.disabled):active {
+  background-color: var(--color-surface01);
+  color: var(--color-surface01);
+  fill: var(--color-hover-primary);
+}
+
+/* ---------------------------------- */
+
+/* RED THEME                          */
+
+/* ---------------------------------- */
+
+.theme-red :host label > span.container:not(.checked, .disabled) {
+  background-color: var(--gray600);
+  color: var(--gray600);
+  fill: var(--gray600);
+}
+
+.theme-red :host label > span.container:not(.checked, .disabled) > span.circle {
+  background-color: var(--color-surface01);
+}
+
+.theme-red :host label > span.container.checked:not(.disabled) {
+  background-color: var(--color-active-primary);
+  color: var(--color-active-primary);
+  fill: var(--color-surface01);
+}
+
+.theme-red :host label > span.container.checked:not(.disabled) > span.circle {
+  background-color: var(--color-surface01);
+}
+
+.theme-red :host label > span.container.checked:not(.disabled) > span.circle > z-icon {
+  fill: var(--red300);
+}
+
+.theme-red :host label > span.container.disabled:not(.checked) {
+  background-color: var(--gray200);
+  color: var(--gray200);
+  cursor: default;
+  fill: var(--gray200);
+}
+
+.theme-red :host label > span.container.disabled:not(.checked) > span.circle {
+  background-color: var(--color-surface01);
+}
+
+.theme-red :host label > span.container.checked.disabled {
+  background-color: var(--gray200);
+  color: var(--gray200);
+  cursor: default;
+  fill: var(--gray200);
+}
+
+.theme-red :host label > span.container.checked.disabled > span.circle {
+  background-color: var(--color-surface01);
+}
+
+.theme-red :host label > span.container.checked.disabled > span.circle > z-icon {
+  fill: var(--gray200);
+}
+
+.theme-red :host label > span.container:not(.checked, .disabled):hover {
+  background-color: var(--gray400);
+  color: var(--gray400);
+  fill: var(--gray400);
+}
+
+.theme-red :host label > span.container.checked:not(.disabled):hover {
+  background-color: var(--red400);
+  color: var(--red400);
+  fill: var(--red400);
+}
+
+.theme-red :host label > span.container:not(.checked, .disabled):active {
+  background-color: var(--gray300);
+  color: var(--gray300);
+  fill: var(--gray300);
+}
+
+.theme-red :host label > span.container.checked:not(.disabled):active {
+  background-color: var(--red300);
+  color: var(--red300);
+  fill: var(--color-surface01);
+}
+
+/* ---------------------------------- */
+
+/* BLACK THEME - YELLOW VARIANT       */
+
+/* ---------------------------------- */
+
+.theme-black.theme-black--yellow :host label > span:first-child {
+  color: var(--color-default-text);
+}
+
+.theme-black.theme-black--yellow :host label > span.container:not(.checked, .disabled) {
+  background-color: var(--gray500);
+  color: var(--gray500);
+  fill: var(--gray500);
+}
+
+.theme-black.theme-black--yellow :host label > span.container:not(.checked, .disabled) > span.circle {
+  background-color: var(--color-surface01);
+}
+
+.theme-black.theme-black--yellow :host label > span.container.checked:not(.disabled) {
+  background-color: var(--gray900);
+  color: var(--gray900);
+  fill: var(--color-surface01);
+}
+
+.theme-black.theme-black--yellow :host label > span.container.checked:not(.disabled) > span.circle {
+  background-color: var(--color-surface01);
+}
+
+.theme-black.theme-black--yellow :host label > span.container.checked:not(.disabled) > span.circle > z-icon {
+  fill: var(--gray950);
+}
+
+.theme-black.theme-black--yellow :host label > span.container.disabled:not(.checked) {
+  background-color: var(--gray200);
+  color: var(--gray200);
+  cursor: default;
+  fill: var(--gray200);
+}
+
+.theme-black.theme-black--yellow :host label > span.container.disabled:not(.checked) > span.circle {
+  background-color: var(--color-surface01);
+}
+
+.theme-black.theme-black--yellow :host label > span.container.checked.disabled {
+  background-color: var(--gray600);
+  color: var(--gray600);
+  cursor: default;
+  fill: var(--gray600);
+}
+
+.theme-black.theme-black--yellow :host label > span.container.checked.disabled > span.circle {
+  background-color: var(--color-surface01);
+}
+
+.theme-black.theme-black--yellow :host label > span.container.checked.disabled > span.circle > z-icon {
+  fill: var(--gray600);
+}
+
+.theme-black.theme-black--yellow :host label > span.container:not(.checked, .disabled):hover {
+  background-color: var(--gray600);
+  color: var(--gray600);
+  fill: var(--gray600);
+}
+
+.theme-black.theme-black--yellow :host label > span.container.checked:not(.disabled):hover {
+  background-color: var(--gray800);
+  color: var(--gray800);
+  fill: var(--gray800);
+}
+
+.theme-black.theme-black--yellow :host label > span.container:not(.checked, .disabled):active {
+  background-color: var(--gray700);
+  color: var(--gray700);
+  fill: var(--gray700);
+}
+
+.theme-black.theme-black--yellow :host label > span.container.checked:not(.disabled):active {
+  background-color: var(--gray950);
+  color: var(--gray950);
+  fill: var(--color-surface01);
+}
+
+/* ---------------------------------- */
+
+/* BLACK THEME - RED VARIANT          */
+
+/* ---------------------------------- */
+
+.theme-black.theme-black--red :host label > span.container:not(.checked, .disabled) {
+  background-color: var(--gray700);
+  color: var(--gray700);
+  fill: var(--gray700);
+}
+
+.theme-black.theme-black--red :host label > span.container:not(.checked, .disabled) > span.circle {
+  background-color: var(--color-surface01);
+}
+
+.theme-black.theme-black--red :host label > span.container.checked:not(.disabled) {
+  background-color: var(--gray950);
+  color: var(--gray950);
+  fill: var(--color-surface01);
+}
+
+.theme-black.theme-black--red :host label > span.container.checked:not(.disabled) > span.circle {
+  background-color: var(--color-surface01);
+}
+
+.theme-black.theme-black--red :host label > span.container.checked:not(.disabled) > span.circle > z-icon {
+  fill: var(--gray950);
+}
+
+.theme-black.theme-black--red :host label > span.container.disabled:not(.checked) {
+  background-color: var(--gray600);
+  color: var(--gray600);
+  cursor: default;
+  fill: var(--gray600);
+}
+
+.theme-black.theme-black--red :host label > span.container.disabled:not(.checked) > span.circle {
+  background-color: var(--color-surface01);
+}
+
+.theme-black.theme-black--red :host label > span.container.checked.disabled {
+  background-color: var(--gray600);
+  color: var(--gray600);
+  cursor: default;
+  fill: var(--gray600);
+}
+
+.theme-black.theme-black--red :host label > span.container.checked.disabled > span.circle {
+  background-color: var(--color-surface01);
+}
+
+.theme-black.theme-black--red :host label > span.container.checked.disabled > span.circle > z-icon {
+  fill: var(--gray600);
+}
+
+.theme-black.theme-black--red :host label > span.container:not(.checked, .disabled):hover {
+  background-color: var(--gray600);
+  color: var(--gray600);
+  fill: var(--gray600);
+}
+
+.theme-black.theme-black--red :host label > span.container.checked:not(.disabled):hover {
+  background-color: var(--gray800);
+  color: var(--gray800);
+  fill: var(--gray800);
+}
+
+.theme-black.theme-black--red :host label > span.container:not(.checked, .disabled):active {
+  background-color: var(--gray700);
+  color: var(--gray700);
+  fill: var(--gray700);
+}
+
+.theme-black.theme-black--red :host label > span.container.checked:not(.disabled):active {
+  background-color: var(--gray950);
+  color: var(--gray950);
+  fill: var(--color-surface01);
+}