@quaffui/quaff 0.1.0-prealpha10 → 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

@@ -4,8 +4,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         align?: QCardActionsProps["align"];
-        vertical?: boolean | undefined;
-        class?: string | undefined;
+        vertical?: QCardActionsProps["vertical"];
+        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,17 +29,17 @@ 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
      */
-    vertical: boolean;
+    vertical?: boolean;
 }

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

@@ -4,7 +4,7 @@ import { getContext } from "svelte";
 import { clickOutside } from "../../helpers";
 import { useSize } from "../../composables/use-size";
 import { derived } from "svelte/store";
-export let value = true, side = "left", width = 300, breakpoint = 1023, showIfAbove = false, behavior = "default", bordered = false, elevated = false, overlay = false, persistent = false, noSwipeOpen = false, noSwipeClose = false, noSwipeBackdrop = false, userClasses = void 0, userStyles = void 0;
+export let value = false, side = "left", width = 300, breakpoint = 1023, showIfAbove = false, behavior = "default", bordered = false, elevated = false, overlay = false, persistent = false, noSwipeOpen = false, noSwipeClose = false, noSwipeBackdrop = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 $:
   canHideOnClickOutside = value === true && persistent === false || overlay === true;
@@ -22,7 +22,7 @@ export const show = (e) => {
   }
 };
 export const hide = () => {
-  if (value === true && canHideOnClickOutside === true) {
+  if (value === true) {
     value = false;
   }
 };
@@ -94,6 +94,11 @@ $:
   });
 </script>
 
-<div use:clickOutside={hide} class={classes} {style} {...$$restProps}>
+<div
+  use:clickOutside={() => canHideOnClickOutside && hide()}
+  class={classes}
+  {style}
+  {...$$restProps}
+>
   <slot />
 </div>

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,16 +2,17 @@ import { SvelteComponent } from "svelte";
 import type { QIconProps } from "./props";
 declare const __propDef: {
     props: {
-        size?: import("./props").QIconSizeOptions | undefined;
+        [x: string]: any;
+        size?: QIconProps["size"];
         name?: QIconProps["name"];
-        type?: import("./props").QIconTypeOptions | undefined;
-        filled?: boolean | undefined;
+        type?: QIconProps["type"];
+        filled?: QIconProps["filled"];
         svg?: QIconProps["svg"];
         img?: QIconProps["img"];
-        imgAttributes?: Record<string, any> | undefined;
+        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,17 +1,18 @@
 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
      */
-    size: QIconSizeOptions;
+    size?: QIconSizeOptions;
     /**
      * The type of the icon.
      * @default outlined
      */
-    type: QIconTypeOptions;
+    type?: QIconTypeOptions;
     /**
      * The name of the Material Symbols icon.
      * @default undefined
@@ -21,7 +22,7 @@ export interface QIconProps extends NativeProps {
      * Determines whether the icon should be filled.
      * @default false
      */
-    filled: boolean;
+    filled?: boolean;
     /**
      * The SVG content for the icon.
      * @default undefined
@@ -36,7 +37,7 @@ export interface QIconProps extends NativeProps {
      * Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.
      * @default {}
      */
-    imgAttributes: Record<string, any>;
+    imgAttributes?: Record<string, any>;
     /**
      * The color of the icon.
      * @default undefined

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

@@ -3,18 +3,18 @@ import type { QInputProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        bordered?: boolean | undefined;
+        bordered?: QInputProps["bordered"];
         dense?: QInputProps["dense"];
-        disable?: boolean | undefined;
-        error?: boolean | undefined;
+        disable?: QInputProps["disable"];
+        error?: QInputProps["error"];
         errorMessage?: QInputProps["errorMessage"];
-        filled?: boolean | undefined;
+        filled?: QInputProps["filled"];
         hint?: QInputProps["hint"];
         label?: QInputProps["label"];
-        outlined?: boolean | undefined;
-        rounded?: boolean | undefined;
+        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,15 +1,16 @@
 import type { NativeProps } from "../../utils/types";
-export interface QInputProps extends NativeProps {
-    bordered: boolean;
+import type { HTMLAttributes } from "svelte/elements";
+export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
+    bordered?: boolean;
     dense?: boolean;
-    disable: boolean;
-    error: boolean;
+    disable?: boolean;
+    error?: boolean;
     errorMessage?: string;
-    filled: boolean;
+    filled?: boolean;
     hint?: string;
     label?: string;
-    outlined: boolean;
-    rounded: boolean;
+    outlined?: boolean;
+    rounded?: boolean;
     value: string;
 }
 export declare const QInputPropsDefaults: {

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,15 +23,16 @@ import type { QLayoutProps } from "./props";
 import type { Readable } from "svelte/store";
 declare const __propDef: {
     props: {
-        view?: "lhh lpr lfr" | "lhh lpr lff" | "lhh lpr lFr" | "lhh lpr lFf" | "lhh lpr ffr" | "lhh lpr fff" | "lhh lpr fFr" | "lhh lpr fFf" | "lhh lpR lfr" | "lhh lpR lff" | "lhh lpR lFr" | "lhh lpR lFf" | "lhh lpR ffr" | "lhh lpR fff" | "lhh lpR fFr" | "lhh lpR fFf" | "lhh Lpr lfr" | "lhh Lpr lff" | "lhh Lpr lFr" | "lhh Lpr lFf" | "lhh Lpr ffr" | "lhh Lpr fff" | "lhh Lpr fFr" | "lhh Lpr fFf" | "lhh LpR lfr" | "lhh LpR lff" | "lhh LpR lFr" | "lhh LpR lFf" | "lhh LpR ffr" | "lhh LpR fff" | "lhh LpR fFr" | "lhh LpR fFf" | "lhr lpr lfr" | "lhr lpr lff" | "lhr lpr lFr" | "lhr lpr lFf" | "lhr lpr ffr" | "lhr lpr fff" | "lhr lpr fFr" | "lhr lpr fFf" | "lhr lpR lfr" | "lhr lpR lff" | "lhr lpR lFr" | "lhr lpR lFf" | "lhr lpR ffr" | "lhr lpR fff" | "lhr lpR fFr" | "lhr lpR fFf" | "lhr Lpr lfr" | "lhr Lpr lff" | "lhr Lpr lFr" | "lhr Lpr lFf" | "lhr Lpr ffr" | "lhr Lpr fff" | "lhr Lpr fFr" | "lhr Lpr fFf" | "lhr LpR lfr" | "lhr LpR lff" | "lhr LpR lFr" | "lhr LpR lFf" | "lhr LpR ffr" | "lhr LpR fff" | "lhr LpR fFr" | "lhr LpR fFf" | "lHh lpr lfr" | "lHh lpr lff" | "lHh lpr lFr" | "lHh lpr lFf" | "lHh lpr ffr" | "lHh lpr fff" | "lHh lpr fFr" | "lHh lpr fFf" | "lHh lpR lfr" | "lHh lpR lff" | "lHh lpR lFr" | "lHh lpR lFf" | "lHh lpR ffr" | "lHh lpR fff" | "lHh lpR fFr" | "lHh lpR fFf" | "lHh Lpr lfr" | "lHh Lpr lff" | "lHh Lpr lFr" | "lHh Lpr lFf" | "lHh Lpr ffr" | "lHh Lpr fff" | "lHh Lpr fFr" | "lHh Lpr fFf" | "lHh LpR lfr" | "lHh LpR lff" | "lHh LpR lFr" | "lHh LpR lFf" | "lHh LpR ffr" | "lHh LpR fff" | "lHh LpR fFr" | "lHh LpR fFf" | "lHr lpr lfr" | "lHr lpr lff" | "lHr lpr lFr" | "lHr lpr lFf" | "lHr lpr ffr" | "lHr lpr fff" | "lHr lpr fFr" | "lHr lpr fFf" | "lHr lpR lfr" | "lHr lpR lff" | "lHr lpR lFr" | "lHr lpR lFf" | "lHr lpR ffr" | "lHr lpR fff" | "lHr lpR fFr" | "lHr lpR fFf" | "lHr Lpr lfr" | "lHr Lpr lff" | "lHr Lpr lFr" | "lHr Lpr lFf" | "lHr Lpr ffr" | "lHr Lpr fff" | "lHr Lpr fFr" | "lHr Lpr fFf" | "lHr LpR lfr" | "lHr LpR lff" | "lHr LpR lFr" | "lHr LpR lFf" | "lHr LpR ffr" | "lHr LpR fff" | "lHr LpR fFr" | "lHr LpR fFf" | "hhh lpr lfr" | "hhh lpr lff" | "hhh lpr lFr" | "hhh lpr lFf" | "hhh lpr ffr" | "hhh lpr fff" | "hhh lpr fFr" | "hhh lpr fFf" | "hhh lpR lfr" | "hhh lpR lff" | "hhh lpR lFr" | "hhh lpR lFf" | "hhh lpR ffr" | "hhh lpR fff" | "hhh lpR fFr" | "hhh lpR fFf" | "hhh Lpr lfr" | "hhh Lpr lff" | "hhh Lpr lFr" | "hhh Lpr lFf" | "hhh Lpr ffr" | "hhh Lpr fff" | "hhh Lpr fFr" | "hhh Lpr fFf" | "hhh LpR lfr" | "hhh LpR lff" | "hhh LpR lFr" | "hhh LpR lFf" | "hhh LpR ffr" | "hhh LpR fff" | "hhh LpR fFr" | "hhh LpR fFf" | "hhr lpr lfr" | "hhr lpr lff" | "hhr lpr lFr" | "hhr lpr lFf" | "hhr lpr ffr" | "hhr lpr fff" | "hhr lpr fFr" | "hhr lpr fFf" | "hhr lpR lfr" | "hhr lpR lff" | "hhr lpR lFr" | "hhr lpR lFf" | "hhr lpR ffr" | "hhr lpR fff" | "hhr lpR fFr" | "hhr lpR fFf" | "hhr Lpr lfr" | "hhr Lpr lff" | "hhr Lpr lFr" | "hhr Lpr lFf" | "hhr Lpr ffr" | "hhr Lpr fff" | "hhr Lpr fFr" | "hhr Lpr fFf" | "hhr LpR lfr" | "hhr LpR lff" | "hhr LpR lFr" | "hhr LpR lFf" | "hhr LpR ffr" | "hhr LpR fff" | "hhr LpR fFr" | "hhr LpR fFf" | "hHh lpr lfr" | "hHh lpr lff" | "hHh lpr lFr" | "hHh lpr lFf" | "hHh lpr ffr" | "hHh lpr fff" | "hHh lpr fFr" | "hHh lpr fFf" | "hHh lpR lfr" | "hHh lpR lff" | "hHh lpR lFr" | "hHh lpR lFf" | "hHh lpR ffr" | "hHh lpR fff" | "hHh lpR fFr" | "hHh lpR fFf" | "hHh Lpr lfr" | "hHh Lpr lff" | "hHh Lpr lFr" | "hHh Lpr lFf" | "hHh Lpr ffr" | "hHh Lpr fff" | "hHh Lpr fFr" | "hHh Lpr fFf" | "hHh LpR lfr" | "hHh LpR lff" | "hHh LpR lFr" | "hHh LpR lFf" | "hHh LpR ffr" | "hHh LpR fff" | "hHh LpR fFr" | "hHh LpR fFf" | "hHr lpr lfr" | "hHr lpr lff" | "hHr lpr lFr" | "hHr lpr lFf" | "hHr lpr ffr" | "hHr lpr fff" | "hHr lpr fFr" | "hHr lpr fFf" | "hHr lpR lfr" | "hHr lpR lff" | "hHr lpR lFr" | "hHr lpR lFf" | "hHr lpR ffr" | "hHr lpR fff" | "hHr lpR fFr" | "hHr lpR fFf" | "hHr Lpr lfr" | "hHr Lpr lff" | "hHr Lpr lFr" | "hHr Lpr lFf" | "hHr Lpr ffr" | "hHr Lpr fff" | "hHr Lpr fFr" | "hHr Lpr fFf" | "hHr LpR lfr" | "hHr LpR lff" | "hHr LpR lFr" | "hHr LpR lFf" | "hHr LpR ffr" | "hHr LpR fff" | "hHr LpR fFr" | "hHr LpR fFf" | undefined;
-        headerHeight?: string | number | undefined;
-        footerHeight?: string | number | undefined;
-        leftDrawerWidth?: string | number | undefined;
-        rightDrawerWidth?: string | number | undefined;
-        leftRailbarWidth?: string | number | undefined;
-        rightRailbarWidth?: string | number | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
+        [x: string]: any;
+        view?: QLayoutProps["view"];
+        headerHeight?: QLayoutProps["headerHeight"];
+        footerHeight?: QLayoutProps["footerHeight"];
+        leftDrawerWidth?: QLayoutProps["leftDrawerWidth"];
+        rightDrawerWidth?: QLayoutProps["rightDrawerWidth"];
+        leftRailbarWidth?: QLayoutProps["leftRailbarWidth"];
+        rightRailbarWidth?: QLayoutProps["rightDrawerWidth"];
+        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,41 +1,42 @@
 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>.
      * @default "hhh lpr fff"
      */
-    view: QLayoutViewOptions;
+    view?: QLayoutViewOptions;
     /**
      * The height of the header. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default 64px
      */
-    headerHeight: string | number;
+    headerHeight?: string | number;
     /**
      * The height of the footer. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default 80px
      */
-    footerHeight: string | number;
+    footerHeight?: string | number;
     /**
      * The width of the left drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default 300px
      */
-    leftDrawerWidth: string | number;
+    leftDrawerWidth?: string | number;
     /**
      * The width of the right drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default 300px
      */
-    rightDrawerWidth: string | number;
+    rightDrawerWidth?: string | number;
     /**
      * The width of the left railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default 88px
      */
-    leftRailbarWidth: string | number;
+    leftRailbarWidth?: string | number;
     /**
      * The width of the right railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default 88px
      */
-    rightRailbarWidth: string | number;
+    rightRailbarWidth?: string | number;
 }
 export type QLayoutEvents = "resize" | "scroll" | "scrollHeight";