fix: use proper heading

Author: scriptcoded

packages/ui-webc/src/components.d.ts

@@ -148,6 +148,10 @@ export namespace Components {
         "type": ItemType1;
     }
     interface ScoutListViewSubheading {
+        /**
+          * @default "h2"
+         */
+        "headingLevel": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
         "text": string;
     }
     interface ScoutLoader {
@@ -601,6 +605,10 @@ declare namespace LocalJSX {
         "type"?: ItemType1;
     }
     interface ScoutListViewSubheading {
+        /**
+          * @default "h2"
+         */
+        "headingLevel"?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
         "text"?: string;
     }
     interface ScoutLoader {

packages/ui-webc/src/components/list-view-subheading/list-view-subheading.css

@@ -7,6 +7,11 @@
   padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) !important;
   border: none !important;
   background-color: transparent;
+}
+
+.heading {
+  margin: 0;
+  padding: 0;
   font: var(--type-body-sm);
   color: var(--color-text-base);
   font-weight: 500;

packages/ui-webc/src/components/list-view-subheading/list-view-subheading.tsx

@@ -9,8 +9,13 @@ import { Component, Host, h, Prop } from "@stencil/core";
 })
 export class ScoutListViewSubheading {
   @Prop() text: string;
+  @Prop() headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" = "h2";
 
   render() {
-    return <Host role="listitem">{this.text}</Host>;
+    return (
+      <Host role="listitem">
+        <this.headingLevel class="heading">{this.text}</this.headingLevel>
+      </Host>
+    );
   }
 }

packages/ui-webc/src/components/list-view-subheading/readme.md

@@ -5,9 +5,10 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type     | Default     |
-| -------- | --------- | ----------- | -------- | ----------- |
-| `text`   | `text`    |             | `string` | `undefined` |
+| Property       | Attribute       | Description | Type                                           | Default     |
+| -------------- | --------------- | ----------- | ---------------------------------------------- | ----------- |
+| `headingLevel` | `heading-level` |             | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"` | `"h2"`      |
+| `text`         | `text`          |             | `string`                                       | `undefined` |
 
 
 ----------------------------------------------