@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha16

package/dist/components/avatar/QAvatar.svelte

@@ -17,7 +17,12 @@ $:
     class:q-avatar--right-round={shape?.includes("right")}
     style:width={sizeObj.style}
     style:height={sizeObj.style}
-    autoplay loop playsinline {...$$restProps} on:click>
+    autoplay
+    loop
+    playsinline
+    {...$$restProps}
+    on:click
+  >
     <source {src} type="video/mp4" />
   </video>
 {:else if src !== undefined}
@@ -33,7 +38,10 @@ $:
     class:q-avatar--right-round={shape?.includes("right")}
     style:width={sizeObj.style}
     style:height={sizeObj.style}
-    {src} {...$$restProps} on:click />
+    {src}
+    {...$$restProps}
+    on:click
+  />
 {:else}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
@@ -46,7 +54,9 @@ $:
     class:q-avatar--right-round={shape?.includes("right")}
     style:width={sizeObj.style}
     style:height={sizeObj.style}
-    {...$$restProps} on:click>
+    {...$$restProps}
+    on:click
+  >
     <slot />
   </div>
 {/if}

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

@@ -1,2 +1,2 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QAvatarDocs: QComponentDocs;
+export declare const QAvatarDocs: QComponentDocs;

package/dist/components/avatar/docs.js

@@ -1,5 +1,5 @@
 import { QAvatarDocsProps } from "./docs.props";
-export let QAvatarDocs = {
+export const QAvatarDocs = {
     name: "QAvatar",
     description: "Avatars can be used in many different ways as with icons or for user profile images/videos, for example. They can have many different shapes, the default one being a circle.",
     docs: {

package/dist/components/breadcrumbs/QBreadcrumbs.svelte

@@ -1,5 +1,4 @@
-<script>import { createClasses } from "../../utils";
-import { onMount, setContext } from "svelte";
+<script>import { onMount, setContext } from "svelte";
 export let separator = "/", gutter = "sm", activeColor = "primary", separatorColor = "outline", userClasses = "";
 export { userClasses as class };
 let breadcrumbElement;

package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte

@@ -5,7 +5,9 @@ import { QIcon } from "../..";
 export let label = "", icon = void 0, tag = "div", to = void 0, href = void 0, activeClass = "q-breadcrumbs__el--active", userClasses = "";
 export { userClasses as class };
 const activeColor = getContext("activeColor");
-const separator = getContext("separator");
+const separator = getContext(
+  "separator"
+);
 $:
   isActive = isRouteActive($Quaff.router, href || to);
 $:
@@ -21,9 +23,7 @@ $:
 </div>
 
 {#if href !== undefined || to !== undefined}
-  <a href={href || to}
-    class="q-breadcrumb__el {activeClasses} {userClasses}"
-  >
+  <a href={href || to} class="q-breadcrumb__el {activeClasses} {userClasses}">
     {#if icon !== undefined}
       <QIcon name={icon} size="1rem" />
     {:else if $$slots.icon}
@@ -35,9 +35,7 @@ $:
     </slot>
   </a>
 {:else}
-  <svelte:element this={tag}
-    class="q-breadcrumb__el {activeClasses} {userClasses}"
-  >
+  <svelte:element this={tag} class="q-breadcrumb__el {activeClasses} {userClasses}">
     {#if icon !== undefined}
       <QIcon name={icon} size="1rem" />
     {:else if $$slots.icon}

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

@@ -1,2 +1,2 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QBreadcrumbsDocs: QComponentDocs;
+export declare const QBreadcrumbsDocs: QComponentDocs;

package/dist/components/breadcrumbs/docs.js

@@ -1,5 +1,5 @@
 import { QBreadcrumbsDocsProps } from "./docs.props";
-export let QBreadcrumbsDocs = {
+export const QBreadcrumbsDocs = {
     name: "QBreadcrumbs",
     description: "Breadcrumbs are mostly used as a navigation aid. They allow users to keep track of their location within the page.",
     docs: {

package/dist/components/button/QBtn.svelte

@@ -29,7 +29,10 @@ function onKeyDown(e) {
 
 <svelte:element
   this={tag}
-  use:ripple={{ disable: noRipple || disable }}
+  use:ripple={{
+    disable: noRipple || disable,
+    color: flat || outline ? undefined : "var(--on-primary)",
+  }}
   bind:this={qBtn}
   aria-disabled={disable || undefined}
   class="q-btn {sizeClass} {userClasses}"

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

@@ -1,2 +1,2 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QBtnDocs: QComponentDocs;
+export declare const QBtnDocs: QComponentDocs;

package/dist/components/button/docs.js

@@ -1,5 +1,5 @@
 import { QBtnDocsProps } from "./docs.props";
-export let QBtnDocs = {
+export const QBtnDocs = {
     name: "QBtn",
     description: "Buttons help users take action, such as sending an email, sharing a document, or liking a comment.",
     docs: {

package/dist/components/button/index.scss

@@ -84,10 +84,15 @@
     width: 100%;
     height: 100%;
     background-color: var(--on-primary);
+    border-radius: inherit;
+  }
+
+  &:is(&--flat, &--outlined):is(:hover, :focus):not([aria-disabled])::after {
+    background-color: var(--on-primary-container);
   }
 
   &:hover:not([aria-disabled])::after {
-    opacity: 0.08;
+    opacity: 0.12;
   }
 
   &:focus:not([aria-disabled])::after {

package/dist/components/card/QCard.svelte

@@ -5,7 +5,7 @@ $:
   color = !fill ? "surface" : colorOptions.includes(fill) ? `${fill}-container` : "surface-variant";
 </script>
 
-<article 
+<article
   class="q-card {color} {userClasses}"
   class:q-card--bordered={bordered}
   class:q-card--flat={flat}

package/dist/components/card/QCardSection.svelte

@@ -5,8 +5,8 @@ export { userClasses as class };
 <div
   class="q-card__section {userClasses}"
   class:q-card__section--horizontal={horizontal}
-  {...$$restProps} 
+  {...$$restProps}
   on:scroll
-  >
+>
   <slot />
 </div>

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

@@ -1,4 +1,4 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QCardDocs: QComponentDocs;
-export declare let QCardSectionDocs: QComponentDocs;
-export declare let QCardActionsDocs: QComponentDocs;
+export declare const QCardDocs: QComponentDocs;
+export declare const QCardSectionDocs: QComponentDocs;
+export declare const QCardActionsDocs: QComponentDocs;

package/dist/components/card/docs.js

@@ -1,5 +1,5 @@
 import { QCardActionsDocsProps, QCardDocsProps, QCardSectionDocsProps } from "./docs.props";
-export let QCardDocs = {
+export const QCardDocs = {
     name: "QCard",
     description: "Cards provide a clean, flexible, and convenient means of displaying a wide variety of content.",
     docs: {
@@ -14,7 +14,7 @@ export let QCardDocs = {
         events: [],
     },
 };
-export let QCardSectionDocs = {
+export const QCardSectionDocs = {
     name: "QCardSection",
     description: "Sections are used to group similar content within a card.",
     docs: {
@@ -29,7 +29,7 @@ export let QCardSectionDocs = {
         events: [],
     },
 };
-export let QCardActionsDocs = {
+export const QCardActionsDocs = {
     name: "QCardActions",
     description: "Actions hold actionable items like buttons within a card.",
     docs: {

package/dist/components/checkbox/QCheckbox.svelte

@@ -2,11 +2,7 @@
 export { userClasses as class };
 </script>
 
-<label 
-  class="q-checkbox {userClasses}"
-  class:q-checkbox--disabled={disable}
-  {...$$restProps}
->
+<label class="q-checkbox {userClasses}" class:q-checkbox--disabled={disable} {...$$restProps}>
   <input type="checkbox" bind:checked={value} disabled={disable} />
   <span>{label}</span>
 </label>

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

@@ -1,2 +1,2 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QCheckboxDocs: QComponentDocs;
+export declare const QCheckboxDocs: QComponentDocs;

package/dist/components/checkbox/docs.js

@@ -1,5 +1,5 @@
 import { QCheckboxDocsProps } from "./docs.props";
-export let QCheckboxDocs = {
+export const QCheckboxDocs = {
     name: "QCheckbox",
     description: "Checkboxes allow the user to select one or more items from a set.",
     docs: {

package/dist/components/chip/QChip.svelte

@@ -30,7 +30,10 @@ function onKeyDown(e) {
 
 <a
   bind:this={qChip}
-  use:ripple={{ disable: noRipple || disable }}
+  use:ripple={{
+    disable: noRipple || disable,
+    color: outlined ? undefined : "var(--on-secondary)",
+  }}
   aria-disabled={disable || undefined}
   class="q-chip {sizeObj.class && sizeObj.class !== 'md'
     ? `q-chip--${sizeObj.class}`

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

@@ -1,2 +1,2 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QChipDocs: QComponentDocs;
+export declare const QChipDocs: QComponentDocs;

package/dist/components/chip/docs.js

@@ -1,5 +1,5 @@
 import { QChipDocsProps } from "./docs.props";
-export let QChipDocs = {
+export const QChipDocs = {
     name: "QChip",
     description: "Chips help people enter information, make selections, filter content, or trigger actions. They represent options in a specific context, unlike buttons, which are persistent.",
     docs: {

package/dist/components/codeBlock/QCodeBlock.svelte

@@ -1,5 +1,7 @@
 <script>import Highlight from "svelte-highlight";
+import { HighlightSvelte } from "svelte-highlight";
 import typescript from "svelte-highlight/languages/typescript";
+import "svelte-highlight/styles/material.css";
 import { copy } from "../../utils";
 import { QBtn } from "../..";
 export let language, code = "/* No code found */", title = void 0, copiable = void 0;
@@ -22,7 +24,7 @@ function setBtn(type) {
   }
 }
 async function copyCode() {
-  await copy(code).catch((_) => {
+  await copy(code).catch(() => {
     setBtn("error");
     setTimeout(() => setBtn("base"), 3e3);
   });
@@ -52,21 +54,15 @@ async function copyCode() {
   {:else if title}
     <h4>{title}</h4>
   {/if}
-  <Highlight language={typescript} {code} />
+  {#if language === "ts"}
+    <Highlight language={typescript} {code} />
+  {:else}
+    <HighlightSvelte {code} />
+  {/if}
 </div>
 
 <style>
   .q-code-block {
     border-radius: 0.5em;
   }
-
-  pre {
-    max-height: 400px;
-    height: 100%;
-    margin: 0;
-  }
-
-  code {
-    white-space: pre-wrap;
-  }
 </style>

package/dist/components/codeBlock/QCodeBlock.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import "svelte-highlight/styles/material.css";
 import type { QCodeBlockProps } from "./props";
 declare const __propDef: {
     props: {

package/dist/components/codeBlock/docs.props.js

@@ -1,9 +1,9 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash c12fedd812ba1e4b4a732b44d9624532
+// @quaffHash ef59d69362e560f4bed408a966ab4acc
 export const QCodeBlockDocsProps = [
     {
         name: "language",
-        type: "string",
+        type: '"ts" | "svelte"',
         optional: false,
         clickableType: false,
         description: "Language to use for highlighting.",

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

@@ -3,7 +3,7 @@ export interface QCodeBlockProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Language to use for highlighting.
      */
-    language: string;
+    language: "ts" | "svelte";
     /**
      * Code to highlight.
      */

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

@@ -1,2 +1,2 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QDialogDocs: QComponentDocs;
+export declare const QDialogDocs: QComponentDocs;

package/dist/components/dialog/docs.js

@@ -1,5 +1,5 @@
 import { QDialogDocsProps } from "./docs.props";
-export let QDialogDocs = {
+export const QDialogDocs = {
     name: "QDialog",
     description: "Dialogs provide important prompts in a user flow.",
     docs: {

package/dist/components/drawer/QDrawer.svelte

@@ -4,13 +4,10 @@ import { clickOutside } from "../../helpers";
 import { createClasses, createStyles } from "../../utils";
 import { getContext } from "svelte";
 import { derived } from "svelte/store";
-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 let value = false, side = "left", width = 300, bordered = false, overlay = false, persistent = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 $:
   canHideOnClickOutside = value === true && persistent === false || overlay === true;
-$:
-  belowBreakpoint = behavior === "mobile" === true || behavior !== "desktop" && /** TODO: Get Layout width */
-  1300 <= breakpoint;
 $:
   widthStyle = !$ctx && useSize(width).style;
 $:

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

@@ -6,16 +6,9 @@ declare const __propDef: {
         value?: QDrawerProps["value"];
         side?: QDrawerProps["side"];
         width?: QDrawerProps["width"];
-        breakpoint?: QDrawerProps["breakpoint"];
-        showIfAbove?: QDrawerProps["showIfAbove"];
-        behavior?: QDrawerProps["behavior"];
         bordered?: QDrawerProps["bordered"];
-        elevated?: QDrawerProps["elevated"];
         overlay?: QDrawerProps["overlay"];
         persistent?: QDrawerProps["persistent"];
-        noSwipeOpen?: QDrawerProps["noSwipeOpen"];
-        noSwipeClose?: QDrawerProps["noSwipeClose"];
-        noSwipeBackdrop?: QDrawerProps["noSwipeBackdrop"];
         class?: string | null | undefined;
         style?: string | null | undefined;
         show?: ((e?: MouseEvent) => void) | undefined;

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

@@ -1,2 +1,2 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QDrawerDocs: QComponentDocs;
+export declare const QDrawerDocs: QComponentDocs;

package/dist/components/drawer/docs.js

@@ -1,5 +1,5 @@
 import { QDrawerDocsProps } from "./docs.props";
-export let QDrawerDocs = {
+export const QDrawerDocs = {
     name: "QDrawer",
     description: "Navigation drawers provide ergonomic access to destinations in an app",
     docs: {

package/dist/components/footer/QFooter.svelte

@@ -21,8 +21,10 @@ $:
   );
 </script>
 
-<footer class={classes} {style}>
-  <nav>
-    <slot />
-  </nav>
-</footer>
+{#if value}
+  <footer class={classes} {style}>
+    <nav>
+      <slot />
+    </nav>
+  </footer>
+{/if}

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

@@ -1,2 +1,2 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QFooterDocs: QComponentDocs;
+export declare const QFooterDocs: QComponentDocs;

package/dist/components/footer/docs.js

@@ -1,5 +1,5 @@
 import { QFooterDocsProps } from "./docs.props";
-export let QFooterDocs = {
+export const QFooterDocs = {
     name: "QFooter",
     description: "Footers can be used to display navigation and key actions at the bottom of the screen.",
     docs: {

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

@@ -1,2 +1,2 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QIconDocs: QComponentDocs;
+export declare const QIconDocs: QComponentDocs;

package/dist/components/icon/docs.js

@@ -1,5 +1,5 @@
 import { QIconDocsProps } from "./docs.props";
-export let QIconDocs = {
+export const QIconDocs = {
     name: "QIcon",
     description: "This component allows you to insert icons within elements of the page. Supported cions are Material Symbols icons.",
     docs: {

package/dist/components/icon/docs.props.js

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 587610290cf9d959dd89496d6b94a98e
+// @quaffHash 3f17452783c0d6c46d1ec71661554ebd
 export const QIconDocsProps = [
     {
         name: "size",
@@ -51,9 +51,9 @@ export const QIconDocsProps = [
     },
     {
         name: "imgAttributes",
-        type: "Record<string, any>",
+        type: "HTMLImgAttributes",
         optional: true,
-        clickableType: true,
+        clickableType: false,
         description: 'Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.',
         default: "{}",
     },

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

@@ -1,5 +1,5 @@
 import type { CssValue, NativeProps, QuaffSizes } from "../../utils";
-import type { HTMLAttributes } from "svelte/elements";
+import type { HTMLAttributes, HTMLImgAttributes } from "svelte/elements";
 export type QIconSizeOptions = QuaffSizes | CssValue | number;
 export type QIconTypeOptions = "outlined" | "sharp" | "rounded";
 export interface QIconProps extends NativeProps, HTMLAttributes<HTMLElement> {
@@ -37,7 +37,7 @@ export interface QIconProps extends NativeProps, HTMLAttributes<HTMLElement> {
      * Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.
      * @default {}
      */
-    imgAttributes?: Record<string, any>;
+    imgAttributes?: HTMLImgAttributes;
     /**
      * The color of the icon.
      * @default undefined

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

@@ -1,2 +1,2 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QInputDocs: QComponentDocs;
+export declare const QInputDocs: QComponentDocs;

package/dist/components/input/docs.js

@@ -1,4 +1,4 @@
-export let QInputDocs = {
+export const QInputDocs = {
     name: "QInput",
     description: "QInput is a form component that allows users to input text. It supports different visual styles such as filled, outlined, and rounded, and it can also display hint text and custom error messages.",
     docs: {

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

@@ -1,2 +1,2 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QLayoutDocs: QComponentDocs;
+export declare const QLayoutDocs: QComponentDocs;

package/dist/components/layout/docs.js

@@ -1,5 +1,5 @@
 import { QLayoutDocsProps } from "./docs.props";
-export let QLayoutDocs = {
+export const QLayoutDocs = {
     name: "QLayout",
     description: "The QLayout component is designed to be the skeleton of the entire page, with navigational elements such as header, railbars, drawers and footer. This component is not mandatory but it really helps structure the page.",
     docs: {

package/dist/components/list/QItemSection.svelte

@@ -9,10 +9,7 @@ $:
   }
 </script>
 
-<div
-  class="q-item__section q-item__section--{type} {userClasses}"
-  {...$$restProps}
->
+<div class="q-item__section q-item__section--{type} {userClasses}" {...$$restProps}>
   {#if type === "content"}
     {#if ![$$slots.headline, $$slots.line2, $$slots.line2, $$slots.line3].some(Boolean)}
       <slot />

package/dist/components/list/QList.svelte

@@ -7,15 +7,16 @@ $:
   setContext("separator", separator === true ? separatorOptions : void 0);
 </script>
 
-<svelte:element 
-  this={tag} 
+<svelte:element
+  this={tag}
   class="q-list {userClasses}"
   class:q-list--bordered={bordered}
   class:q-list--rounded={roundedBorders}
   class:q-list--dense={dense}
   class:q-py-sm={padding}
-  {...$$restProps} 
-  bind:this={listElement} 
-  on:scroll>
+  {...$$restProps}
+  bind:this={listElement}
+  on:scroll
+>
   <slot />
 </svelte:element>

package/dist/components/list/docs.d.ts

@@ -1,2 +1,2 @@
 import type { QComponentDocs } from "../../utils";
-export declare let QListDocs: QComponentDocs;
+export declare const QListDocs: QComponentDocs;

package/dist/components/list/docs.js

@@ -1,5 +1,5 @@
 import { QListDocsProps } from "./docs.props";
-export let QListDocs = {
+export const QListDocs = {
     name: "QList",
     description: "The QList component is used to display a list of items with options for adding text, icons and actions.",
     docs: {

package/dist/components/list/docs.props.js

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 19dd7fe617657229e8599e139a0a55a7
+// @quaffHash 709e51aed5c99e14ee5c52eee28c2998
 export const QSeparatorPropsVertical = [
     {
         name: "spacing",

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

@@ -1,4 +1,4 @@
-import type { UseRouterLinkProps } from "../../composables/use-router-link";
+import type { UseRouterLinkProps } from "../../composables/useRouterLink";
 import type { QSeparatorProps } from "../separator/props";
 import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
 import type { NativeProps } from "../../utils";

package/dist/components/list/props.js

@@ -1,5 +1,5 @@
 import { NativePropsDefaults } from "../../utils";
-import { UseRouterLinkPropsDefaults } from "../../composables/use-router-link";
+import { UseRouterLinkPropsDefaults } from "../../composables/useRouterLink";
 export const QListPropsDefaults = {
     bordered: false,
     roundedBorders: false,

package/dist/components/private/QApi.svelte

@@ -12,10 +12,10 @@
 } from "../..";
 import { capitalize } from "../../utils";
 import Types from "../../utils/types.json";
-export let QComponentDocs;
-let api = QComponentDocs.map((_doc) => "props");
+export let componentDocs;
+let api = componentDocs.map(() => "props");
 let drawer = Object.fromEntries(
-  QComponentDocs.map((doc) => [
+  componentDocs.map((doc) => [
     doc.name,
     Object.fromEntries(
       doc.docs.props.map((prop) => [prop.name, prop.clickableType ? false : void 0])
@@ -53,7 +53,7 @@ function handleDrawer(QDocument, doc, e) {
 }
 </script>
 
-{#each QComponentDocs as QDocument, index}
+{#each componentDocs as QDocument, index}
   <QCard class="q-px-none q-pb-none q-mt-lg">
     <div slot="title" class="flex justify-between items-center q-px-md">
       <h5 class="no-margin">
@@ -92,7 +92,7 @@ function handleDrawer(QDocument, doc, e) {
                   {#if isProp(doc, index)}
                     {doc.optional ? "?" : ""}
                     {#if doc.clickableType === true}
-                      <!-- svelte-ignore a11y-click-events-have-key-events -->
+                      <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
                       <span
                         class="prop-type clickable"
                         on:click={(e) => isProp(doc, index) && handleDrawer(QDocument, doc, e)}
@@ -113,6 +113,7 @@ function handleDrawer(QDocument, doc, e) {
                 </span>
               </div>
               <div slot="line1" class="q-mt-sm prop-description" style="white-space: normal;">
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                 {@html doc.description}
               </div>
             </QItemSection>
@@ -130,8 +131,14 @@ function handleDrawer(QDocument, doc, e) {
   color: var(--primary);
 }
 
-.q-item {
-  overflow: visible;
+.prop-type {
+  opacity: 0.75;
+}
+.prop-type.clickable {
+  cursor: pointer;
+}
+.prop-type.clickable:hover {
+  opacity: 1;
 }
 
 :global(.q-drawer.api-drawer pre) {