feat: ensure global hidden attribute is honored for all components

src/assets/styles/includes.scss

@@ -16,7 +16,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 @mixin word-break() {

src/components/accordion-item/accordion-item.e2e.ts

@@ -1,8 +1,9 @@
-import { accessible, renders, slots } from "../../tests/commonTests";
+import { accessible, renders, slots, hidden } from "../../tests/commonTests";
 import { SLOTS } from "./resources";
 
 describe("calcite-accordion-item", () => {
   it("renders", async () => renders("calcite-accordion-item", { display: "flex" }));
+  it("honors hidden attribute", async () => hidden("calcite-accordion-item"));
   it("is accessible", async () => accessible(`<calcite-accordion-item heading="My Heading"></calcite-accordion-item>`));
   it("has slots", () => slots("calcite-accordion-item", SLOTS));
 });

src/components/accordion/accordion.e2e.ts

@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders } from "../../tests/commonTests";
+import { accessible, renders, hidden } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS } from "../accordion-item/resources";
 
@@ -15,6 +15,8 @@ describe("calcite-accordion", () => {
   `;
   it("renders", async () => renders("calcite-accordion", { display: "block" }));
 
+  it("honors hidden attribute", async () => hidden("calcite-accordion"));
+
   it("is accessible", async () => accessible(`<calcite-accordion>${accordionContent}</calcite-accordion>`));
 
   it("renders default props when none are provided", async () => {

src/components/alert/alert.e2e.ts

@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { renders, accessible, HYDRATED_ATTR } from "../../tests/commonTests";
+import { renders, accessible, HYDRATED_ATTR, hidden } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 
@@ -12,6 +12,8 @@ describe("calcite-alert", () => {
 
   it("renders", async () => renders("calcite-alert", { visible: false, display: "block" }));
 
+  it("honors hidden attribute", async () => hidden(`<calcite-alert open></calcite-alert>`));
+
   it("is accessible", async () =>
     accessible(`
     <calcite-alert open label="test">

src/components/button/button.e2e.ts

@@ -1,5 +1,5 @@
 import { E2EElement, newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, HYDRATED_ATTR, labelable, defaults } from "../../tests/commonTests";
+import { accessible, disabled, HYDRATED_ATTR, labelable, defaults, hidden } from "../../tests/commonTests";
 import { CSS } from "./resources";
 import { GlobalTestProps } from "../../tests/utils";
 import { html } from "../../../support/formatting";
@@ -89,6 +89,8 @@ describe("calcite-button", () => {
       }
     ]));
 
+  it("honors hidden attribute", async () => hidden("calcite-button"));
+
   it("renders as a button with default props", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-button>Continue</calcite-button>`);

src/components/card/card.e2e.ts

@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders, slots } from "../../tests/commonTests";
+import { accessible, renders, slots, hidden } from "../../tests/commonTests";
 import { placeholderImage } from "../../../.storybook/utils";
 import { CSS, SLOTS } from "./resources";
 const placeholder = placeholderImage({
@@ -10,6 +10,8 @@ const placeholder = placeholderImage({
 describe("calcite-card", () => {
   it("renders", async () => renders("calcite-card", { display: "block" }));
 
+  it("honors hidden attribute", async () => hidden("calcite-card"));
+
   it("is accessible", async () => accessible("calcite-card"));
 
   it("is accessible when selectable", async () =>

src/components/checkbox/checkbox.e2e.ts

@@ -1,7 +1,17 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, focusable, formAssociated, HYDRATED_ATTR, labelable } from "../../tests/commonTests";
+import {
+  accessible,
+  disabled,
+  focusable,
+  formAssociated,
+  HYDRATED_ATTR,
+  labelable,
+  hidden
+} from "../../tests/commonTests";
 
 describe("calcite-checkbox", () => {
+  it("honors hidden attribute", async () => hidden("calcite-checkbox"));
+
   it("is accessible", async () =>
     accessible(
       `<calcite-label><calcite-checkbox id="example" name="example" value="one"></calcite-checkbox> label</calcite-label>`

src/components/chip/chip.e2e.ts

@@ -1,11 +1,13 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders, slots } from "../../tests/commonTests";
+import { accessible, renders, slots, hidden } from "../../tests/commonTests";
 
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-chip", () => {
   it("renders", async () => renders("<calcite-chip>doritos</calcite-chip>", { display: "inline-flex" }));
 
+  it("honors hidden attribute", async () => hidden("calcite-chip"));
+
   it("is accessible", async () => accessible(`<calcite-chip>doritos</calcite-chip>`));
 
   it("has slots", () => slots("calcite-chip", SLOTS));

src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts

@@ -1,5 +1,5 @@
 import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, reflects, renders } from "../../tests/commonTests";
+import { accessible, defaults, focusable, reflects, renders, hidden } from "../../tests/commonTests";
 import { isValidHex, normalizeHex } from "../color-picker/utils";
 import { CSS } from "./resources";
 import { TEXT } from "../color-picker/resources";
@@ -8,6 +8,8 @@ import { selectText } from "../../tests/utils";
 describe("calcite-color-picker-hex-input", () => {
   it("renders", () => renders("calcite-color-picker-hex-input", { display: "block" }));
 
+  it("honors hidden attribute", async () => hidden("calcite-color-picker-hex-input"));
+
   it("is accessible", async () => {
     await accessible("calcite-color-picker-hex-input");
     await accessible("<calcite-color-picker-hex-input color='#c0ffee'></calcite-color-picker-hex-input>");

src/components/color-picker-swatch/color-picker-swatch.e2e.ts

@@ -1,10 +1,12 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { CSS } from "./resources";
-import { accessible, defaults, reflects, renders } from "../../tests/commonTests";
+import { accessible, defaults, reflects, renders, hidden } from "../../tests/commonTests";
 
 describe("calcite-color-picker-swatch", () => {
   it("renders", () => renders("calcite-color-picker-swatch", { display: "inline-flex" }));
 
+  it("honors hidden attribute", async () => hidden("calcite-color-picker-swatch"));
+
   it("is accessible", async () => {
     await accessible("calcite-color-picker-swatch");
     await accessible(`<calcite-color-picker-swatch active></calcite-color-picker-swatch>`);

src/components/dropdown-group/dropdown-group.e2e.ts

@@ -1,5 +1,7 @@
-import { renders } from "../../tests/commonTests";
+import { renders, hidden } from "../../tests/commonTests";
 
 describe("calcite-dropdown-group", () => {
   it("renders", () => renders("calcite-dropdown-group", { display: "block" }));
+
+  it("honors hidden attribute", async () => hidden("calcite-dropdown-group"));
 });

src/components/dropdown-item/dropdown-item.e2e.ts

@@ -1,7 +1,9 @@
-import { focusable, renders } from "../../tests/commonTests";
+import { focusable, renders, hidden } from "../../tests/commonTests";
 
 describe("calcite-dropdown-item", () => {
   it("renders", () => renders("calcite-dropdown-item", { display: "flex" }));
 
+  it("honors hidden attribute", async () => hidden("calcite-dropdown-item"));
+
   it("can be focused", async () => focusable(`calcite-dropdown-item`));
 });

src/components/dropdown/dropdown.e2e.ts

@@ -1,5 +1,5 @@
 import { E2EPage, EventSpy, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, disabled, floatingUIOwner, renders } from "../../tests/commonTests";
+import { accessible, defaults, disabled, floatingUIOwner, renders, hidden } from "../../tests/commonTests";
 import dedent from "dedent";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -20,6 +20,8 @@ describe("calcite-dropdown", () => {
       { display: "inline-flex" }
     ));
 
+  it("honors hidden attribute", async () => hidden("calcite-dropdown"));
+
   it("defaults", async () =>
     defaults("calcite-dropdown", [
       {

src/components/graph/graph.e2e.ts

@@ -1,9 +1,11 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, renders } from "../../tests/commonTests";
+import { accessible, defaults, renders, hidden } from "../../tests/commonTests";
 
 describe("calcite-graph", () => {
   it("renders", async () => renders(`<calcite-graph></calcite-graph>`, { display: "block" }));
 
+  it("honors hidden attribute", async () => hidden("calcite-graph"));
+
   it("is accessible", async () => accessible(`<calcite-graph></calcite-graph>`));
 
   it("is accessible: with data", async () => {

src/components/icon/icon.e2e.ts

@@ -1,9 +1,11 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, reflects, renders } from "../../tests/commonTests";
+import { accessible, defaults, reflects, renders, hidden } from "../../tests/commonTests";
 import { CSS } from "./resources";
 import { scaleToPx } from "./utils";
 
 describe("calcite-icon", () => {
+  it("honors hidden attribute", async () => hidden("calcite-icon"));
+
   it("has defaults", async () =>
     defaults("calcite-icon", [
       { propertyName: "flipRtl", defaultValue: false },

src/components/inline-editable/inline-editable.e2e.ts

@@ -1,4 +1,4 @@
-import { accessible, disabled, labelable, renders } from "../../tests/commonTests";
+import { accessible, disabled, labelable, renders, hidden } from "../../tests/commonTests";
 import { E2EPage } from "@stencil/core/testing";
 import { newE2EPage } from "@stencil/core/testing";
 import { CSS } from "./resources";
@@ -15,6 +15,8 @@ describe("calcite-inline-editable", () => {
       { display: "block" }
     ));
 
+  it("honors hidden attribute", async () => hidden("calcite-inline-editable"));
+
   it("can be disabled", () =>
     disabled(
       html`

src/components/input-date-picker/input-date-picker.e2e.ts

@@ -1,5 +1,13 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { defaults, disabled, formAssociated, labelable, floatingUIOwner, renders } from "../../tests/commonTests";
+import {
+  defaults,
+  disabled,
+  formAssociated,
+  labelable,
+  floatingUIOwner,
+  renders,
+  hidden
+} from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 
@@ -8,6 +16,8 @@ const animationDurationInMs = 200;
 describe("calcite-input-date-picker", () => {
   it("renders", async () => renders("calcite-input-date-picker", { display: "inline-block" }));
 
+  it("honors hidden attribute", async () => hidden("calcite-input-date-picker"));
+
   it("defaults", async () =>
     defaults("calcite-input-date-picker", [
       {

src/components/input-message/input-message.e2e.ts

@@ -1,10 +1,12 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders } from "../../tests/commonTests";
+import { accessible, renders, hidden } from "../../tests/commonTests";
 import { StatusIconDefaults } from "./interfaces";
 
 describe("calcite-input-message", () => {
   it("renders", async () => renders("calcite-input-message", { visible: false, display: "flex" }));
 
+  it("honors hidden attribute", async () => hidden(`<calcite-input-message active>Text</calcite-input-message>`));
+
   it("is accessible", async () => accessible(`<calcite-input-message>Text</calcite-input-message>`));
   it("is accessible with icon", async () => accessible(`<calcite-input-message icon>Text</calcite-input-message>`));
 

src/components/input-number/input-number.e2e.ts

@@ -1,5 +1,14 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { defaults, disabled, focusable, formAssociated, labelable, reflects, renders } from "../../tests/commonTests";
+import {
+  defaults,
+  disabled,
+  focusable,
+  formAssociated,
+  labelable,
+  reflects,
+  renders,
+  hidden
+} from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { letterKeys, numberKeys } from "../../utils/key";
 import { getDecimalSeparator, locales, localizeNumberString } from "../../utils/locale";
@@ -23,6 +32,8 @@ describe("calcite-input-number", () => {
 
   it("renders", () => renders("calcite-input-number", { display: "block" }));
 
+  it("honors hidden attribute", async () => hidden("calcite-input-number"));
+
   it("reflects", async () =>
     reflects("calcite-input-number", [
       {

src/components/input-text/input-text.e2e.ts

@@ -1,5 +1,14 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { defaults, disabled, focusable, formAssociated, labelable, reflects, renders } from "../../tests/commonTests";
+import {
+  defaults,
+  disabled,
+  focusable,
+  formAssociated,
+  labelable,
+  reflects,
+  renders,
+  hidden
+} from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { TEXT } from "./resources";
 
@@ -8,6 +17,8 @@ describe("calcite-input-text", () => {
 
   it("renders", () => renders("calcite-input-text", { display: "block" }));
 
+  it("honors hidden attribute", async () => hidden("calcite-input-text"));
+
   it("reflects", async () =>
     reflects("calcite-input-text", [
       {

src/components/input-time-picker/input-time-picker.e2e.ts

@@ -8,12 +8,15 @@ import {
   formAssociated,
   labelable,
   reflects,
-  renders
+  renders,
+  hidden
 } from "../../tests/commonTests";
 
 describe("calcite-input-time-picker", () => {
   it("renders", async () => renders("calcite-input-time-picker", { display: "inline-block" }));
 
+  it("honors hidden attribute", async () => hidden("calcite-input-time-picker"));
+
   it("is accessible", async () =>
     accessible(`
     <calcite-label>

src/components/input/input.e2e.ts

@@ -1,5 +1,14 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { defaults, disabled, focusable, formAssociated, labelable, reflects, renders } from "../../tests/commonTests";
+import {
+  defaults,
+  disabled,
+  focusable,
+  formAssociated,
+  labelable,
+  reflects,
+  renders,
+  hidden
+} from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { letterKeys, numberKeys } from "../../utils/key";
 import { getDecimalSeparator, locales, localizeNumberString } from "../../utils/locale";
@@ -24,6 +33,8 @@ describe("calcite-input", () => {
 
   it("renders", () => renders("calcite-input", { display: "block" }));
 
+  it("honors hidden attribute", async () => hidden("calcite-input"));
+
   it("reflects", async () =>
     reflects("calcite-input", [
       {

src/components/label/label.e2e.ts

@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { renders } from "../../tests/commonTests";
+import { renders, hidden } from "../../tests/commonTests";
 
 describe("calcite-label", () => {
   it("renders", () => renders("calcite-label", { display: "inline" }));
@@ -31,6 +31,8 @@ describe("calcite-label", () => {
     expect(element).toEqualAttribute("layout", "inline-space-between");
   });
 
+  it("honors hidden attribute", async () => hidden("calcite-label"));
+
   describe("alignment prop", () => {
     let page;
     let element;

src/components/link/link.e2e.ts

@@ -1,9 +1,11 @@
 import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, disabled, renders } from "../../tests/commonTests";
+import { accessible, defaults, disabled, renders, hidden } from "../../tests/commonTests";
 
 describe("calcite-link", () => {
   it("renders", async () => renders("<calcite-link href='/'>link</calcite-link>", { display: "inline" }));
 
+  it("honors hidden attribute", async () => hidden("calcite-link"));
+
   it("defaults", async () =>
     defaults("calcite-link", [
       {

src/components/loader/loader.e2e.ts

@@ -1,12 +1,14 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { renders } from "../../tests/commonTests";
+import { renders, hidden } from "../../tests/commonTests";
 
 describe("calcite-loader", () => {
   it("renders", async () => {
     await renders("calcite-loader", { display: "none", visible: false });
     await renders(`<calcite-loader active></calcite-loader>`, { display: "flex", visible: true });
   });
 
+  it("honors hidden attribute", async () => hidden("calcite-loader"));
+
   it("displays label from text prop", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-loader active text="testing"></calcite-loader>`);