feat(primitives): add level prop for Popover.Title component

Author: ZAHON

packages/primitives/src/components/popover/popover-title/popover-title.tsx

@@ -9,7 +9,7 @@ import { PopoverContext } from '../popover-context';
  * This component is based on the `h2` element.
  */
 export const PopoverTitle = component$<PopoverTitleProps>((props) => {
-  const { as, id, visuallyHidden, style, ...others } = props;
+  const { as, id, level = '2', visuallyHidden, style, ...others } = props;
 
   const { titleId } = useContext(PopoverContext);
 
@@ -25,14 +25,15 @@ export const PopoverTitle = component$<PopoverTitleProps>((props) => {
     });
   });
 
-  const Component = as || 'h2';
+  const Component = as || (`h${level}` as const);
 
   return (
     <Component
       id={titleId.value}
       data-qwik-primitives-popover-title=""
       data-scope="popover"
       data-part="title"
+      data-level={level}
       style={{
         ...(visuallyHidden && visuallyHiddenStyle),
         ...style,

packages/primitives/src/components/popover/popover-title/popover-title.types.ts

@@ -8,6 +8,12 @@ export interface PopoverTitleProps extends PropsOf<'h2'> {
    */
   as?: FunctionComponent;
 
+  /**
+   * The level of the title, determines which tag will be used (h1-h6).
+   * @default "2"
+   */
+  level?: '1' | '2' | '3' | '4' | '5' | '6';
+
   /**
    * When `true`, title will be hide from the screen in an accessible way.
    */