fix(block, date-picker, list-item-group, panel, pick-list-group, popover, tip, tip-manager)!: Set default internal heading to a div.

src/components/block/block.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, h, Host, Prop, VNode } from "@stencil/core";
-import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
+import { CSS, ICONS, SLOTS, TEXT } from "./resources";
 import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { Heading, HeadingLevel } from "../functional/Heading";
 import { Status } from "../interfaces";
@@ -216,7 +216,7 @@ export class Block implements ConditionalSlotComponent, InteractiveComponent {
     const { heading, headingLevel, summary, description } = this;
     return heading || summary || description ? (
       <div class={CSS.title}>
-        <Heading class={CSS.heading} level={headingLevel || HEADING_LEVEL}>
+        <Heading class={CSS.heading} level={headingLevel}>
           {heading}
         </Heading>
         {summary || description ? (

src/components/block/resources.ts

@@ -39,5 +39,3 @@ export const ICONS = {
   invalid: "exclamation-mark-triangle",
   refresh: "refresh"
 };
-
-export const HEADING_LEVEL = 4;

src/components/date-picker/date-picker.tsx

@@ -23,7 +23,7 @@ import {
 import { HeadingLevel } from "../functional/Heading";
 
 import { DateRangeChange } from "./interfaces";
-import { HEADING_LEVEL, TEXT } from "./resources";
+import { TEXT } from "./resources";
 import {
   connectLocalized,
   disconnectLocalized,
@@ -482,7 +482,7 @@ export class DatePicker implements LocalizedComponent {
       this.localeData && [
         <calcite-date-picker-month-header
           activeDate={activeDate}
-          headingLevel={this.headingLevel || HEADING_LEVEL}
+          headingLevel={this.headingLevel}
           intlNextMonth={this.intlNextMonth}
           intlPrevMonth={this.intlPrevMonth}
           intlYear={this.intlYear}

src/components/date-picker/resources.ts

@@ -1,5 +1,3 @@
-export const HEADING_LEVEL = 2;
-
 export const TEXT = {
   nextMonth: "Next month",
   prevMonth: "Previous month",

src/components/functional/Heading.spec.tsx

@@ -29,4 +29,13 @@ describe("Heading", () => {
 
     expect(page.root).toEqualHtml(`<h1 class="test">My Heading</h1>`);
   });
+
+  it("should render a div", async () => {
+    const page = await newSpecPage({
+      components: [Dummy], // Required so we are feeding it a Dummy component
+      template: () => <Heading class="test">My Heading</Heading>
+    });
+
+    expect(page.root).toEqualHtml(`<div class="test">My Heading</div>`);
+  });
 });

src/components/functional/Heading.tsx

@@ -4,15 +4,15 @@ import { JSXBase } from "@stencil/core/internal";
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 interface HeadingProps extends JSXBase.HTMLAttributes {
-  level: HeadingLevel;
+  level?: HeadingLevel;
 }
 
 export function constrainHeadingLevel(level: number): HeadingLevel {
   return Math.min(Math.max(Math.ceil(level), 1), 6) as HeadingLevel;
 }
 
 export const Heading: FunctionalComponent<HeadingProps> = (props, children) => {
-  const HeadingTag = `h${props.level}`;
+  const HeadingTag = props.level ? `h${props.level}` : "div";
 
   delete props.level;
 

src/components/list-item-group/list-item-group.tsx

@@ -1,6 +1,5 @@
 import { Component, Element, Prop, h, VNode, Host } from "@stencil/core";
 import { CSS } from "./resources";
-import { HEADING_LEVEL } from "./resources";
 import { HeadingLevel, Heading, constrainHeadingLevel } from "../functional/Heading";
 
 /**
@@ -50,7 +49,7 @@ export class ListItemGroup {
       "calcite-list, calcite-list-item-group"
     )?.headingLevel;
     const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;
-    const level = headingLevel || relativeLevel || HEADING_LEVEL;
+    const level = headingLevel || relativeLevel;
 
     return (
       <Host>

src/components/list-item-group/resources.ts

@@ -2,5 +2,3 @@ export const CSS = {
   heading: "heading",
   container: "container"
 };
-
-export const HEADING_LEVEL = 3;

src/components/panel/panel.tsx

@@ -11,7 +11,7 @@ import {
   Fragment,
   State
 } from "@stencil/core";
-import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
+import { CSS, ICONS, SLOTS, TEXT } from "./resources";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";
 import { Scale } from "../interfaces";
 import { HeadingLevel, Heading } from "../functional/Heading";
@@ -457,7 +457,7 @@ export class Panel implements InteractiveComponent {
   renderHeaderContent(): VNode {
     const { heading, headingLevel, summary, description, hasHeaderContent } = this;
     const headingNode = heading ? (
-      <Heading class={CSS.heading} level={headingLevel || HEADING_LEVEL}>
+      <Heading class={CSS.heading} level={headingLevel}>
         {heading}
       </Heading>
     ) : null;

src/components/panel/resources.ts

@@ -39,5 +39,3 @@ export const TEXT = {
   open: "Open",
   options: "Options"
 };
-
-export const HEADING_LEVEL = 3;

src/components/pick-list-group/pick-list-group.tsx

@@ -1,6 +1,5 @@
 import { Component, Element, Prop, h, VNode, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
-import { HEADING_LEVEL } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { HeadingLevel, Heading, constrainHeadingLevel } from "../functional/Heading";
 import {
@@ -74,7 +73,7 @@ export class PickListGroup implements ConditionalSlotComponent {
     const title = groupTitle;
     const parentLevel = el.closest("calcite-pick-list")?.headingLevel;
     const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;
-    const level = headingLevel || relativeLevel || HEADING_LEVEL;
+    const level = headingLevel || relativeLevel;
 
     return (
       <Fragment>

src/components/pick-list-group/resources.ts

@@ -7,5 +7,3 @@ export const CSS = {
 export const SLOTS = {
   parentItem: "parent-item"
 };
-
-export const HEADING_LEVEL = 3;

src/components/popover/popover.tsx

@@ -12,14 +12,7 @@ import {
   h,
   VNode
 } from "@stencil/core";
-import {
-  CSS,
-  ARIA_CONTROLS,
-  ARIA_EXPANDED,
-  HEADING_LEVEL,
-  TEXT,
-  defaultPopoverPlacement
-} from "./resources";
+import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, TEXT, defaultPopoverPlacement } from "./resources";
 import {
   FloatingCSS,
   OverlayPositioning,
@@ -514,7 +507,7 @@ export class Popover implements FloatingUIComponent, OpenCloseComponent {
   renderHeader(): VNode {
     const { heading, headingLevel } = this;
     const headingNode = heading ? (
-      <Heading class={CSS.heading} level={headingLevel || HEADING_LEVEL}>
+      <Heading class={CSS.heading} level={headingLevel}>
         {heading}
       </Heading>
     ) : null;

src/components/popover/resources.ts

@@ -18,5 +18,3 @@ export const TEXT = {
 export const defaultPopoverPlacement = "auto";
 export const ARIA_CONTROLS = "aria-controls";
 export const ARIA_EXPANDED = "aria-expanded";
-
-export const HEADING_LEVEL = 2;

src/components/tip-manager/resources.ts

@@ -25,5 +25,3 @@ export const TEXT = {
   previous: "Previous",
   next: "Next"
 };
-
-export const HEADING_LEVEL = 2;

src/components/tip-manager/tip-manager.tsx

@@ -10,7 +10,7 @@ import {
   h,
   VNode
 } from "@stencil/core";
-import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";
+import { CSS, ICONS, TEXT } from "./resources";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";
 import { HeadingLevel, Heading } from "../functional/Heading";
 import { createObserver } from "../../utils/observers";
@@ -288,7 +288,7 @@ export class TipManager {
         tabIndex={0}
       >
         <header class={CSS.header}>
-          <Heading class={CSS.heading} level={headingLevel || HEADING_LEVEL}>
+          <Heading class={CSS.heading} level={headingLevel}>
             {groupTitle}
           </Heading>
           <calcite-action

src/components/tip/resources.ts

@@ -1,6 +1,3 @@
-import { HEADING_LEVEL as PARENT_HEADING_LEVEL } from "../tip-manager/resources";
-import { HeadingLevel } from "../functional/Heading";
-
 export const CSS = {
   container: "container",
   header: "header",
@@ -22,5 +19,3 @@ export const SLOTS = {
 export const TEXT = {
   close: "Close"
 };
-
-export const HEADING_LEVEL = (PARENT_HEADING_LEVEL + 1) as HeadingLevel;

src/components/tip/tip.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Prop, h, VNode, Fragment } from "@stencil/core";
-import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";
+import { CSS, ICONS, SLOTS, TEXT } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { HeadingLevel, Heading, constrainHeadingLevel } from "../functional/Heading";
 import {
@@ -110,7 +110,7 @@ export class Tip implements ConditionalSlotComponent {
     const { heading, headingLevel, el } = this;
     const parentLevel = el.closest("calcite-tip-manager")?.headingLevel;
     const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;
-    const level = headingLevel || relativeLevel || HEADING_LEVEL;
+    const level = headingLevel || relativeLevel;
 
     return heading ? (
       <header class={CSS.header}>