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.

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