@quaffui/quaff 0.1.0-prealpha11 → 0.1.0-prealpha12

package/dist/components/avatar/QAvatar.svelte.d.ts

@@ -7,8 +7,8 @@ declare const __propDef: {
         size?: QAvatarProps["size"];
         src?: QAvatarProps["src"];
         video?: QAvatarProps["video"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/avatar/props.d.ts

@@ -1,7 +1,8 @@
 import type { QuaffSizes, CssValue, NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 export type QAvatarShapeOptions = "circle" | "rounded" | "top-round" | "left-round" | "right-round" | "bottom-round" | "top-left-round" | "top-right-round" | "bottom-left-round" | "bottom-right-round";
 export type QAvatarSizeOptions = QuaffSizes | CssValue | number;
-export interface QAvatarProps extends NativeProps {
+export interface QAvatarProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * Shape of the avatar.
      * @default circle

package/dist/components/breadcrumbs/QBreadcrumbs.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         gutter?: QBreadcrumbsProps["gutter"];
         activeColor?: QBreadcrumbsProps["activeColor"];
         separatorColor?: QBreadcrumbsProps["separatorColor"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         to?: QBreadcrumbsElProps["to"];
         href?: QBreadcrumbsElProps["href"];
         activeClass?: QBreadcrumbsElProps["activeClass"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/breadcrumbs/props.d.ts

@@ -1,6 +1,7 @@
 import type { NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 export type QBreadcrumbsGutterOptions = "none" | "sm" | "md" | "lg";
-export interface QBreadcrumbsProps extends NativeProps {
+export interface QBreadcrumbsProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.
      * @default /
@@ -22,7 +23,7 @@ export interface QBreadcrumbsProps extends NativeProps {
      */
     separatorColor?: string;
 }
-export interface QBreadcrumbsElProps extends NativeProps {
+export interface QBreadcrumbsElProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * Text to use for the breadcrumb element. If default slot is defined, the label will be overwritten by it.
      * @default ""

package/dist/components/button/QBtn.svelte

@@ -5,7 +5,7 @@ import QCircularProgress from "../progress/QCircularProgress.svelte";
 import { useSize } from "../../composables/use-size";
 import { isActivationKey } from "../../utils/events";
 import { ripple } from "../../helpers/ripple";
-export let icon = void 0, label = void 0, disable = false, loading = false, unelevated = false, outline = false, round = false, rectangle = false, flat = false, to = void 0, size = void 0, userClasses = void 0;
+export let icon = void 0, label = void 0, disable = false, loading = false, unelevated = false, outline = false, round = false, rectangle = false, noRipple = false, flat = false, to = void 0, size = void 0, userClasses = void 0;
 export { userClasses as class };
 let qBtn;
 let tag;
@@ -40,7 +40,7 @@ function onKeyDown(e) {
 <svelte:element
   this={tag}
   bind:this={qBtn}
-  use:ripple
+  use:ripple={{ disable: noRipple || disable }}
   role={tag === "a" ? "button" : undefined}
   href={to}
   class={classes}

package/dist/components/button/QBtn.svelte.d.ts

@@ -11,10 +11,11 @@ declare const __propDef: {
         outline?: QBtnProps["outline"];
         round?: QBtnProps["round"];
         rectangle?: QBtnProps["rectangle"];
+        noRipple?: QBtnProps["noRipple"];
         flat?: QBtnProps["flat"];
         to?: QBtnProps["to"];
         size?: QBtnProps["size"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/button/props.d.ts

@@ -1,6 +1,7 @@
 import type { NativeProps, QuaffSizes } from "../../utils/types";
+import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
 export type QBtnSizeOptions = Exclude<QuaffSizes, "xs">;
-export interface QBtnProps extends NativeProps {
+export interface QBtnProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * Puts the button in a disabled state, making it unclickable.
      * @default false
@@ -36,6 +37,11 @@ export interface QBtnProps extends NativeProps {
      * @default false
      */
     rectangle?: boolean;
+    /**
+     * Disable the ripple effect for the button.
+     * @default false
+     */
+    noRipple?: boolean;
     /**
      * Use round design for the button, giving it a circular shape.
      * @default false
@@ -56,4 +62,9 @@ export interface QBtnProps extends NativeProps {
      * @default md
      */
     size?: QBtnSizeOptions;
+    /**
+     * For "a" (anchor) tag only, apply the target attribute.
+     * @default undefined
+     */
+    target?: HTMLAnchorAttributes["target"];
 }

package/dist/components/card/QCard.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         flat?: QCardProps["flat"];
         round?: QCardProps["round"];
         title?: QCardProps["title"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/card/QCardActions.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         [x: string]: any;
         align?: QCardActionsProps["align"];
         vertical?: QCardActionsProps["vertical"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/card/QCardSection.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         horizontal?: QCardSectionProps["horizontal"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         scroll: Event;

package/dist/components/card/props.d.ts

@@ -1,7 +1,8 @@
 import type { UseAlignProps } from "../../composables/use-align";
 import type { NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 export type QCardFillColors = "primary" | "secondary" | "tertiary";
-export interface QCardProps extends NativeProps {
+export interface QCardProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * Puts a border around the card.
      * @default false
@@ -28,14 +29,14 @@ export interface QCardProps extends NativeProps {
      */
     title?: string;
 }
-export interface QCardSectionProps extends NativeProps {
+export interface QCardSectionProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * Lays out the section content horizontally.
      * @default false
      */
     horizontal?: boolean;
 }
-export interface QCardActionsProps extends UseAlignProps, NativeProps {
+export interface QCardActionsProps extends UseAlignProps, NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * Lays out the action items vertically.
      * @default false

package/dist/components/checkbox/QCheckbox.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         value?: boolean | undefined;
         label?: QCheckboxProps["label"];
         disable?: QCheckboxProps["disable"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/checkbox/props.d.ts

@@ -1,5 +1,6 @@
 import type { NativeProps } from "../../utils/types";
-export interface QCheckboxProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QCheckboxProps extends NativeProps, HTMLAttributes<HTMLLabelElement> {
     /**
      * Controls the checked state of the checkbox.
      */

package/dist/components/chip/QChip.svelte.d.ts

@@ -14,7 +14,7 @@ declare const __propDef: {
         size?: QChipProps["size"];
         tabindex?: QChipProps["tabindex"];
         href?: QChipProps["href"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         activated: CustomEvent<any>;

package/dist/components/chip/props.d.ts

@@ -1,6 +1,7 @@
 import type { NativeProps, QuaffSizes } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 export type QChipSizeOptions = Exclude<QuaffSizes, "xs" | "xl">;
-export interface QChipProps extends NativeProps {
+export interface QChipProps extends NativeProps, HTMLAttributes<HTMLAnchorElement> {
     /**
      * The content inside the chip. Will overwrite the default slot.
      * @default undefined

package/dist/components/codeBlock/props.d.ts

@@ -1,4 +1,5 @@
-export interface QCodeBlockProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QCodeBlockProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Language to use for highlighting.
      */

package/dist/components/dialog/QDialog.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         modal?: QDialogProps["modal"];
         fullscreen?: QDialogProps["fullscreen"];
         persistent?: QDialogProps["persistent"];
-        class?: string | undefined;
+        class?: string | null | undefined;
         hide?: (() => void) | undefined;
         show?: (() => void) | undefined;
         toggle?: ((e: MouseEvent) => void) | undefined;

package/dist/components/dialog/props.d.ts

@@ -1,7 +1,8 @@
 import type { NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 import type { QBtnProps } from "../button/props";
 export type QDialogPositionOptions = "default" | "top" | "right" | "bottom" | "left";
-export interface QDialogProps extends NativeProps {
+export interface QDialogProps extends NativeProps, HTMLAttributes<HTMLDialogElement> {
     /**
      * The value indicating whether the dialog is visible or hidden.
      * @default true

package/dist/components/drawer/QDrawer.svelte.d.ts

@@ -16,8 +16,8 @@ declare const __propDef: {
         noSwipeOpen?: QDrawerProps["noSwipeOpen"];
         noSwipeClose?: QDrawerProps["noSwipeClose"];
         noSwipeBackdrop?: QDrawerProps["noSwipeBackdrop"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
         show?: ((e?: MouseEvent) => void) | undefined;
         hide?: (() => void) | undefined;
         toggle?: ((e?: MouseEvent) => void) | undefined;

package/dist/components/drawer/props.d.ts

@@ -1,7 +1,8 @@
 import type { CssValue, NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 export type QDrawerSideOptions = "left" | "right";
 export type QDrawerBehaviorOptions = "default" | "desktop" | "mobile";
-export interface QDrawerProps extends NativeProps {
+export interface QDrawerProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * The value indicating whether the drawer is visible or hidden.
      * @default true

package/dist/components/footer/QFooter.svelte.d.ts

@@ -6,8 +6,8 @@ declare const __propDef: {
         border?: QFooterProps["border"];
         elevate?: QFooterProps["elevate"];
         height?: QFooterProps["height"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/footer/props.d.ts

@@ -1,5 +1,6 @@
 import type { CssValue, NativeProps } from "../../utils/types";
-export interface QFooterProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QFooterProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * The value indicating whether the footer is visible or hidden. (not supported yet)
      * @default true

package/dist/components/header/QHeader.svelte.d.ts

@@ -6,8 +6,8 @@ declare const __propDef: {
         inset?: QHeaderProps["inset"];
         elevate?: QHeaderProps["elevate"];
         border?: QHeaderProps["border"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/header/props.d.ts

@@ -1,5 +1,5 @@
-import type { NativeProps } from "../../utils/types";
-export interface QHeaderProps extends NativeProps {
+import type { QToolbarProps } from "../toolbar/props";
+export interface QHeaderProps extends QToolbarProps {
     /**
      * @default false
      */

package/dist/components/icon/QIcon.svelte

@@ -26,7 +26,7 @@ $:
   };
 </script>
 
-<i class={classes} {style}>
+<i class={classes} {style} {...$$restProps}>
   {#if name !== undefined}
     {name}
   {:else if img !== undefined}

package/dist/components/icon/QIcon.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { QIconProps } from "./props";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         size?: QIconProps["size"];
         name?: QIconProps["name"];
         type?: QIconProps["type"];
@@ -10,8 +11,8 @@ declare const __propDef: {
         img?: QIconProps["img"];
         imgAttributes?: QIconProps["imgAttributes"];
         color?: QIconProps["color"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/icon/props.d.ts

@@ -1,7 +1,8 @@
 import type { CssValue, NativeProps, QuaffSizes } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 export type QIconSizeOptions = QuaffSizes | CssValue | number;
 export type QIconTypeOptions = "outlined" | "sharp" | "rounded";
-export interface QIconProps extends NativeProps {
+export interface QIconProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * The size of the icon. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default md

package/dist/components/input/QInput.svelte.d.ts

@@ -14,7 +14,7 @@ declare const __propDef: {
         outlined?: QInputProps["outlined"];
         rounded?: QInputProps["rounded"];
         value: QInputProps["value"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/input/props.d.ts

@@ -1,5 +1,6 @@
 import type { NativeProps } from "../../utils/types";
-export interface QInputProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     bordered?: boolean;
     dense?: boolean;
     disable?: boolean;

package/dist/components/layout/QLayout.svelte

@@ -63,7 +63,7 @@ $:
 setContext("layout", ctx);
 </script>
 
-<div class={classes} {style} on:scroll on:resize>
+<div class={classes} {style} {...$$restProps} on:scroll on:resize>
   {#if $$slots.railbarLeft}
     <slot name="railbarLeft" />
   {/if}

package/dist/components/layout/QLayout.svelte.d.ts

@@ -23,6 +23,7 @@ import type { QLayoutProps } from "./props";
 import type { Readable } from "svelte/store";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         view?: QLayoutProps["view"];
         headerHeight?: QLayoutProps["headerHeight"];
         footerHeight?: QLayoutProps["footerHeight"];
@@ -30,8 +31,8 @@ declare const __propDef: {
         rightDrawerWidth?: QLayoutProps["rightDrawerWidth"];
         leftRailbarWidth?: QLayoutProps["leftRailbarWidth"];
         rightRailbarWidth?: QLayoutProps["rightDrawerWidth"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         scroll: Event;

package/dist/components/layout/index.scss

@@ -117,6 +117,10 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
     }
   }
 
+  & > .q-list {
+    gap: 0.5rem;
+  }
+
   & > .q-list > .q-item {
     flex-direction: column;
     border-radius: 2rem;
@@ -125,7 +129,7 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
     padding: 0 8px;
     gap: 0.25em;
 
-    &.wave::after {
+    &.q-link::after {
       all: unset;
     }
 
@@ -135,13 +139,13 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
 
     & > i {
       transition: var(--speed1) padding linear;
-      padding-inline: 0.25em;
+      padding: 0.25rem;
     }
 
-    &:is(:hover, :focus, .active) > i {
+    &:is(:hover, :focus, &--active) > i {
       background-color: var(--secondary-container);
       color: var(--on-secondary-container);
-      padding: 0 1rem;
+      padding-inline: 1.5rem;
       font-variation-settings:
         "FILL" 1,
         "wght" 400,

package/dist/components/layout/props.d.ts

@@ -1,6 +1,7 @@
 import type { NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 export type QLayoutViewOptions = `${"l" | "h"}${"h" | "H"}${"r" | "h"} ${"l" | "L"}${"p"}${"r" | "R"} ${"l" | "f"}${"f" | "F"}${"r" | "f"}`;
-export interface QLayoutProps extends NativeProps {
+export interface QLayoutProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * The layout view configuration, which defines how layout components (header, railbars, drawers, footer) should be displayed on screen.
      * See <a href="https://quasar.dev/layout/layout/#understanding-the-view-prop" target="_blank">Quasar's explanation on the view prop</a>.

package/dist/components/list/QItem.svelte

@@ -4,10 +4,11 @@ import { createClasses } from "../../utils/props";
 import { getContext, setContext } from "svelte";
 import { Quaff } from "../../stores/Quaff";
 import { writable } from "svelte/store";
-export let tag = "div", active = false, clickable = false, dense = false, tabindex = 0, href = void 0, to = void 0, disable = false, activeClass = void 0, replace = false, userClasses = void 0;
+import { ripple } from "../../helpers/ripple";
+export let tag = "div", active = false, clickable = false, dense = false, tabindex = 0, href = void 0, to = void 0, disable = false, activeClass = void 0, replace = false, noRipple = false, userClasses = void 0;
 export { userClasses as class };
-let hasMultiplLines = writable(false);
-setContext("hasMultipleLines", hasMultiplLines);
+let hasMultipleLines = writable(false);
+setContext("hasMultipleLines", hasMultipleLines);
 $:
   ({ hasLink, linkAttributes, linkClasses } = useRouterLink({
     href,
@@ -19,23 +20,25 @@ $:
 $:
   separatorOptions = getContext("separator");
 $:
-  isActionable = clickable === true || hasLink === true || tag === "label";
+  isActionable = clickable || hasLink || tag === "label";
 $:
-  isClickable = disable !== true && isActionable === true;
+  isClickable = isActionable && !disable;
 $:
   isActive = isRouteActive($Quaff.router, to);
 $:
-  classes = createClasses([
-    "q-item flex items-center",
-    $hasMultiplLines && "multiline",
-    dense && "dense",
-    hasLink && active && "q-item--active",
-    hasLink && active && activeClass,
-    isActive && "active",
-    isClickable && "wave",
-    linkClasses,
-    userClasses
-  ]);
+  classes = createClasses(
+    [
+      $hasMultipleLines && "multiline",
+      dense && "dense",
+      (isActive || hasLink && active) && activeClass,
+      (isActive || hasLink && active) && "active"
+    ],
+    {
+      component: "q-item",
+      quaffClasses: [linkClasses],
+      userClasses
+    }
+  );
 $:
   attributes = {
     class: classes,
@@ -50,11 +53,11 @@ $:
 {/if}
 {#if linkAttributes.href !== undefined}
   <!-- svelte-ignore a11y-missing-attribute -->
-  <a {...attributes} {...linkAttributes} {...$$restProps} on:mouseenter on:mouseleave on:click>
+  <a use:ripple={{ disable: !isClickable || noRipple }} {...attributes} {...linkAttributes}>
     <slot />
   </a>
 {:else}
-  <div {...attributes} {...$$restProps} on:mouseenter on:mouseleave on:click>
+  <svelte:element this={tag} {...attributes}>
     <slot />
-  </div>
+  </svelte:element>
 {/if}

package/dist/components/list/QItem.svelte.d.ts

@@ -10,16 +10,13 @@ declare const __propDef: {
         tabindex?: QItemProps["tabindex"];
         href?: QItemProps["href"];
         to?: QItemProps["to"];
-        disable?: boolean | undefined;
+        disable?: QItemProps["disable"];
         activeClass?: QItemProps["activeClass"];
-        replace?: boolean | undefined;
-        class?: string | undefined;
+        replace?: QItemProps["replace"];
+        noRipple?: QItemProps["noRipple"];
+        class?: string | null | undefined;
     };
     events: {
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/list/QItemSection.svelte

@@ -9,33 +9,37 @@ $:
     $ctx = $$slots.headline && [$$slots.line1, $$slots.line2, $$slots.line3].filter(Boolean).length >= 2;
   }
 $:
-  classes = createClasses([`q-item__section `, `q-item__section--${type}`, userClasses]);
+  classes = createClasses([type], {
+    component: "q-item__section",
+    userClasses
+  });
 </script>
 
 <div class={classes} {...$$restProps}>
   {#if type === "content"}
-    {#if [$$slots.headline, $$slots.line2, $$slots.line2, $$slots.line3].some(Boolean) === false}
+    {#if [$$slots.headline, $$slots.line2, $$slots.line2, $$slots.line3].every(Boolean) === false}
       <slot />
-    {/if}
-    {#if $$slots.headline}
-      <div class="body-large on-surface-text">
-        <slot name="headline" />
-      </div>
-    {/if}
-    <div class="body-medium on-surface-variant-text">
-      {#if $$slots.line1}
-        <slot name="line1" />
+    {:else}
+      {#if $$slots.headline}
+        <div class="body-large on-surface-text">
+          <slot name="headline" />
+        </div>
       {/if}
-    </div>
-    {#if $$slots.line2}
       <div class="body-medium on-surface-variant-text">
-        <slot name="line2" />
-      </div>
-    {/if}
-    {#if $$slots.line3}
-      <div class="body-medium on-surface-variant-text">
-        <slot name="line3" />
+        {#if $$slots.line1}
+          <slot name="line1" />
+        {/if}
       </div>
+      {#if $$slots.line2}
+        <div class="body-medium on-surface-variant-text">
+          <slot name="line2" />
+        </div>
+      {/if}
+      {#if $$slots.line3}
+        <div class="body-medium on-surface-variant-text">
+          <slot name="line3" />
+        </div>
+      {/if}
     {/if}
   {:else if type === "trailingText"}
     <div class="label-small on-surface-variant-text">

package/dist/components/list/QItemSection.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         type?: QItemSectionProps["type"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;