diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
index e093b2409ed..076d0a7246f 100644
--- a/packages/calcite-components/src/assets/styles/includes.scss
+++ b/packages/calcite-components/src/assets/styles/includes.scss
@@ -15,10 +15,6 @@
   }
 }
 
-:host([hidden]) {
-  display: none;
-}
-
 @mixin word-break() {
   word-wrap: break-word;
   word-break: break-word;
@@ -75,6 +71,16 @@
   }
 }
 
+@mixin base-component() {
+  :host([hidden]) {
+    @apply hidden;
+  }
+
+  [hidden] {
+    @apply hidden;
+  }
+}
+
 @mixin xButton() {
   :host([scale="s"]) {
     .x-button {
diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.scss b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
index 383a128d6ce..86e6d868452 100644
--- a/packages/calcite-components/src/components/accordion-item/accordion-item.scss
+++ b/packages/calcite-components/src/components/accordion-item/accordion-item.scss
@@ -213,3 +213,5 @@
     }
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/accordion/accordion.scss b/packages/calcite-components/src/components/accordion/accordion.scss
index 28a55449f95..896e5da332a 100644
--- a/packages/calcite-components/src/components/accordion/accordion.scss
+++ b/packages/calcite-components/src/components/accordion/accordion.scss
@@ -37,3 +37,5 @@
 .accordion {
   @apply border border-solid border-color-2 border-b-0;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.scss b/packages/calcite-components/src/components/action-bar/action-bar.scss
index e23aaa874ee..544f87fb75d 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.scss
+++ b/packages/calcite-components/src/components/action-bar/action-bar.scss
@@ -61,3 +61,5 @@
 .action-group--bottom {
   @apply justify-end;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/action-group/action-group.scss b/packages/calcite-components/src/components/action-group/action-group.scss
index a24a394891c..502a327e485 100755
--- a/packages/calcite-components/src/components/action-group/action-group.scss
+++ b/packages/calcite-components/src/components/action-group/action-group.scss
@@ -52,3 +52,5 @@
 
   grid-template-columns: repeat(var(--calcite-action-group-columns), auto);
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.scss b/packages/calcite-components/src/components/action-menu/action-menu.scss
index 97cd2c9969e..719900c2731 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.scss
+++ b/packages/calcite-components/src/components/action-menu/action-menu.scss
@@ -35,3 +35,5 @@
 .menu {
   @apply flex-col flex-nowrap outline-none;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.scss b/packages/calcite-components/src/components/action-pad/action-pad.scss
index 214755e9f08..3d33409a5c3 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.scss
+++ b/packages/calcite-components/src/components/action-pad/action-pad.scss
@@ -55,3 +55,5 @@
 ::slotted(calcite-action-group:last-child) {
   @apply border-b-0;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
index a3f5ce55598..451b349e413 100755
--- a/packages/calcite-components/src/components/action/action.scss
+++ b/packages/calcite-components/src/components/action/action.scss
@@ -239,3 +239,5 @@
 .indicator-text {
   @apply sr-only;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss
index 89dd3859c85..c1990797076 100644
--- a/packages/calcite-components/src/components/alert/alert.scss
+++ b/packages/calcite-components/src/components/alert/alert.scss
@@ -126,10 +126,6 @@
 
 @include calciteHydratedHidden();
 
-[hidden] {
-  @apply hidden;
-}
-
 .container {
   @apply flex
     w-full
@@ -333,3 +329,5 @@ $alertDurations: "fast" 6000ms, "medium" 10000ms, "slow" 14000ms;
 .container.slotted-in-shell {
   position: absolute;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/avatar/avatar.scss b/packages/calcite-components/src/components/avatar/avatar.scss
index b908c8c5e26..df0f91758f7 100644
--- a/packages/calcite-components/src/components/avatar/avatar.scss
+++ b/packages/calcite-components/src/components/avatar/avatar.scss
@@ -29,3 +29,5 @@
 .thumbnail {
   @apply rounded-half h-full w-full;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/block-section/block-section.scss b/packages/calcite-components/src/components/block-section/block-section.scss
index a2c19057921..051fde69d8c 100644
--- a/packages/calcite-components/src/components/block-section/block-section.scss
+++ b/packages/calcite-components/src/components/block-section/block-section.scss
@@ -81,3 +81,5 @@
 .status-icon.invalid {
   color: theme("colors.danger");
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/block/block.scss b/packages/calcite-components/src/components/block/block.scss
index a1a5fe13d88..c2bf852b622 100644
--- a/packages/calcite-components/src/components/block/block.scss
+++ b/packages/calcite-components/src/components/block/block.scss
@@ -160,3 +160,5 @@ calcite-action-menu {
     @apply text-color-1;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
index 4afe6442e2c..59fb04da5ff 100644
--- a/packages/calcite-components/src/components/button/button.scss
+++ b/packages/calcite-components/src/components/button/button.scss
@@ -732,3 +732,5 @@
 :host([scale="l"][icon-start][icon-end][appearance="transparent"]) a:not(.content--slotted) {
   --calcite-button-padding-x-internal: theme("padding.11");
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss
index b608da04a31..7d681ee1418 100644
--- a/packages/calcite-components/src/components/card/card.scss
+++ b/packages/calcite-components/src/components/card/card.scss
@@ -125,3 +125,5 @@ slot[name="footer-start"]::slotted(*),
 slot[name="footer-end"]::slotted(*) {
   @apply flex gap-1;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/checkbox/checkbox.scss b/packages/calcite-components/src/components/checkbox/checkbox.scss
index 242cc161c2e..f957f611260 100644
--- a/packages/calcite-components/src/components/checkbox/checkbox.scss
+++ b/packages/calcite-components/src/components/checkbox/checkbox.scss
@@ -15,6 +15,7 @@
 :host([scale="l"]) {
   --calcite-checkbox-size: theme("spacing.4");
 }
+
 :host {
   @apply relative
     inline-flex
@@ -68,3 +69,4 @@
 
 @include disabled();
 @include hidden-form-input();
+@include base-component();
diff --git a/packages/calcite-components/src/components/chip-group/chip-group.scss b/packages/calcite-components/src/components/chip-group/chip-group.scss
index c44bcc9a67e..978bb621adb 100644
--- a/packages/calcite-components/src/components/chip-group/chip-group.scss
+++ b/packages/calcite-components/src/components/chip-group/chip-group.scss
@@ -22,3 +22,4 @@
 }
 
 @include disabled();
+@include base-component();
diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index d44191dc8c8..60d49810bc4 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -302,3 +302,4 @@ slot[name="image"]::slotted(*) {
 }
 
 @include disabled();
+@include base-component();
diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss
index 7b560151520..26d02a4ad1b 100644
--- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss
+++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss
@@ -31,3 +31,5 @@
     inline-size: 88px;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss
index 219bb69cb14..c07f3199d47 100644
--- a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss
+++ b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss
@@ -41,3 +41,5 @@ $size-l: 28px;
 .checker {
   fill: #cacaca;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.scss b/packages/calcite-components/src/components/color-picker/color-picker.scss
index b6c2b03aa70..ddda58541bb 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.scss
+++ b/packages/calcite-components/src/components/color-picker/color-picker.scss
@@ -189,3 +189,5 @@
     outline-offset: 2px;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index 47fb0ade599..533dd986210 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -1,3 +1,5 @@
+@include base-component();
+
 .scale--s {
   @apply text-n2h;
   --calcite-combobox-item-spacing-unit-l: theme("spacing.2");
diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
index 66af63bce5e..0ef0c134e64 100644
--- a/packages/calcite-components/src/components/combobox/combobox.scss
+++ b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -208,3 +208,4 @@
 }
 
 @include hidden-form-input();
+@include base-component();
diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss
index 3d4efdf3f70..53a62537789 100644
--- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss
+++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.scss
@@ -488,3 +488,5 @@
     }
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
index 386a24c578b..cc76987cfc0 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
+++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss
@@ -126,8 +126,10 @@
 }
 
 .suffix {
-  @apply top-0 
+  @apply top-0
     whitespace-nowrap
     text-start;
   inset-inline-start: 0;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss b/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss
index 05e59246eb6..fd5092bc072 100644
--- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss
+++ b/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss
@@ -1,3 +1,5 @@
+@include base-component();
+
 .calendar {
   @apply mb-1;
 }
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.scss b/packages/calcite-components/src/components/date-picker/date-picker.scss
index 835e4a54972..fdd9ecbb125 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.scss
+++ b/packages/calcite-components/src/components/date-picker/date-picker.scss
@@ -23,3 +23,5 @@
 :host([scale="l"]) {
   max-inline-size: 398px;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss b/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss
index 3fecc3bedb8..a9c1e93c5d0 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss
@@ -45,3 +45,5 @@
   @apply block h-px;
   background-color: theme("borderColor.color.3");
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
index f4d2902df4b..3aad51218ef 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
@@ -217,3 +217,5 @@
     margin-inline-start: theme("margin.4");
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.scss b/packages/calcite-components/src/components/dropdown/dropdown.scss
index 78174ad274a..0bc0223fdb7 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.scss
+++ b/packages/calcite-components/src/components/dropdown/dropdown.scss
@@ -53,3 +53,5 @@
 :host([width="l"]) {
   --calcite-dropdown-width: theme("spacing.64");
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss
index 9df9e1eaa3b..ecdf9684fa9 100755
--- a/packages/calcite-components/src/components/fab/fab.scss
+++ b/packages/calcite-components/src/components/fab/fab.scss
@@ -13,3 +13,5 @@ calcite-button {
     @apply shadow-2-sm;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/filter/filter.scss b/packages/calcite-components/src/components/filter/filter.scss
index 852fd556af3..5f916755ff1 100644
--- a/packages/calcite-components/src/components/filter/filter.scss
+++ b/packages/calcite-components/src/components/filter/filter.scss
@@ -69,3 +69,5 @@ input[type="text"]:focus {
     @apply text-color-1;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.scss b/packages/calcite-components/src/components/flow-item/flow-item.scss
index 260ef9d31b5..7130ef2ba13 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.scss
+++ b/packages/calcite-components/src/components/flow-item/flow-item.scss
@@ -24,3 +24,5 @@
 calcite-panel {
   --calcite-panel-footer-padding: var(--calcite-flow-item-footer-padding);
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/flow/flow.scss b/packages/calcite-components/src/components/flow/flow.scss
index aede3af12e2..f3442089803 100755
--- a/packages/calcite-components/src/components/flow/flow.scss
+++ b/packages/calcite-components/src/components/flow/flow.scss
@@ -60,3 +60,5 @@
     }
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/graph/graph.scss b/packages/calcite-components/src/components/graph/graph.scss
index 52212821b5a..5fe3420c07e 100644
--- a/packages/calcite-components/src/components/graph/graph.scss
+++ b/packages/calcite-components/src/components/graph/graph.scss
@@ -13,3 +13,5 @@
     @apply opacity-50;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/handle/handle.scss b/packages/calcite-components/src/components/handle/handle.scss
index b2c8d058953..fd5fcfe9cbd 100644
--- a/packages/calcite-components/src/components/handle/handle.scss
+++ b/packages/calcite-components/src/components/handle/handle.scss
@@ -28,3 +28,5 @@
     color: inherit;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/icon/icon.scss b/packages/calcite-components/src/components/icon/icon.scss
index 03333c495d1..346658465c7 100644
--- a/packages/calcite-components/src/components/icon/icon.scss
+++ b/packages/calcite-components/src/components/icon/icon.scss
@@ -35,3 +35,5 @@
 .svg {
   @apply block;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.scss b/packages/calcite-components/src/components/inline-editable/inline-editable.scss
index f806a80d970..df4eb8ede46 100755
--- a/packages/calcite-components/src/components/inline-editable/inline-editable.scss
+++ b/packages/calcite-components/src/components/inline-editable/inline-editable.scss
@@ -49,3 +49,5 @@
     @apply border-color-2;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
index e36b4e6c476..2f1d25cb3a9 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
@@ -157,3 +157,5 @@
 .assistive-text {
   @apply sr-only;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/input-message/input-message.scss b/packages/calcite-components/src/components/input-message/input-message.scss
index 3b0282734e8..55f74a5f91f 100644
--- a/packages/calcite-components/src/components/input-message/input-message.scss
+++ b/packages/calcite-components/src/components/input-message/input-message.scss
@@ -64,3 +64,5 @@
 :host([status][scale="l"]) {
   @apply text-n1h mt-1;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss
index 35418a3532e..1342ebc3740 100755
--- a/packages/calcite-components/src/components/input-number/input-number.scss
+++ b/packages/calcite-components/src/components/input-number/input-number.scss
@@ -411,3 +411,4 @@
 }
 
 @include hidden-form-input();
+@include base-component();
diff --git a/packages/calcite-components/src/components/input-text/input-text.scss b/packages/calcite-components/src/components/input-text/input-text.scss
index 0d0d2f4a13d..72a3de625b2 100755
--- a/packages/calcite-components/src/components/input-text/input-text.scss
+++ b/packages/calcite-components/src/components/input-text/input-text.scss
@@ -299,3 +299,4 @@ input[type="text"]::-ms-reveal {
 }
 
 @include hidden-form-input();
+@include base-component();
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
index 00b67c0f802..0bfd37fc4c1 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
@@ -30,3 +30,5 @@
   inset-block: 0;
   padding-inline: var(--calcite-toggle-spacing);
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss
index 350db793e8b..a29d1e5e648 100755
--- a/packages/calcite-components/src/components/input/input.scss
+++ b/packages/calcite-components/src/components/input/input.scss
@@ -570,3 +570,4 @@ input[type="time"]::-webkit-clear-button {
 }
 
 @include hidden-form-input();
+@include base-component();
diff --git a/packages/calcite-components/src/components/label/label.scss b/packages/calcite-components/src/components/label/label.scss
index aaebaa8c373..6c6b5350ecb 100644
--- a/packages/calcite-components/src/components/label/label.scss
+++ b/packages/calcite-components/src/components/label/label.scss
@@ -87,3 +87,5 @@
     @apply bg-opacity-0;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/link/link.scss b/packages/calcite-components/src/components/link/link.scss
index b3a60bd807f..348d304f23d 100644
--- a/packages/calcite-components/src/components/link/link.scss
+++ b/packages/calcite-components/src/components/link/link.scss
@@ -86,3 +86,4 @@ calcite-icon {
 }
 
 @include disabled();
+@include base-component();
diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss
index 954ea38c68f..45875b09dff 100644
--- a/packages/calcite-components/src/components/list-item-group/list-item-group.scss
+++ b/packages/calcite-components/src/components/list-item-group/list-item-group.scss
@@ -23,6 +23,4 @@
   @apply shadow-none;
 }
 
-[hidden] {
-  display: none;
-}
+@include base-component();
diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
index 6a15c4a317c..be59c487b4e 100755
--- a/packages/calcite-components/src/components/list-item/list-item.scss
+++ b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -142,6 +142,4 @@ td:focus {
   @apply border-solid border-0 border-t border-color-3;
 }
 
-[hidden] {
-  display: none;
-}
+@include base-component();
diff --git a/packages/calcite-components/src/components/list/list.scss b/packages/calcite-components/src/components/list/list.scss
index 3fac143679a..0ac94efeb3f 100755
--- a/packages/calcite-components/src/components/list/list.scss
+++ b/packages/calcite-components/src/components/list/list.scss
@@ -47,3 +47,5 @@
     @apply p-0;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/loader/loader.scss b/packages/calcite-components/src/components/loader/loader.scss
index 0e2a1c2fc22..afe7707e145 100644
--- a/packages/calcite-components/src/components/loader/loader.scss
+++ b/packages/calcite-components/src/components/loader/loader.scss
@@ -226,3 +226,5 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
     transform: rotate(360deg);
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 60e6a8c70fb..6db7a85d12f 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -1,7 +1,7 @@
 :host {
   @apply flex
-  items-center 
-  relative 
+  items-center
+  relative
   box-border;
   flex-shrink: 0;
   & .container,
@@ -29,14 +29,14 @@
   items-center
   relative
   justify-center
-  cursor-pointer 
+  cursor-pointer
   outline-none
   text-0
-  text-color-2 
-  box-border 
+  text-color-2
+  box-border
   bg-foreground-1
-  px-4 
-  h-full 
+  px-4
+  h-full
   w-full;
   text-decoration: none;
   border-block-end: theme("spacing[0.5]") solid transparent;
@@ -171,3 +171,5 @@ calcite-action {
 .content:hover .hover-href-icon {
   @apply opacity-100 -end-1;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/menu/menu.scss b/packages/calcite-components/src/components/menu/menu.scss
index 32f304326ad..14a8ccea9c7 100644
--- a/packages/calcite-components/src/components/menu/menu.scss
+++ b/packages/calcite-components/src/components/menu/menu.scss
@@ -9,3 +9,5 @@ ul {
 :host([layout="vertical"]) ul {
   @apply flex flex-col w-full;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss
index ac6bcf78277..728f961665b 100644
--- a/packages/calcite-components/src/components/modal/modal.scss
+++ b/packages/calcite-components/src/components/modal/modal.scss
@@ -407,3 +407,5 @@ slot[name="primary"] {
     position: absolute;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss
index a18d0412fc8..61fd32f3460 100644
--- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss
+++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss
@@ -3,13 +3,13 @@
 }
 
 .anchor {
-  @apply flex 
-    m-0 
-    items-center 
-    justify-center 
-    cursor-pointer 
-    transition-default 
-    focus-base 
+  @apply flex
+    m-0
+    items-center
+    justify-center
+    cursor-pointer
+    transition-default
+    focus-base
     no-underline
     text-0h;
   border-block-end: 2px solid transparent;
@@ -46,17 +46,17 @@
 }
 
 .container {
-  @apply flex 
-  flex-col 
-  truncate 
-  text-start 
-  px-4 
+  @apply flex
+  flex-col
+  truncate
+  text-start
+  px-4
   mt-0.5;
 }
 
 .heading {
-  @apply text-0 
-  ms-0 
+  @apply text-0
+  ms-0
   truncate
   text-color-1
   font-medium;
@@ -70,3 +70,5 @@
   @apply text-color-2 truncate;
   font-size: var(--calcite-font-size--1);
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.scss b/packages/calcite-components/src/components/navigation-user/navigation-user.scss
index e5ec461ac9d..f87264c8387 100644
--- a/packages/calcite-components/src/components/navigation-user/navigation-user.scss
+++ b/packages/calcite-components/src/components/navigation-user/navigation-user.scss
@@ -3,12 +3,12 @@
   & .button {
     background-color: transparent;
     border: none;
-    @apply flex 
+    @apply flex
       m-0
-      items-center 
+      items-center
       justify-center
-      cursor-pointer 
-      transition-default 
+      cursor-pointer
+      transition-default
       focus-base
       font-sans
       text-0h;
@@ -43,16 +43,16 @@ calcite-avatar ~ .text-container {
 }
 
 .text-container {
-  @apply flex 
-  flex-col 
+  @apply flex
+  flex-col
   text-start
   px-4
   mt-0.5;
 }
 
 .full-name {
-  @apply text-0 
-  ms-0 
+  @apply text-0
+  ms-0
   text-color-1
   font-medium;
 }
@@ -61,3 +61,5 @@ calcite-avatar ~ .text-container {
   @apply text-color-2;
   font-size: var(--calcite-font-size--1);
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/navigation/navigation.scss b/packages/calcite-components/src/components/navigation/navigation.scss
index c3f38e04ed5..d9bdd15ae63 100644
--- a/packages/calcite-components/src/components/navigation/navigation.scss
+++ b/packages/calcite-components/src/components/navigation/navigation.scss
@@ -8,10 +8,12 @@
  * @prop --calcite-navigation-border-color: Specifies the border color of the component.
  */
 
+@include base-component();
+
 .container {
-  @apply flex 
+  @apply flex
   flex-col
-  mx-auto 
+  mx-auto
   w-full;
   margin-block: 0;
   margin-inline: auto;
@@ -46,9 +48,9 @@
 }
 
 .container-content {
-  @apply flex 
-  w-full 
-  h-full 
+  @apply flex
+  w-full
+  h-full
   mx-auto;
   margin-block: 0;
   inline-size: var(--calcite-navigation-width, 100%);
diff --git a/packages/calcite-components/src/components/notice/notice.scss b/packages/calcite-components/src/components/notice/notice.scss
index b18760c3164..634ebbd0427 100644
--- a/packages/calcite-components/src/components/notice/notice.scss
+++ b/packages/calcite-components/src/components/notice/notice.scss
@@ -177,3 +177,5 @@ $noticeKinds: "brand" var(--calcite-ui-brand), "info" var(--calcite-ui-info), "d
     }
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/option-group/option-group.scss b/packages/calcite-components/src/components/option-group/option-group.scss
index 249c71ad13c..d14014393b8 100644
--- a/packages/calcite-components/src/components/option-group/option-group.scss
+++ b/packages/calcite-components/src/components/option-group/option-group.scss
@@ -1,3 +1,5 @@
 :host {
   @apply block;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/option/option.scss b/packages/calcite-components/src/components/option/option.scss
index 249c71ad13c..d14014393b8 100644
--- a/packages/calcite-components/src/components/option/option.scss
+++ b/packages/calcite-components/src/components/option/option.scss
@@ -1,3 +1,5 @@
 :host {
   @apply block;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
index 470b76c09d6..2eb1e441255 100644
--- a/packages/calcite-components/src/components/pagination/pagination.scss
+++ b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -102,3 +102,5 @@
 .ellipsis {
   @apply text-color-3 flex items-end;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 243586dab6c..2caf6130d11 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -132,6 +132,4 @@
   inline-size: fit-content;
 }
 
-[hidden] {
-  display: none;
-}
+@include base-component();
diff --git a/packages/calcite-components/src/components/pick-list-group/pick-list-group.scss b/packages/calcite-components/src/components/pick-list-group/pick-list-group.scss
index 988bba0ab9f..d28911e31f7 100644
--- a/packages/calcite-components/src/components/pick-list-group/pick-list-group.scss
+++ b/packages/calcite-components/src/components/pick-list-group/pick-list-group.scss
@@ -27,3 +27,5 @@
 .container--indented {
   margin-inline-start: theme("margin.6");
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/pick-list-item/pick-list-item.scss b/packages/calcite-components/src/components/pick-list-item/pick-list-item.scss
index d3881fa3b13..7ce42c86523 100644
--- a/packages/calcite-components/src/components/pick-list-item/pick-list-item.scss
+++ b/packages/calcite-components/src/components/pick-list-item/pick-list-item.scss
@@ -99,3 +99,4 @@
 }
 
 @include disabled();
+@include base-component();
diff --git a/packages/calcite-components/src/components/pick-list/pick-list.scss b/packages/calcite-components/src/components/pick-list/pick-list.scss
index df68fa95cf3..17546414f85 100644
--- a/packages/calcite-components/src/components/pick-list/pick-list.scss
+++ b/packages/calcite-components/src/components/pick-list/pick-list.scss
@@ -36,3 +36,5 @@ calcite-filter {
 :host([loading][disabled]) {
   min-block-size: 2rem;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
index 2cacc3dbe1e..4a47ae21567 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -113,3 +113,5 @@
 ::slotted(calcite-flow) {
   @apply h-full;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/progress/progress.scss b/packages/calcite-components/src/components/progress/progress.scss
index f0eb686bc30..d0f974520d9 100644
--- a/packages/calcite-components/src/components/progress/progress.scss
+++ b/packages/calcite-components/src/components/progress/progress.scss
@@ -53,3 +53,5 @@
     transform: translate3d(600%, 0, 0);
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss b/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss
index b3b1bbd4761..e0bdc527bce 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.scss
@@ -17,3 +17,5 @@
 :host([layout="vertical"]) {
   @apply flex-col;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/radio-button/radio-button.scss b/packages/calcite-components/src/components/radio-button/radio-button.scss
index bcb65bc970e..2d2db9682ac 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.scss
+++ b/packages/calcite-components/src/components/radio-button/radio-button.scss
@@ -98,3 +98,4 @@
 }
 
 @include hidden-form-input();
+@include base-component();
diff --git a/packages/calcite-components/src/components/rating/rating.scss b/packages/calcite-components/src/components/rating/rating.scss
index 224ba3813f6..37b1c5ff3b9 100644
--- a/packages/calcite-components/src/components/rating/rating.scss
+++ b/packages/calcite-components/src/components/rating/rating.scss
@@ -100,3 +100,4 @@ calcite-chip {
 }
 
 @include hidden-form-input();
+@include base-component();
diff --git a/packages/calcite-components/src/components/scrim/scrim.scss b/packages/calcite-components/src/components/scrim/scrim.scss
index af93a2d764a..052028d9978 100644
--- a/packages/calcite-components/src/components/scrim/scrim.scss
+++ b/packages/calcite-components/src/components/scrim/scrim.scss
@@ -42,3 +42,5 @@
 .content {
   @apply p-4;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.scss b/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.scss
index 0d3f17336a3..df1159690dd 100644
--- a/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.scss
+++ b/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.scss
@@ -118,3 +118,5 @@
 :host([icon-end]) .label--scale-l .segmented-control-item-icon {
   margin-inline-start: theme("margin.4");
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.scss b/packages/calcite-components/src/components/segmented-control/segmented-control.scss
index c9b3f39af84..f3234b02f98 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.scss
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.scss
@@ -30,3 +30,4 @@
 }
 
 @include hidden-form-input();
+@include base-component();
diff --git a/packages/calcite-components/src/components/select/select.scss b/packages/calcite-components/src/components/select/select.scss
index c39d5af545a..2eff717603c 100644
--- a/packages/calcite-components/src/components/select/select.scss
+++ b/packages/calcite-components/src/components/select/select.scss
@@ -110,3 +110,4 @@ select:disabled {
 }
 
 @include hidden-form-input();
+@include base-component();
diff --git a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
index 81627ecc112..a7f22f5c530 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.scss
@@ -61,3 +61,5 @@
   border-inline-end: theme("borderWidth.DEFAULT") solid;
   @apply border-color-3;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.scss b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
index 345da4f5e54..a5d4809e82c 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
@@ -315,3 +315,5 @@ slot[name="action-bar"]::slotted(calcite-action-bar),
   border-inline: 0;
   border-block-end: 0;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/shell/shell.scss b/packages/calcite-components/src/components/shell/shell.scss
index e7d6df1ba9b..eeca93a1f23 100755
--- a/packages/calcite-components/src/components/shell/shell.scss
+++ b/packages/calcite-components/src/components/shell/shell.scss
@@ -120,3 +120,5 @@ slot[name="panel-top"]::slotted(calcite-shell-center-row) {
   pointer-events: none;
   inset: 0;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/slider/slider.scss b/packages/calcite-components/src/components/slider/slider.scss
index 2c9dcc88242..92654ad49e2 100644
--- a/packages/calcite-components/src/components/slider/slider.scss
+++ b/packages/calcite-components/src/components/slider/slider.scss
@@ -372,3 +372,4 @@
 }
 
 @include hidden-form-input();
+@include base-component();
diff --git a/packages/calcite-components/src/components/sortable-list/sortable-list.scss b/packages/calcite-components/src/components/sortable-list/sortable-list.scss
index eb852e1694d..ce9238e1df8 100644
--- a/packages/calcite-components/src/components/sortable-list/sortable-list.scss
+++ b/packages/calcite-components/src/components/sortable-list/sortable-list.scss
@@ -15,3 +15,5 @@
 .container--horizontal {
   @apply flex-row;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/split-button/split-button.scss b/packages/calcite-components/src/components/split-button/split-button.scss
index 9001b207a29..e9000a0dfa2 100644
--- a/packages/calcite-components/src/components/split-button/split-button.scss
+++ b/packages/calcite-components/src/components/split-button/split-button.scss
@@ -132,3 +132,5 @@
     @apply pointer-events-none;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/stack/stack.scss b/packages/calcite-components/src/components/stack/stack.scss
index 8558e353c53..32920d59adf 100644
--- a/packages/calcite-components/src/components/stack/stack.scss
+++ b/packages/calcite-components/src/components/stack/stack.scss
@@ -70,6 +70,4 @@
   }
 }
 
-[hidden] {
-  display: none;
-}
+@include base-component();
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
index 1e152ca04e7..6f97b9235f7 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.scss
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -347,3 +347,5 @@
     border-color: highlight;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index f8a2fc3911f..0ac9c6536b0 100644
--- a/packages/calcite-components/src/components/stepper/stepper.scss
+++ b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -21,3 +21,5 @@
     "items"
     "content";
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/switch/switch.scss b/packages/calcite-components/src/components/switch/switch.scss
index 301385efba1..a45fe50433b 100644
--- a/packages/calcite-components/src/components/switch/switch.scss
+++ b/packages/calcite-components/src/components/switch/switch.scss
@@ -125,3 +125,4 @@
 }
 
 @include hidden-form-input();
+@include base-component();
diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.scss b/packages/calcite-components/src/components/tab-nav/tab-nav.scss
index 3d0c64458c6..b5d60b51fcb 100644
--- a/packages/calcite-components/src/components/tab-nav/tab-nav.scss
+++ b/packages/calcite-components/src/components/tab-nav/tab-nav.scss
@@ -69,3 +69,5 @@
     background-color: highlight;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss
index 8968cad64d0..275cce426ea 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.scss
+++ b/packages/calcite-components/src/components/tab-title/tab-title.scss
@@ -298,3 +298,5 @@
     @apply z-default;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/tab/tab.scss b/packages/calcite-components/src/components/tab/tab.scss
index fd3b3980f51..a7236a5114a 100644
--- a/packages/calcite-components/src/components/tab/tab.scss
+++ b/packages/calcite-components/src/components/tab/tab.scss
@@ -30,3 +30,5 @@ section,
   @apply text-0h;
   padding-block: 13px;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/tabs/tabs.scss b/packages/calcite-components/src/components/tabs/tabs.scss
index d857ca24857..8a64e20321d 100644
--- a/packages/calcite-components/src/components/tabs/tabs.scss
+++ b/packages/calcite-components/src/components/tabs/tabs.scss
@@ -65,3 +65,5 @@ section {
       border-b-0;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss
index 2f766a1f5a2..a7c12ad62c4 100644
--- a/packages/calcite-components/src/components/text-area/text-area.scss
+++ b/packages/calcite-components/src/components/text-area/text-area.scss
@@ -1,17 +1,17 @@
 :host {
   @apply inline-block
   relative
-  w-full 
+  w-full
   h-full;
 }
 
 textarea {
-  @apply text-color-1 
-  relative 
+  @apply text-color-1
+  relative
   block
-  bg-foreground-1 
+  bg-foreground-1
   box-border
-  border-color-input  
+  border-color-input
   border
   font-sans
   w-full
@@ -25,9 +25,9 @@ textarea {
     @apply focus-inset;
   }
   &.text-area--invalid {
-    @apply border-color-danger 
-    border 
-    border-solid 
+    @apply border-color-danger
+    border
+    border-solid
     border-b;
     &:focus {
       @apply focus-inset-danger;
@@ -39,8 +39,8 @@ textarea {
 }
 
 .footer {
-  @apply flex 
-  bg-foreground-1 
+  @apply flex
+  bg-foreground-1
   box-border
   border-color-input
   border
@@ -50,16 +50,16 @@ textarea {
 }
 
 .character-limit {
-  @apply flex 
-  justify-end 
-  text-color-2 
+  @apply flex
+  justify-end
+  text-color-2
   items-center
-  font-normal 
+  font-normal
   whitespace-nowrap;
 }
 
 .character--over-limit {
-  @apply font-bold 
+  @apply font-bold
   text-danger;
 }
 
@@ -78,12 +78,12 @@ textarea {
 :host([scale="s"]) {
   @apply text-n2;
   .footer {
-    @apply py-1 
+    @apply py-1
     px-2;
     min-block-size: 1.75rem;
   }
   textarea {
-    @apply py-1 
+    @apply py-1
     px-2;
   }
 }
@@ -92,18 +92,18 @@ textarea {
   textarea,
   .footer,
   .character-limit {
-    @apply text-n2 
+    @apply text-n2
     pl-2;
   }
 }
 
 :host([scale="m"]) {
   textarea {
-    @apply py-2 
+    @apply py-2
     px-3;
   }
   .footer {
-    @apply py-2 
+    @apply py-2
     px-3;
     min-block-size: 2.25rem;
   }
@@ -113,7 +113,7 @@ textarea {
   textarea,
   .footer,
   .character-limit {
-    @apply text-n1 
+    @apply text-n1
     pl-3;
   }
 }
@@ -121,11 +121,11 @@ textarea {
 :host([scale="l"]) {
   @apply text-0;
   textarea {
-    @apply py-3 
+    @apply py-3
     px-4;
   }
   .footer {
-    @apply py-3 
+    @apply py-3
     px-4;
     min-block-size: 2.75rem;
   }
@@ -135,7 +135,7 @@ textarea {
   textarea,
   .footer,
   .character-limit {
-    @apply text-0 
+    @apply text-0
     pl-4;
   }
 }
@@ -168,7 +168,7 @@ textarea.block-size--full {
 }
 
 .container {
-  @apply flex 
+  @apply flex
   justify-between
   w-full;
 }
@@ -179,3 +179,4 @@ textarea.block-size--full {
 
 @include hidden-form-input();
 @include disabled();
+@include base-component();
diff --git a/packages/calcite-components/src/components/tile-select-group/tile-select-group.scss b/packages/calcite-components/src/components/tile-select-group/tile-select-group.scss
index 577bd668b82..a33f7edc2c4 100644
--- a/packages/calcite-components/src/components/tile-select-group/tile-select-group.scss
+++ b/packages/calcite-components/src/components/tile-select-group/tile-select-group.scss
@@ -11,3 +11,4 @@
 }
 
 @include disabled();
+@include base-component();
diff --git a/packages/calcite-components/src/components/tile-select/tile-select.scss b/packages/calcite-components/src/components/tile-select/tile-select.scss
index e10545a72f4..7d298cdfa13 100644
--- a/packages/calcite-components/src/components/tile-select/tile-select.scss
+++ b/packages/calcite-components/src/components/tile-select/tile-select.scss
@@ -129,3 +129,4 @@ $spacing: $baseline * 0.5;
 }
 
 @include disabled();
+@include base-component();
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 7fd0db0d4e8..c50c0e01eec 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -118,3 +118,5 @@
     @apply text-color-2;
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/time-picker/time-picker.scss b/packages/calcite-components/src/components/time-picker/time-picker.scss
index 0480ac30849..141ab342389 100644
--- a/packages/calcite-components/src/components/time-picker/time-picker.scss
+++ b/packages/calcite-components/src/components/time-picker/time-picker.scss
@@ -117,3 +117,5 @@
     }
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/tip-group/tip-group.scss b/packages/calcite-components/src/components/tip-group/tip-group.scss
index b1db4ee6c2f..079190c1613 100644
--- a/packages/calcite-components/src/components/tip-group/tip-group.scss
+++ b/packages/calcite-components/src/components/tip-group/tip-group.scss
@@ -10,3 +10,5 @@
   @apply m-0 border-none;
   max-inline-size: var(--calcite-tip-max-width);
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/tip-manager/tip-manager.scss b/packages/calcite-components/src/components/tip-manager/tip-manager.scss
index 488e8108a62..aaeb6652eaa 100644
--- a/packages/calcite-components/src/components/tip-manager/tip-manager.scss
+++ b/packages/calcite-components/src/components/tip-manager/tip-manager.scss
@@ -119,3 +119,5 @@
     transform: translate3d(0, 0, 0) scale(1);
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/tip/tip.scss b/packages/calcite-components/src/components/tip/tip.scss
index afaf4451695..e8f7d7f344f 100644
--- a/packages/calcite-components/src/components/tip/tip.scss
+++ b/packages/calcite-components/src/components/tip/tip.scss
@@ -77,3 +77,5 @@
 ::slotted(img) {
   @apply max-w-full;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.scss b/packages/calcite-components/src/components/tooltip/tooltip.scss
index 2ca0c482713..231052459f3 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.scss
+++ b/packages/calcite-components/src/components/tooltip/tooltip.scss
@@ -38,3 +38,5 @@
 .arrow::before {
   outline: 1px solid var(--calcite-ui-border-3);
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.scss b/packages/calcite-components/src/components/tree-item/tree-item.scss
index 89011af4006..d33d887490d 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.scss
+++ b/packages/calcite-components/src/components/tree-item/tree-item.scss
@@ -5,10 +5,6 @@
     cursor-pointer;
 }
 
-[hidden] {
-  @apply hidden;
-}
-
 .node-actions-container {
   @apply flex justify-between;
 }
@@ -256,3 +252,5 @@
     color: var(--calcite-ui-brand);
   }
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/tree/tree.scss b/packages/calcite-components/src/components/tree/tree.scss
index 8ff98f1c5cf..8bdfd656962 100644
--- a/packages/calcite-components/src/components/tree/tree.scss
+++ b/packages/calcite-components/src/components/tree/tree.scss
@@ -5,3 +5,5 @@
 :host(:focus) {
   @apply outline-none;
 }
+
+@include base-component();
diff --git a/packages/calcite-components/src/components/value-list-item/value-list-item.scss b/packages/calcite-components/src/components/value-list-item/value-list-item.scss
index 6c95694a70b..5befa3109d2 100644
--- a/packages/calcite-components/src/components/value-list-item/value-list-item.scss
+++ b/packages/calcite-components/src/components/value-list-item/value-list-item.scss
@@ -50,3 +50,4 @@ calcite-pick-list-item {
 }
 
 @include disabled();
+@include base-component();
diff --git a/packages/calcite-components/src/components/value-list/value-list.scss b/packages/calcite-components/src/components/value-list/value-list.scss
index 6d3f5875fed..8869fd13fbf 100644
--- a/packages/calcite-components/src/components/value-list/value-list.scss
+++ b/packages/calcite-components/src/components/value-list/value-list.scss
@@ -39,3 +39,5 @@ calcite-filter {
 .assistive-text {
   @apply sr-only;
 }
+
+@include base-component();