@tet/tet-components 1.4.15-testing → 1.4.16-testing

package/dist/collection/components/basic/buttons/tet-checkbox/tet-checkbox.js

@@ -8,6 +8,7 @@ export class TetCheckbox {
     constructor() {
         this.theme = 'light';
         this.label = undefined;
+        this.accessibilityLabel = '';
         this.name = undefined;
         this.value = 0;
         this.disabled = false;
@@ -15,6 +16,10 @@ export class TetCheckbox {
         this.error = false;
         this.indeterminate = false;
         this.focusStyleOnContainer = false;
+        this.iconName = undefined;
+        this.labelFont = undefined;
+        this.alignCenter = true;
+        this.hasSlotIcon = false;
     }
     /** The HTML input element. */
     inputEl;
@@ -60,16 +65,33 @@ export class TetCheckbox {
     async setError(value) {
         this.error = value;
     }
+    onIconSlotChange = (event) => {
+        const slot = event.target;
+        this.hasSlotIcon = slot.assignedElements().length > 0;
+    };
     render() {
-        const { label, name, checked, value, disabled, error } = this;
-        return (h(Host, { key: '8228b4b1325743e8523654dd8720ab3c0ce975ae' }, h("div", { key: '74903372c7fc702ac1e75dd46a6c0f9c0f6ee323', class: { checkbox: true, [`${this.theme}`]: true } }, h("label", { key: '6f2f4187615d2d4b87253d740137449f66c87689', class: {
+        const { label, name, checked, value, disabled, error, iconName, labelFont, alignCenter, hasSlotIcon, accessibilityLabel } = this;
+        return (h(Host, { key: '8fecb04d1babd790e4abb6955d0c31a4522c0008' }, h("div", { key: '0d03c659208ba6f08ed34eff817cc0ade3cc49fd', class: { checkbox: true, [`${this.theme}`]: true } }, h("label", { key: '4e9c24116b348051474da763163172b4a1394de4', class: {
                 'checkbox__container': true,
                 'checkbox__container--focus-style': this.focusStyleOnContainer,
-            }, part: "checkbox-container", htmlFor: "tet-checkbox" }, h("input", { key: 'bb9d955bac56c3f755b57a9f6acc6ef7fb83d8bf', ref: (el) => (this.inputEl = el), class: "checkbox__html-input", id: "tet-checkbox", type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: this.handleChange }), h("span", { key: 'aa720d7866e915f87a8e1b093c8d2113b2781445', class: {
+                'checkbox__container--align-start': !alignCenter,
+            }, part: "checkbox-container", htmlFor: "tet-checkbox" }, h("input", { key: 'bd35041be71c7473cf70255c06ce1866ef75fca1', ref: (el) => (this.inputEl = el), class: "checkbox__html-input", id: "tet-checkbox", type: "checkbox", name: name, value: value, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}), disabled: disabled, checked: checked, onChange: this.handleChange }), h("span", { key: '52fced52c626d7af158634057923dde915d4bc3a', class: {
                 'checkbox__input': true,
                 'checkbox__input--error': error,
                 'checkbox__input--hide-focus-style': this.focusStyleOnContainer,
-            } }, h("tet-icon", { key: 'ca7349167feb74bf4843f7c0e1460bfe33dd2b95', name: "remove", class: "checkbox__icon checkbox__icon--indeterminate indicator" }), h("tet-icon", { key: 'b1fd1a9967ba5af4de1ba84b534c4674ee15315a', name: "check", class: "checkbox__icon" })), label ? (h("span", { class: "checkbox__label", innerHTML: label })) : (h("span", { class: "checkbox__label" }, h("slot", null)))))));
+                ...(labelFont ? { [`checkbox__input--${labelFont}`]: true } : {}),
+            } }, h("tet-icon", { key: '4a4f7602ad1008445049c14d6c62fe808e3cce64', name: "remove", class: "checkbox__icon checkbox__icon--indeterminate indicator" }), h("tet-icon", { key: '0f2fe9286205b73b92edcd17c24fae27db907264', name: "check", class: "checkbox__icon" })), h("div", { key: '71919d5070682cb5b5a60bece4b08519875e596a', class: "checkbox__label-container" }, iconName ? (h("tet-icon", { theme: this.theme === 'light' ? 'light' : 'dark', name: iconName, type: disabled ? 'tertiary' : 'primary', class: {
+                'checkbox__label-icon': true,
+                [`checkbox__label-icon--${iconName}`]: true,
+                ...(labelFont ? { [`checkbox__label-icon--${labelFont}`]: true } : {}),
+            } })) : (h("div", { class: {
+                'checkbox__label-slot-icon': true,
+                'checkbox__label-slot-icon--hidden': !hasSlotIcon,
+                ...(labelFont ? { [`checkbox__label-slot-icon--${labelFont}`]: true } : {}),
+            } }, h("slot", { name: "label-icon", onSlotchange: this.onIconSlotChange }))), h("span", { key: '411339feb07761593d87f955435cb7da4679c201', class: {
+                'checkbox__label': true,
+                ...(labelFont ? { [`checkbox__label--${labelFont}`]: true } : {}),
+            }, innerHTML: label }, h("slot", { key: '80596fe99fae36f713ac65d39100208d6fac03dd' })))))));
     }
     static get is() { return "tet-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -120,6 +142,24 @@ export class TetCheckbox {
                 "attribute": "label",
                 "reflect": false
             },
+            "accessibilityLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the aria label."
+                },
+                "attribute": "accessibility-label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -244,9 +284,72 @@ export class TetCheckbox {
                 "attribute": "focus-style-on-container",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the label icon to be displayed."
+                },
+                "attribute": "icon-name",
+                "reflect": false
+            },
+            "labelFont": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LabelFont",
+                    "resolved": "\"lg-gilroy\" | \"lg-inter\" | \"md\" | \"sm\"",
+                    "references": {
+                        "LabelFont": {
+                            "location": "import",
+                            "path": "../types/common",
+                            "id": "src/components/basic/buttons/types/common.ts::LabelFont"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the font of the label."
+                },
+                "attribute": "label-font",
+                "reflect": false
+            },
+            "alignCenter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the checkbox should be center-aligned."
+                },
+                "attribute": "align-center",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
+    static get states() {
+        return {
+            "hasSlotIcon": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "check",

package/dist/collection/components/basic/buttons/tet-radio/tet-radio.css

@@ -352,31 +352,9 @@
 
 :host {
   /**
-  * @prop --radio-border-color: The border color of the radio button.
-  * @prop --radio-background-color: The background color of the radio button.
-  * @prop --radio-checked-background-color: The background color of the radio button when checked.
-  * @prop --radio-pressed-background-color: The background color of the radio button when pressed.
-  * @prop --radio-icon-color: The icon color of the radio button.
-  * @prop --radio-text-color: The text color of the radio button.
-
-  * @prop --radio-hover-border-color: The border color of the radio button on hover.
-  * @prop --radio-hover-background-color: The background color of the radio button on hover.
-
-  * @prop --radio-checked-hover-background-color: The background color of checked radio button on hover.
-  * @prop --radio-checked-pressed-background-color: The background color of checked radio button when pressed.
-
-  * @prop --radio-focus-border-color: The border color of the radio button on focus.
-  * @prop --radio-focus-background-color: The background color of the radio button on focus.
-  * @prop --radio-focus-shadow-color: The shadow color of the radio button on focus.
-
-  * @prop --radio-disabled-border-color: The border color of the radio button when disabled.
-  * @prop --radio-disabled-background-color: The background color of the radio button when disabled.
-  * @prop --radio-disabled-checked-background-color: The background color of the radio button when checked and disabled.
-  * @prop --radio-disabled-text-color: The text color of the radio button when disabled.
-
-  * @prop --radio-error-border-color: The border color of the radio button on error.
-
-  * @prop --radio-vertical-alignment: Sets how the radio button and label align vertically within the container. Accepts flexbox align-items values (default: flex-start).
+  * @prop --radio-vertical-alignment: Sets how the radio button and label align vertically within the container. Accepts flexbox align-items values.
+  * @prop --radio-gap: Sets the gap between the radio button and label.
+  * @prop --radio-container-outline-offset: Sets the outline offset for the radio container when focused.
   */
   --radio-border-color: rgb(153, 160, 174);
   --radio-background-color: rgb(255, 255, 255);
@@ -388,15 +366,16 @@
   --radio-hover-background-color: rgba(88, 99, 116, 0.08);
   --radio-checked-hover-background-color: var(--radio-checked-background-color);
   --radio-checked-pressed-background-color: var(--radio-checked-background-color);
-  --radio-focus-border-color: rgb(10, 11, 13);
-  --radio-focus-background-color: var(--radio-background-color);
   --radio-focus-shadow-color: rgba(88, 99, 116, 0.12);
   --radio-disabled-border-color: rgb(192, 197, 206);
   --radio-disabled-background-color: rgb(255, 255, 255);
   --radio-disabled-checked-background-color: rgb(153, 160, 174);
   --radio-disabled-text-color: rgb(153, 160, 174);
   --radio-error-border-color: rgb(233, 69, 54);
+  --radio-outline-focus-color: var(--tc-blue-40);
   --radio-vertical-alignment: flex-start;
+  --radio-gap: 0.5rem;
+  --radio-container-outline-offset: 0.1875rem;
   display: block;
   position: relative;
 }
@@ -412,14 +391,13 @@
   --radio-hover-background-color: var(--tc-radio-button-hover-dark);
   --radio-checked-hover-background-color: var(--tc-radio-button-active-hover-dark);
   --radio-checked-pressed-background-color: var(--tc-radio-button-active-pressed-dark);
-  --radio-focus-border-color: var(--tc-border-secondary-dark);
-  --radio-focus-background-color: var(--radio-background-color-dark);
   --radio-focus-shadow-color: var(--tc-radio-button-active-focus-dark);
   --radio-disabled-border-color: var(--tc-border-quaternary-dark);
   --radio-disabled-background-color: var(--tc-radio-button-disabled-dark);
   --radio-disabled-checked-background-color: var(--tc-radio-button-active-disabled-dark);
-  --radio-disabled-text-color: var(--tc-button-text-inverse-disabled-dark);
+  --radio-disabled-text-color: var(--tc-grey-40-dark);
   --radio-error-border-color: var(--tc-alert-accent-error-dark);
+  --radio-outline-focus-color: var(--tc-blue-40-dark);
 }
 .radio-dark-theme .radio__html-input:focus-visible ~ .radio__input, .radio-mint-theme .radio__html-input:focus-visible ~ .radio__input {
   outline: 0.125rem solid var(--tc-blue-40);
@@ -427,10 +405,12 @@
   outline-offset: 0.125rem;
   transition: outline 0s;
 }
+.radio-dark-theme .radio__html-input:focus-visible ~ .radio__input--hide-focus-style, .radio-mint-theme .radio__html-input:focus-visible ~ .radio__input--hide-focus-style {
+  outline: none;
+}
 .radio-mint-theme {
   --radio-checked-background-color: rgb(31, 208, 214);
   --radio-hover-background-color: rgba(31, 208, 214, 0.16);
-  --radio-focus-border-color: rgb(31, 208, 214);
   --radio-focus-shadow-color: rgba(31, 208, 214, 0.24);
   --radio-checked-hover-background-color: var(--radio-checked-background-color);
   --radio-checked-pressed-background-color: var(--radio-checked-background-color);
@@ -445,28 +425,52 @@
   --radio-hover-background-color: var(--tc-radio-button-hover);
   --radio-checked-hover-background-color: var(--tc-radio-button-active-hover);
   --radio-checked-pressed-background-color: var(--tc-radio-button-active-pressed);
-  --radio-focus-border-color: var(--tc-border-secondary);
-  --radio-focus-background-color: var(--radio-background-color);
   --radio-focus-shadow-color: var(--tc-radio-button-active-focus);
   --radio-disabled-border-color: var(--tc-border-quaternary);
   --radio-disabled-background-color: var(--tc-radio-button-disabled);
   --radio-disabled-checked-background-color: var(--tc-radio-button-active-disabled);
-  --radio-disabled-text-color: var(--tc-button-text-inverse-disabled);
+  --radio-disabled-text-color: var(--tc-grey-40);
   --radio-error-border-color: var(--tc-alert-accent-error);
+  --radio-outline-focus-color: var(--tc-blue-40);
 }
 .radio__container {
-  font: 400 0.875rem/1.25rem Inter, Gilroy, Arial, sans-serif, Gilroy, Arial, sans-serif;
-  letter-spacing: -0.003125rem;
-  font-weight: 500;
   user-select: none;
+  cursor: pointer;
   display: flex;
-  align-items: var(--radio-vertical-alignment);
+  gap: var(--radio-gap);
   color: var(--radio-text-color);
+  align-items: var(--radio-vertical-alignment);
+}
+.radio__container:has(.radio__html-input:disabled) {
+  cursor: auto;
+}
+.radio__container--focus-style:has(.radio__html-input:focus-visible) {
+  outline: 0.125rem solid var(--radio-outline-focus-color);
+  outline-offset: var(--radio-container-outline-offset);
+  border-radius: 0.125rem;
+}
+.radio__container .radio__input--sm.radio__input--has-label-prop {
+  margin-top: 0.0625rem;
+}
+.radio__container .radio__input--md, .radio__container .radio__input--lg-inter, .radio__container .radio__input--lg-gilroy {
+  margin-top: 0.125rem;
+}
+.radio__container .radio__input--error {
+  border-color: var(--radio-error-border-color);
+}
+.radio__container--align-center {
+  align-items: center;
+}
+.radio__container--align-center .radio__input {
+  margin-top: 0;
 }
 .radio__container:hover .radio__input {
   border-color: var(--radio-hover-border-color);
   background-color: var(--radio-hover-background-color);
 }
+.radio__container:hover .radio__input--error {
+  border-color: var(--radio-error-border-color);
+}
 .radio__container:hover .radio__html-input:checked:not(:disabled) ~ .radio__input {
   border-color: transparent;
   background-color: var(--radio-checked-hover-background-color);
@@ -481,19 +485,22 @@
   fill: var(--radio-icon-color);
 }
 .radio__html-input {
+  position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
 }
 .radio__html-input:focus ~ .radio__input {
-  background-color: var(--radio-focus-background-color);
-  border-color: var(--radio-focus-border-color);
   box-shadow: 0 0 0 0.25rem var(--radio-focus-shadow-color);
 }
 .radio__html-input:focus-visible ~ .radio__input {
   outline: 0.125rem solid var(--tc-blue-40);
   outline-offset: 0.125rem;
   transition: outline 0s;
+  box-shadow: none;
+}
+.radio__html-input:focus-visible ~ .radio__input--hide-focus-style {
+  outline: none;
 }
 .radio__html-input:active ~ .radio__input {
   background-color: var(--radio-pressed-background-color);
@@ -505,15 +512,11 @@
 .radio__html-input:checked ~ .radio__input::after {
   display: block;
 }
-.radio__html-input[disabled] ~ .radio__label,
-.radio__html-input[disabled] ~ .radio__input {
-  cursor: auto;
-}
 .radio__html-input[disabled] ~ .radio__input {
   border-color: var(--radio-disabled-border-color);
   background-color: var(--radio-disabled-background-color);
 }
-.radio__html-input[disabled] ~ .radio__label {
+.radio__html-input[disabled] ~ .radio__label-container .radio__label {
   color: var(--radio-disabled-text-color);
 }
 .radio__html-input[disabled]:checked ~ .radio__input {
@@ -532,19 +535,203 @@
   content: "";
   display: none;
   position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  margin: auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   width: 0.4375rem;
   height: 0.4375rem;
   border-radius: 50%;
   background-color: var(--radio-icon-color);
 }
-.radio__label {
-  padding-left: 0.625rem;
+.radio__label-container {
+  position: relative;
 }
-.radio__label, .radio__input {
-  cursor: pointer;
+.radio__label-container--line-height {
+  line-height: 0;
+}
+.radio__label-slot-icon {
+  display: inline-flex;
+  vertical-align: middle;
+}
+.radio__label-slot-icon--hidden {
+  display: none;
+}
+.radio__label-slot-icon ::slotted(*) {
+  width: auto;
+  height: 1rem;
+  margin-right: 0.5rem;
+}
+.radio__label-slot-icon--md ::slotted(*) {
+  height: 1.25rem;
+}
+.radio__label-slot-icon--lg-inter ::slotted(*), .radio__label-slot-icon--lg-gilroy ::slotted(*) {
+  height: 1.5rem;
+}
+.radio__label--has-slot-icon {
+  vertical-align: middle;
+}
+.radio__label--sm {
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+}
+.radio__label--md {
+  font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  vertical-align: middle;
+}
+.radio__label--lg-inter {
+  font: 500 1.25rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  vertical-align: middle;
+}
+.radio__label--lg-gilroy {
+  font: 600 1.25rem/1.5rem "Gilroy", "Gilroy, Arial, sans-serif";
+  vertical-align: middle;
+}
+.radio__label-icon--sm {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 1.25rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.25rem - 1.25rem) / 2);
+}
+.radio__label-icon--sm + .radio__label {
+  padding-left: calc(1.25rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--md {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 1.5rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.5rem - 1.5rem) / 2);
+}
+.radio__label-icon--md + .radio__label {
+  padding-left: calc(1.5rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--lg-inter, .radio__label-icon--lg-gilroy {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 1.5rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.5rem - 1.5rem) / 2);
+}
+.radio__label-icon--lg-inter + .radio__label, .radio__label-icon--lg-gilroy + .radio__label {
+  padding-left: calc(1.5rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--tc-netflix-2.radio__label-icon--sm {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 1.375rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.25rem - 1.375rem) / 2);
+}
+.radio__label-icon--tc-netflix-2.radio__label-icon--sm + .radio__label {
+  padding-left: calc(1.375rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--tc-netflix-2.radio__label-icon--md {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 1.625rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.5rem - 1.625rem) / 2);
+}
+.radio__label-icon--tc-netflix-2.radio__label-icon--md + .radio__label {
+  padding-left: calc(1.625rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--tc-netflix-2.radio__label-icon--lg-inter, .radio__label-icon--tc-netflix-2.radio__label-icon--lg-gilroy {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 1.875rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.5rem - 1.875rem) / 2);
+}
+.radio__label-icon--tc-netflix-2.radio__label-icon--lg-inter + .radio__label, .radio__label-icon--tc-netflix-2.radio__label-icon--lg-gilroy + .radio__label {
+  padding-left: calc(1.875rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--tc-tet-tv.radio__label-icon--sm {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 1.5rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.25rem - 1.5rem) / 2);
+}
+.radio__label-icon--tc-tet-tv.radio__label-icon--sm + .radio__label {
+  padding-left: calc(1.5rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--tc-tet-tv.radio__label-icon--md {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 1.875rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.5rem - 1.875rem) / 2);
+}
+.radio__label-icon--tc-tet-tv.radio__label-icon--md + .radio__label {
+  padding-left: calc(1.875rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--tc-tet-tv.radio__label-icon--lg-inter, .radio__label-icon--tc-tet-tv.radio__label-icon--lg-gilroy {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 2.5rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.5rem - 2.5rem) / 2);
+}
+.radio__label-icon--tc-tet-tv.radio__label-icon--lg-inter + .radio__label, .radio__label-icon--tc-tet-tv.radio__label-icon--lg-gilroy + .radio__label {
+  padding-left: calc(2.5rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--tc-tet-plus.radio__label-icon--sm {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 1.75rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.25rem - 1.75rem) / 2);
+}
+.radio__label-icon--tc-tet-plus.radio__label-icon--sm + .radio__label {
+  padding-left: calc(1.75rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--tc-tet-plus.radio__label-icon--md {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 2rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.5rem - 2rem) / 2);
+}
+.radio__label-icon--tc-tet-plus.radio__label-icon--md + .radio__label {
+  padding-left: calc(2rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--tc-tet-plus.radio__label-icon--lg-inter, .radio__label-icon--tc-tet-plus.radio__label-icon--lg-gilroy {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 2.625rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.5rem - 2.625rem) / 2);
+}
+.radio__label-icon--tc-tet-plus.radio__label-icon--lg-inter + .radio__label, .radio__label-icon--tc-tet-plus.radio__label-icon--lg-gilroy + .radio__label {
+  padding-left: calc(2.625rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--tc-whalebone.radio__label-icon--sm {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 1rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.25rem - 1rem) / 2);
+}
+.radio__label-icon--tc-whalebone.radio__label-icon--sm + .radio__label {
+  padding-left: calc(1rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--tc-whalebone.radio__label-icon--md {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 1.25rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.5rem - 1.25rem) / 2);
+}
+.radio__label-icon--tc-whalebone.radio__label-icon--md + .radio__label {
+  padding-left: calc(1.25rem + var(--label-icon-gap, 0.5rem));
+}
+.radio__label-icon--tc-whalebone.radio__label-icon--lg-inter, .radio__label-icon--tc-whalebone.radio__label-icon--lg-gilroy {
+  --label-icon-gap: 0.5rem;
+  --icon-size: 1.5rem;
+  --icon-container-display: flex;
+  position: absolute;
+  top: calc((1.5rem - 1.5rem) / 2);
+}
+.radio__label-icon--tc-whalebone.radio__label-icon--lg-inter + .radio__label, .radio__label-icon--tc-whalebone.radio__label-icon--lg-gilroy + .radio__label {
+  padding-left: calc(1.5rem + var(--label-icon-gap, 0.5rem));
 }