From 3103e2f4f507fba8cf895938a7beae7675fdbc2f Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 24 Jul 2023 14:52:52 -0700
Subject: [PATCH] fix: remove style modifying all host components with hidden
 attribute (#7346)

**Related Issue:** #7325

## Summary

- Removes style modifying all host components with hidden attribute.
This is modifying components outside of calcite and applying host styles
outside of the host. Host styles should have no effect outside of a
shadow DOM. https://developer.mozilla.org/en-US/docs/Web/CSS/:host
- Adds includes mixin for common component internal styles such as
hidden attribute styling
- Includes mixin in every component file.
---
 .../src/assets/styles/includes.scss           | 14 +++--
 .../accordion-item/accordion-item.scss        |  2 +
 .../src/components/accordion/accordion.scss   |  2 +
 .../src/components/action-bar/action-bar.scss |  2 +
 .../components/action-group/action-group.scss |  2 +
 .../components/action-menu/action-menu.scss   |  2 +
 .../src/components/action-pad/action-pad.scss |  2 +
 .../src/components/action/action.scss         |  2 +
 .../src/components/alert/alert.scss           |  6 +--
 .../src/components/avatar/avatar.scss         |  2 +
 .../block-section/block-section.scss          |  2 +
 .../src/components/block/block.scss           |  2 +
 .../src/components/button/button.scss         |  2 +
 .../src/components/card/card.scss             |  2 +
 .../src/components/checkbox/checkbox.scss     |  2 +
 .../src/components/chip-group/chip-group.scss |  1 +
 .../src/components/chip/chip.scss             |  1 +
 .../color-picker-hex-input.scss               |  2 +
 .../color-picker-swatch.scss                  |  2 +
 .../components/color-picker/color-picker.scss |  2 +
 .../combobox-item/combobox-item.scss          |  2 +
 .../src/components/combobox/combobox.scss     |  1 +
 .../date-picker-day/date-picker-day.scss      |  2 +
 .../date-picker-month-header.scss             |  4 +-
 .../date-picker-month/date-picker-month.scss  |  2 +
 .../components/date-picker/date-picker.scss   |  2 +
 .../dropdown-group/dropdown-group.scss        |  2 +
 .../dropdown-item/dropdown-item.scss          |  2 +
 .../src/components/dropdown/dropdown.scss     |  2 +
 .../src/components/fab/fab.scss               |  2 +
 .../src/components/filter/filter.scss         |  2 +
 .../src/components/flow-item/flow-item.scss   |  2 +
 .../src/components/flow/flow.scss             |  2 +
 .../src/components/graph/graph.scss           |  2 +
 .../src/components/handle/handle.scss         |  2 +
 .../src/components/icon/icon.scss             |  2 +
 .../inline-editable/inline-editable.scss      |  2 +
 .../input-date-picker/input-date-picker.scss  |  2 +
 .../input-message/input-message.scss          |  2 +
 .../components/input-number/input-number.scss |  1 +
 .../src/components/input-text/input-text.scss |  1 +
 .../input-time-picker/input-time-picker.scss  |  2 +
 .../src/components/input/input.scss           |  1 +
 .../src/components/label/label.scss           |  2 +
 .../src/components/link/link.scss             |  1 +
 .../list-item-group/list-item-group.scss      |  4 +-
 .../src/components/list-item/list-item.scss   |  4 +-
 .../src/components/list/list.scss             |  2 +
 .../src/components/loader/loader.scss         |  2 +
 .../src/components/menu-item/menu-item.scss   | 16 +++---
 .../src/components/menu/menu.scss             |  2 +
 .../src/components/modal/modal.scss           |  2 +
 .../navigation-logo/navigation-logo.scss      | 30 ++++++-----
 .../navigation-user/navigation-user.scss      | 18 ++++---
 .../src/components/navigation/navigation.scss | 12 +++--
 .../src/components/notice/notice.scss         |  2 +
 .../components/option-group/option-group.scss |  2 +
 .../src/components/option/option.scss         |  2 +
 .../src/components/pagination/pagination.scss |  2 +
 .../src/components/panel/panel.scss           |  4 +-
 .../pick-list-group/pick-list-group.scss      |  2 +
 .../pick-list-item/pick-list-item.scss        |  1 +
 .../src/components/pick-list/pick-list.scss   |  2 +
 .../src/components/popover/popover.scss       |  2 +
 .../src/components/progress/progress.scss     |  2 +
 .../radio-button-group.scss                   |  2 +
 .../components/radio-button/radio-button.scss |  1 +
 .../src/components/rating/rating.scss         |  1 +
 .../src/components/scrim/scrim.scss           |  2 +
 .../segmented-control-item.scss               |  2 +
 .../segmented-control/segmented-control.scss  |  1 +
 .../src/components/select/select.scss         |  1 +
 .../shell-center-row/shell-center-row.scss    |  2 +
 .../components/shell-panel/shell-panel.scss   |  2 +
 .../src/components/shell/shell.scss           |  2 +
 .../src/components/slider/slider.scss         |  1 +
 .../sortable-list/sortable-list.scss          |  2 +
 .../components/split-button/split-button.scss |  2 +
 .../src/components/stack/stack.scss           |  4 +-
 .../components/stepper-item/stepper-item.scss |  2 +
 .../src/components/stepper/stepper.scss       |  2 +
 .../src/components/switch/switch.scss         |  1 +
 .../src/components/tab-nav/tab-nav.scss       |  2 +
 .../src/components/tab-title/tab-title.scss   |  2 +
 .../src/components/tab/tab.scss               |  2 +
 .../src/components/tabs/tabs.scss             |  2 +
 .../src/components/text-area/text-area.scss   | 51 ++++++++++---------
 .../tile-select-group/tile-select-group.scss  |  1 +
 .../components/tile-select/tile-select.scss   |  1 +
 .../src/components/tile/tile.scss             |  2 +
 .../components/time-picker/time-picker.scss   |  2 +
 .../src/components/tip-group/tip-group.scss   |  2 +
 .../components/tip-manager/tip-manager.scss   |  2 +
 .../src/components/tip/tip.scss               |  2 +
 .../src/components/tooltip/tooltip.scss       |  2 +
 .../src/components/tree-item/tree-item.scss   |  6 +--
 .../src/components/tree/tree.scss             |  2 +
 .../value-list-item/value-list-item.scss      |  1 +
 .../src/components/value-list/value-list.scss |  2 +
 99 files changed, 244 insertions(+), 84 deletions(-)

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();