fix: remove style modifying all host components with hidden attribute

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 {

packages/calcite-components/src/components/accordion-item/accordion-item.scss

@@ -213,3 +213,5 @@
     }
   }
 }
+
+@include base-component();

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

packages/calcite-components/src/components/action-bar/action-bar.scss

@@ -61,3 +61,5 @@
 .action-group--bottom {
   @apply justify-end;
 }
+
+@include base-component();

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

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

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

packages/calcite-components/src/components/action/action.scss

@@ -239,3 +239,5 @@
 .indicator-text {
   @apply sr-only;
 }
+
+@include base-component();

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

packages/calcite-components/src/components/avatar/avatar.scss

@@ -29,3 +29,5 @@
 .thumbnail {
   @apply rounded-half h-full w-full;
 }
+
+@include base-component();

packages/calcite-components/src/components/block-section/block-section.scss

@@ -81,3 +81,5 @@
 .status-icon.invalid {
   color: theme("colors.danger");
 }
+
+@include base-component();

packages/calcite-components/src/components/block/block.scss

@@ -160,3 +160,5 @@ calcite-action-menu {
     @apply text-color-1;
   }
 }
+
+@include base-component();

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

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

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

packages/calcite-components/src/components/chip-group/chip-group.scss

@@ -22,3 +22,4 @@
 }
 
 @include disabled();
+@include base-component();

packages/calcite-components/src/components/chip/chip.scss

@@ -302,3 +302,4 @@ slot[name="image"]::slotted(*) {
 }
 
 @include disabled();
+@include base-component();

packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss

@@ -31,3 +31,5 @@
     inline-size: 88px;
   }
 }
+
+@include base-component();

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

packages/calcite-components/src/components/color-picker/color-picker.scss

@@ -189,3 +189,5 @@
     outline-offset: 2px;
   }
 }
+
+@include base-component();

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

packages/calcite-components/src/components/combobox/combobox.scss

@@ -208,3 +208,4 @@
 }
 
 @include hidden-form-input();
+@include base-component();

packages/calcite-components/src/components/date-picker-day/date-picker-day.scss

@@ -488,3 +488,5 @@
     }
   }
 }
+
+@include base-component();

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

packages/calcite-components/src/components/date-picker-month/date-picker-month.scss

@@ -1,3 +1,5 @@
+@include base-component();
+
 .calendar {
   @apply mb-1;
 }

packages/calcite-components/src/components/date-picker/date-picker.scss

@@ -23,3 +23,5 @@
 :host([scale="l"]) {
   max-inline-size: 398px;
 }
+
+@include base-component();

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

packages/calcite-components/src/components/dropdown-item/dropdown-item.scss

@@ -217,3 +217,5 @@
     margin-inline-start: theme("margin.4");
   }
 }
+
+@include base-component();

packages/calcite-components/src/components/dropdown/dropdown.scss

@@ -53,3 +53,5 @@
 :host([width="l"]) {
   --calcite-dropdown-width: theme("spacing.64");
 }
+
+@include base-component();

packages/calcite-components/src/components/fab/fab.scss

@@ -13,3 +13,5 @@ calcite-button {
     @apply shadow-2-sm;
   }
 }
+
+@include base-component();

packages/calcite-components/src/components/filter/filter.scss

@@ -69,3 +69,5 @@ input[type="text"]:focus {
     @apply text-color-1;
   }
 }
+
+@include base-component();

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

packages/calcite-components/src/components/flow/flow.scss

@@ -60,3 +60,5 @@
     }
   }
 }
+
+@include base-component();

packages/calcite-components/src/components/graph/graph.scss

@@ -13,3 +13,5 @@
     @apply opacity-50;
   }
 }
+
+@include base-component();

packages/calcite-components/src/components/handle/handle.scss

@@ -28,3 +28,5 @@
     color: inherit;
   }
 }
+
+@include base-component();

packages/calcite-components/src/components/icon/icon.scss

@@ -35,3 +35,5 @@
 .svg {
   @apply block;
 }
+
+@include base-component();

packages/calcite-components/src/components/inline-editable/inline-editable.scss

@@ -49,3 +49,5 @@
     @apply border-color-2;
   }
 }
+
+@include base-component();

packages/calcite-components/src/components/input-date-picker/input-date-picker.scss

@@ -157,3 +157,5 @@
 .assistive-text {
   @apply sr-only;
 }
+
+@include base-component();

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

packages/calcite-components/src/components/input-number/input-number.scss

@@ -411,3 +411,4 @@
 }
 
 @include hidden-form-input();
+@include base-component();

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

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

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

packages/calcite-components/src/components/label/label.scss

@@ -87,3 +87,5 @@
     @apply bg-opacity-0;
   }
 }
+
+@include base-component();

packages/calcite-components/src/components/link/link.scss

@@ -86,3 +86,4 @@ calcite-icon {
 }
 
 @include disabled();
+@include base-component();

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

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

packages/calcite-components/src/components/list/list.scss

@@ -47,3 +47,5 @@
     @apply p-0;
   }
 }
+
+@include base-component();

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

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

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

packages/calcite-components/src/components/modal/modal.scss

@@ -407,3 +407,5 @@ slot[name="primary"] {
     position: absolute;
   }
 }
+
+@include base-component();