@quaffui/quaff 0.1.0-prealpha20 → 0.1.0-prealpha22

package/dist/components/avatar/QAvatar.svelte

@@ -2,6 +2,8 @@
 
 <script lang="ts">
   import { useSize } from "../../composables/useSize";
+  import type { QAvatarProps } from "./props";
+
   let {
     alt,
     shape = "circle",
@@ -11,7 +13,8 @@
     children,
     videoAccessibility,
     ...props
-  } = $props();
+  }: QAvatarProps = $props();
+
   const qSize = $derived(useSize(size, "q-avatar"));
   const qShape = $derived(`q-avatar--${shape}`);
 </script>

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

@@ -1,3 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
 import type { QAvatarProps } from "./props";
-declare const QAvatar: import("svelte").Component<QAvatarProps, {}, "">;
-export default QAvatar;
+declare const __propDef: {
+    props: QAvatarProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QAvatarProps_ = typeof __propDef.props;
+export { QAvatarProps_ as QAvatarProps };
+export type QAvatarEvents = typeof __propDef.events;
+export type QAvatarSlots = typeof __propDef.slots;
+export default class QAvatar extends SvelteComponentTyped<QAvatarProps_, QAvatarEvents, QAvatarSlots> {
+}

package/dist/components/breadcrumbs/QBreadcrumbs.svelte

@@ -2,6 +2,8 @@
 
 <script lang="ts">
   import { setContext, untrack } from "svelte";
+  import type { QBreadcrumbsProps } from "./props";
+
   let {
     activeColor = "primary",
     gutter = "sm",
@@ -9,11 +11,14 @@
     separatorColor = "outline",
     children,
     ...props
-  } = $props();
-  let breadrumbElement;
+  }: QBreadcrumbsProps = $props();
+
+  let breadrumbElement: HTMLDivElement;
+
   $effect(() => {
     untrack(() => breadrumbElement.firstChild?.remove());
   });
+
   setContext("activeColor", activeColor);
   setContext("separator", { type: separator, color: separatorColor, gutter });
 </script>

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

@@ -1,3 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
 import type { QBreadcrumbsProps } from "./props";
-declare const QBreadcrumbs: import("svelte").Component<QBreadcrumbsProps, {}, "">;
-export default QBreadcrumbs;
+declare const __propDef: {
+    props: QBreadcrumbsProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QBreadcrumbsProps_ = typeof __propDef.props;
+export { QBreadcrumbsProps_ as QBreadcrumbsProps };
+export type QBreadcrumbsEvents = typeof __propDef.events;
+export type QBreadcrumbsSlots = typeof __propDef.slots;
+export default class QBreadcrumbs extends SvelteComponentTyped<QBreadcrumbsProps_, QBreadcrumbsEvents, QBreadcrumbsSlots> {
+}

package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte

@@ -1,10 +1,13 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  import { getContext } from "svelte";
+  import { getContext, type Snippet } from "svelte";
   import { derived } from "svelte/store";
   import { isRouteActive } from "../../utils/router";
   import QIcon from "../icon/QIcon.svelte";
+  import type { MaterialSymbol } from "material-symbols";
+  import type { QBreadcrumbsElProps } from "./props";
+
   let {
     activeClass = "active",
     href,
@@ -14,11 +17,19 @@
     to,
     children = fallback,
     ...props
-  } = $props();
-  const activeColor = getContext("activeColor");
-  const separator = getContext("separator");
+  }: QBreadcrumbsElProps = $props();
+
+  const activeColor = getContext<string>("activeColor");
+  const separator = getContext<{
+    type: `icon:${MaterialSymbol}` | Snippet;
+    color: string;
+    gutter: string;
+  }>("separator");
+
   const classesIfActive = derived(isRouteActive, ($isRouteActive) =>
-    $isRouteActive(href || to) ? `${activeClass} text-${activeColor}` : void 0,
+    $isRouteActive(href || to)
+      ? `${activeClass} text-${activeColor}`
+      : undefined,
   );
 </script>
 

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

@@ -1,3 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
 import type { QBreadcrumbsElProps } from "./props";
-declare const QBreadcrumbsEl: import("svelte").Component<QBreadcrumbsElProps, {}, "">;
-export default QBreadcrumbsEl;
+declare const __propDef: {
+    props: QBreadcrumbsElProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QBreadcrumbsElProps_ = typeof __propDef.props;
+export { QBreadcrumbsElProps_ as QBreadcrumbsElProps };
+export type QBreadcrumbsElEvents = typeof __propDef.events;
+export type QBreadcrumbsElSlots = typeof __propDef.slots;
+export default class QBreadcrumbsEl extends SvelteComponentTyped<QBreadcrumbsElProps_, QBreadcrumbsElEvents, QBreadcrumbsElSlots> {
+}

package/dist/components/button/QBtn.svelte

@@ -5,11 +5,19 @@
   import { useSize } from "../../composables/useSize";
   import { ripple } from "../../helpers";
   import { isActivationKey } from "../../utils";
+  import type { QEvent } from "../../utils";
   import { extractImgSrc } from "../../utils/string";
   import QIcon from "../icon/QIcon.svelte";
+  import type { MaterialSymbol } from "material-symbols";
+  import type { QBtnVariantOptions, QBtnProps } from "./props";
+
   let {
     disabled = false,
-    design = "elevated",
+    variant,
+    filled = false,
+    tonal = false,
+    outlined = false,
+    flat = false,
     icon,
     label,
     loading = false,
@@ -24,35 +32,77 @@
     onclick,
     children,
     ...props
-  } = $props();
-  let qBtn;
+  }: QBtnProps = $props();
+
+  let qBtn: HTMLButtonElement | HTMLAnchorElement;
+
+  type QBtnMouseEvent = QEvent<MouseEvent, typeof qBtn>;
+
   const tag = $derived(to ? "a" : "button");
   const qSize = $derived(useSize(size, "q-btn"));
+
   const src = $derived(extractImgSrc(icon));
-  const color = $derived(
-    `var(--${design === "filled" ? "on-primary" : design === "tonal" ? "on-secondary-container" : "primary"})`,
+
+  const variants: Partial<Record<QBtnVariantOptions, boolean>> = {
+    filled,
+    tonal,
+    outlined,
+    flat,
+  };
+
+  const boolVariant = $derived(
+    (Object.keys(variants) as QBtnVariantOptions[]).find(
+      (key) => variants[key],
+    ),
+  );
+
+  const finalVariant = $derived<QBtnVariantOptions>(
+    variant || boolVariant || "elevated",
   );
+
+  const color = $derived.by(() => {
+    if (finalVariant === "filled") {
+      return "on-primary";
+    }
+
+    if (finalVariant === "tonal") {
+      return "on-secondary-container";
+    }
+
+    return "primary";
+  });
+
+  const colorVar = $derived(`var(--${color})`);
+
   const rippleColorVar = $derived(
-    rippleColor ? `var(--${rippleColor}, ${rippleColor})` : color,
+    rippleColor ? `var(--${rippleColor}, ${rippleColor})` : colorVar,
   );
-  function stopIfDisabled(e) {
+
+  function stopIfDisabled(e: QBtnMouseEvent) {
     if (disabled) {
       e.preventDefault();
       e.stopImmediatePropagation();
       return;
     }
+
     onclick?.(e);
   }
-  function onkeydown(e) {
+
+  function onkeydown(e: KeyboardEvent) {
     if (e.key === "Escape") {
       qBtn?.blur();
       return;
     }
+
     if (!isActivationKey(e)) {
       return;
     }
+
     e.preventDefault();
-    const click = new MouseEvent("click", { relatedTarget: qBtn });
+
+    const click = new MouseEvent("click", {
+      relatedTarget: qBtn,
+    }) as QBtnMouseEvent;
     stopIfDisabled(click);
   }
 </script>
@@ -67,12 +117,12 @@
   {...props}
   class="q-btn{qSize.class ? ` ${qSize.class}` : ''}{props.class
     ? ` ${props.class}`
-    : ''} q-btn--{design}"
+    : ''} q-btn--{finalVariant}"
   class:q-btn--unelevated={unelevated}
   class:q-btn--rectangle={rectangle}
   class:q-btn--round={round || (!children && !label)}
   style:--q-btn-size={qSize.style}
-  style:--ripple-color={color}
+  style:--ripple-color={colorVar}
   {target}
   role={tag === "a" ? "button" : undefined}
   aria-disabled={disabled || undefined}

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

@@ -1,3 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
 import type { QBtnProps } from "./props";
-declare const QBtn: import("svelte").Component<QBtnProps, {}, "">;
-export default QBtn;
+declare const __propDef: {
+    props: QBtnProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QBtnProps_ = typeof __propDef.props;
+export { QBtnProps_ as QBtnProps };
+export type QBtnEvents = typeof __propDef.events;
+export type QBtnSlots = typeof __propDef.slots;
+export default class QBtn extends SvelteComponentTyped<QBtnProps_, QBtnEvents, QBtnSlots> {
+}

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 8658ff9566d68f27112f5c6ff5b97a54
+// @quaffHash 0be24e79cccd1bb68f94fa2bcb3fd8ff
 export const QBtnDocsProps = [
     {
         name: "disabled",
@@ -10,12 +10,44 @@ export const QBtnDocsProps = [
         default: "false",
     },
     {
-        name: "design",
-        type: "QBtnDesignOptions",
+        name: "variant",
+        type: "QBtnVariantOptions",
         optional: true,
         clickableType: true,
-        description: "Choose the design for the button.",
-        default: '"elevated"',
+        description: "Choose the variant for the button. If a variant is specified, it overwrites all other variants defined with boolean attributes. If no variant is specified using this prop or boolean props, the `elevated` variant will be used.",
+        default: "undefined",
+    },
+    {
+        name: "filled",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: 'Equivalent to `variant="filled"`. Overwritten by `variant` but overwrites `tonal`, `outlined` and `flat`.',
+        default: "false",
+    },
+    {
+        name: "tonal",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: 'Equivalent to `variant="tonal"`. Overwritten by `variant` and `filled` but overwrites `outlined` and `flat`.',
+        default: "false",
+    },
+    {
+        name: "outlined",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: 'Equivalent to `variant="outlined"`. Overwritten by `variant`, `filled` and `tonal` but overwrites `flat`.',
+        default: "false",
+    },
+    {
+        name: "flat",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: 'Equivalent to `variant="flat"`. Overwritten by any other variant if defined with the `variant` prop or other boolean variant props.',
+        default: "false",
     },
     {
         name: "icon",

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

@@ -1,7 +1,7 @@
 import type { MaterialSymbol } from "material-symbols";
 import type { HTMLAttributes, HTMLAnchorAttributes, MouseEventHandler } from "svelte/elements";
 export type QBtnSizeOptions = Exclude<Q.Size, "xs">;
-export type QBtnDesignOptions = "elevated" | "filled" | "tonal" | "outlined" | "flat";
+export type QBtnVariantOptions = "elevated" | "filled" | "tonal" | "outlined" | "flat";
 export interface QBtnProps extends HTMLAttributes<HTMLButtonElement> {
     /**
      * Puts the button in a disabled state, making it unclickable.
@@ -9,10 +9,30 @@ export interface QBtnProps extends HTMLAttributes<HTMLButtonElement> {
      */
     disabled?: boolean;
     /**
-     * Choose the design for the button.
-     * @default "elevated"
+     * Choose the variant for the button. If a variant is specified, it overwrites all other variants defined with boolean attributes. If no variant is specified using this prop or boolean props, the `elevated` variant will be used.
+     * @default undefined
+     */
+    variant?: QBtnVariantOptions;
+    /**
+     * Equivalent to `variant="filled"`. Overwritten by `variant` but overwrites `tonal`, `outlined` and `flat`.
+     * @default false
+     */
+    filled?: boolean;
+    /**
+     * Equivalent to `variant="tonal"`. Overwritten by `variant` and `filled` but overwrites `outlined` and `flat`.
+     * @default false
+     */
+    tonal?: boolean;
+    /**
+     * Equivalent to `variant="outlined"`. Overwritten by `variant`, `filled` and `tonal` but overwrites `flat`.
+     * @default false
+     */
+    outlined?: boolean;
+    /**
+     * Equivalent to `variant="flat"`. Overwritten by any other variant if defined with the `variant` prop or other boolean variant props.
+     * @default false
      */
-    design?: QBtnDesignOptions;
+    flat?: boolean;
     /**
      * Name of the leading icon to use for the button.
      * @default undefined

package/dist/components/card/QCard.svelte

@@ -1,6 +1,8 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
+  import type { QCardProps } from "./props";
+
   let {
     fill = false,
     flat = false,
@@ -8,8 +10,10 @@
     rounded = false,
     children,
     ...props
-  } = $props();
-  const colorOptions = ["primary", "secondary", "tertiary"];
+  }: QCardProps = $props();
+
+  const colorOptions: (typeof fill)[] = ["primary", "secondary", "tertiary"];
+
   const color = $derived.by(() => {
     if (fill) {
       return colorOptions.includes(fill)

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

@@ -1,3 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
 import type { QCardProps } from "./props";
-declare const QCard: import("svelte").Component<QCardProps, {}, "">;
-export default QCard;
+declare const __propDef: {
+    props: QCardProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QCardProps_ = typeof __propDef.props;
+export { QCardProps_ as QCardProps };
+export type QCardEvents = typeof __propDef.events;
+export type QCardSlots = typeof __propDef.slots;
+export default class QCard extends SvelteComponentTyped<QCardProps_, QCardEvents, QCardSlots> {
+}

package/dist/components/card/QCardActions.svelte

@@ -2,7 +2,15 @@
 
 <script lang="ts">
   import { useAlign } from "../../composables/useAlign";
-  let { align, vertical = false, children, ...props } = $props();
+  import type { QCardActionsProps } from "./props";
+
+  let {
+    align,
+    vertical = false,
+    children,
+    ...props
+  }: QCardActionsProps = $props();
+
   const alignClass = $derived(useAlign(align));
 </script>
 

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

@@ -1,3 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
 import type { QCardActionsProps } from "./props";
-declare const QCardActions: import("svelte").Component<QCardActionsProps, {}, "">;
-export default QCardActions;
+declare const __propDef: {
+    props: QCardActionsProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QCardActionsProps_ = typeof __propDef.props;
+export { QCardActionsProps_ as QCardActionsProps };
+export type QCardActionsEvents = typeof __propDef.events;
+export type QCardActionsSlots = typeof __propDef.slots;
+export default class QCardActions extends SvelteComponentTyped<QCardActionsProps_, QCardActionsEvents, QCardActionsSlots> {
+}

package/dist/components/card/QCardSection.svelte

@@ -1,7 +1,9 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-  let { horizontal = false, children, ...props } = $props();
+  import type { QCardSectionProps } from "./props";
+
+  let { horizontal = false, children, ...props }: QCardSectionProps = $props();
 </script>
 
 <div

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

@@ -1,3 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
 import type { QCardSectionProps } from "./props";
-declare const QCardSection: import("svelte").Component<QCardSectionProps, {}, "">;
-export default QCardSection;
+declare const __propDef: {
+    props: QCardSectionProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QCardSectionProps_ = typeof __propDef.props;
+export { QCardSectionProps_ as QCardSectionProps };
+export type QCardSectionEvents = typeof __propDef.events;
+export type QCardSectionSlots = typeof __propDef.slots;
+export default class QCardSection extends SvelteComponentTyped<QCardSectionProps_, QCardSectionEvents, QCardSectionSlots> {
+}

package/dist/components/checkbox/QCheckbox.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
-  let { value = $bindable(), label = "", disable = false, ...props } = $props();
+  import type { QCheckboxProps } from "./props";
+
+  let {
+    value = $bindable(),
+    label = "",
+    disable = false,
+    ...props
+  }: QCheckboxProps = $props();
 </script>
 
 <label

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

@@ -1,3 +1,14 @@
-import type { QCheckboxProps } from "./props";
-declare const QCheckbox: import("svelte").Component<QCheckboxProps, {}, "value">;
-export default QCheckbox;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QCheckboxProps_ = typeof __propDef.props;
+export { QCheckboxProps_ as QCheckboxProps };
+export type QCheckboxEvents = typeof __propDef.events;
+export type QCheckboxSlots = typeof __propDef.slots;
+export default class QCheckbox extends SvelteComponentTyped<QCheckboxProps_, QCheckboxEvents, QCheckboxSlots> {
+}

package/dist/components/chip/QChip.svelte

@@ -2,6 +2,12 @@
   import { ripple } from "../../helpers";
   import { extractImgSrc, isActivationKey } from "../../utils";
   import { QAvatar, QIcon } from "../..";
+  import type { QEvent } from "../../utils";
+  import type { MaterialSymbol } from "material-symbols";
+  import type { QChipProps } from "./props";
+
+  type QChipMouseEvent = QEvent<MouseEvent, HTMLDivElement>;
+
   let {
     kind = "assist",
     label,
@@ -10,56 +16,71 @@
     disabled = false,
     elevated,
     noRipple = false,
-    selected = $bindable(kind === "filter" ? false : void 0),
+    selected = $bindable(kind === "filter" ? false : undefined),
     size = "sm",
     children,
     ...props
-  } = $props();
-  let qChip;
+  }: QChipProps = $props();
+
+  let qChip: HTMLDivElement;
+
   $effect.pre(() => {
-    if (selected !== void 0 && kind !== "filter") {
+    if (selected !== undefined && kind !== "filter") {
       throw new Error(
         'Only QChips of kind "filter" can use the "selected" prop.',
       );
     }
+
     if ((kind === "assist" || kind === "suggestion") && trailingIcon) {
       console.warn(
         'QChips of kind "assist" and "suggestion" should not have a trailing icon. It will thus be ignored.',
       );
     }
   });
+
   const trailing = $derived(
     (kind === "assist" || kind === "suggestion") && trailingIcon
-      ? void 0
+      ? undefined
       : trailingIcon,
   );
+
   const tabindex = disabled ? -1 : props.tabindex || 0;
   const role = $derived(
-    ["assist", "filter"].includes(kind) ? "button" : void 0,
+    ["assist", "filter"].includes(kind) ? "button" : undefined,
   );
+
   const avatar = $derived(extractImgSrc(icon));
-  function stopIfDisabled(e) {
+
+  function stopIfDisabled(e: QChipMouseEvent) {
     if (disabled) {
       e.preventDefault();
       e.stopImmediatePropagation();
       return;
     }
+
     if (kind === "filter") {
       selected = !selected;
     }
+
     e.stopPropagation();
     props.onclick?.(e);
   }
-  function onkeydown(e) {
+
+  function onkeydown(e: KeyboardEvent) {
     if (e.key === "Escape") {
       qChip?.blur();
       return;
     }
+
     if (!isActivationKey(e)) {
       return;
     }
+
     e.preventDefault();
-    const click = new MouseEvent("click", { relatedTarget: qChip });
+
+    const click = new MouseEvent("click", {
+      relatedTarget: qChip,
+    }) as QChipMouseEvent;
     stopIfDisabled(click);
   }
 </script>

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

@@ -1,3 +1,14 @@
-import type { QChipProps } from "./props";
-declare const QChip: import("svelte").Component<QChipProps, {}, "selected">;
-export default QChip;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QChipProps_ = typeof __propDef.props;
+export { QChipProps_ as QChipProps };
+export type QChipEvents = typeof __propDef.events;
+export type QChipSlots = typeof __propDef.slots;
+export default class QChip extends SvelteComponentTyped<QChipProps_, QChipEvents, QChipSlots> {
+}