@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha21

package/dist/components/avatar/index.scss

@@ -1,9 +1,14 @@
+@use "$css/variables";
+
 //? Basic styles
 .q-avatar {
   object-fit: cover;
   object-position: center;
   aspect-ratio: 1;
-  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
+  transition:
+    variables.$speed3 transform,
+    variables.$speed3 border-radius,
+    variables.$speed3 padding;
   border-radius: 0;
 
   display: flex;

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

@@ -1,25 +1,43 @@
-import type { NativeProps } from "../../utils/types";
+import type { Snippet } from "svelte";
+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 = "xs" | "sm" | "md" | "lg" | "xl" | string;
-export interface QAvatarProps extends NativeProps {
+export type QAvatarSizeOptions = Q.Size | Q.CssValue | number;
+export interface QAvatarProps extends HTMLAttributes<HTMLElement> {
     /**
      * Shape of the avatar.
-     * @default circle
+     *
+     * @default "circle"
      */
     shape?: QAvatarShapeOptions;
     /**
      * Size of the avatar, can be a custom size using CSS units. If no unit is specified, "px" will be used.
-     * @default md
+     *
+     * @default "md"
      */
     size?: QAvatarSizeOptions;
     /**
-     * Source of the image to use as the avatar. Can be a url or a path to a local file.
+     * Source of the image to be used as the avatar. Can be a url or a path to a local file.
+     *
      * @default undefined
      */
     src?: string;
     /**
-     * If set to true, will use the "src" prop as a video source.
+     * If set to true, the "src" prop will be used as a video source.
+     *
      * @default false
      */
     video?: boolean;
+    /**
+     * alt property for the image.
+     *
+     * @default undefined
+     */
+    alt?: string;
+    /**
+     * Accessibility controls you might want to add inside the <video> element.
+     * For example, you might want to add a <p> tag in case the video player doesn't work.
+     *
+     * @default undefined
+     */
+    videoAccessibility?: Snippet;
 }

package/dist/components/avatar/props.js

@@ -1 +1 @@
-import "$lib/utils/types";
+export {};

package/dist/components/breadcrumbs/QBreadcrumbs.scss

@@ -0,0 +1,10 @@
+.q-breadcrumbs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+
+  & > .q-breadcrumbs__separator:first-child {
+    display: none;
+  }
+}

package/dist/components/breadcrumbs/QBreadcrumbs.svelte

@@ -1,18 +1,27 @@
-<script>import { createClasses } from "../../utils/props";
-import { onMount, setContext } from "svelte";
-export let separator = "/", gutter = "sm", activeColor = "primary", separatorColor = "outline", userClasses = void 0;
-export { userClasses as class };
-let breadcrumbElement;
-onMount(() => breadcrumbElement.firstChild?.remove());
-setContext("activeColor", activeColor);
-setContext("separator", { type: separator, color: separatorColor, gutter });
-$:
-  classes = createClasses([], {
-    component: "q-breadcrumbs",
-    userClasses
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { setContext, untrack } from "svelte";
+  let {
+    activeColor = "primary",
+    gutter = "sm",
+    separator = "/",
+    separatorColor = "outline",
+    children,
+    ...props
+  } = $props();
+  let breadrumbElement;
+  $effect(() => {
+    untrack(() => breadrumbElement.firstChild?.remove());
   });
+  setContext("activeColor", activeColor);
+  setContext("separator", { type: separator, color: separatorColor, gutter });
 </script>
 
-<div class={classes} bind:this={breadcrumbElement}>
-  <slot />
+<div
+  bind:this={breadrumbElement}
+  {...props}
+  class="q-breadcrumbs{props.class ? ` ${props.class}` : ''}"
+>
+  {@render children?.()}
 </div>

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

@@ -1,23 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QBreadcrumbsProps } from "./props";
-declare const __propDef: {
-    props: {
-        separator?: QBreadcrumbsProps["separator"];
-        gutter?: QBreadcrumbsProps["gutter"];
-        activeColor?: QBreadcrumbsProps["activeColor"];
-        separatorColor?: QBreadcrumbsProps["separatorColor"];
-        class?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-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 SvelteComponent<QBreadcrumbsProps, QBreadcrumbsEvents, QBreadcrumbsSlots> {
-}
+declare const QBreadcrumbs: import("svelte").Component<QBreadcrumbsProps, {}, "">;
+export default QBreadcrumbs;

package/dist/components/breadcrumbs/QBreadcrumbsEl.scss

@@ -0,0 +1,10 @@
+@use "$css/mixins";
+
+.q-breadcrumbs__el {
+  display: flex;
+  align-items: center;
+
+  & > .q-icon {
+    @include mixins.margin("r-sm");
+  }
+}

package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte

@@ -1,59 +1,75 @@
-<script>import { getContext } from "svelte";
-import QIcon from "../icon/QIcon.svelte";
-import { createClasses } from "../../utils/props";
-import { isRouteActive } from "../../composables/use-router-link";
-import { Quaff } from "../../stores/Quaff";
-export let label = "", icon = void 0, tag = "div", to = void 0, href = void 0, activeClass = "active", userClasses = void 0;
-export { userClasses as class };
-const activeColor = getContext("activeColor");
-const separator = getContext("separator");
-$:
-  isActive = isRouteActive($Quaff.router, href || to);
-$:
-  classes = createClasses([isActive && activeClass], {
-    component: "q-breadcrumbs",
-    element: "el",
-    quaffClasses: [isActive && `${activeColor}-text`],
-    userClasses
-  });
-$:
-  separatorClasses = createClasses([], {
-    component: "q-breadcrumbs",
-    element: "separator",
-    quaffClasses: [`q-px-${separator.gutter}`]
-  });
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { derived } from "svelte/store";
+  import { isRouteActive } from "../../utils/router";
+  import QIcon from "../icon/QIcon.svelte";
+  let {
+    activeClass = "active",
+    href,
+    label = "",
+    icon,
+    tag = "div",
+    to,
+    children = fallback,
+    ...props
+  } = $props();
+  const activeColor = getContext("activeColor");
+  const separator = getContext("separator");
+  const classesIfActive = derived(isRouteActive, ($isRouteActive) =>
+    $isRouteActive(href || to) ? `${activeClass} text-${activeColor}` : void 0,
+  );
 </script>
 
-<div class={separatorClasses}>
-  {#if separator.type.startsWith("icon:")}
-    <QIcon name={separator.type.replace("icon:", "")} size="1rem" />
+{#snippet fallback()}
+  {label}
+{/snippet}
+
+{#snippet breadcrumbEl()}
+  {#if icon !== undefined}
+    {#if typeof icon === "string"}
+      <QIcon name={icon} size="1rem" />
+    {:else}
+      {@render icon()}
+    {/if}
+  {/if}
+
+  {@render children()}
+{/snippet}
+
+<div
+  {...props}
+  class="q-breadcrumbs__separator q-px-{separator.gutter}{props.class
+    ? ` ${props.class}`
+    : ''}"
+>
+  {#if typeof separator.type === "string"}
+    {#if separator.type.startsWith("icon:")}
+      <QIcon
+        name={separator.type.replace("icon:", "") as MaterialSymbol}
+        size="1rem"
+      />
+    {:else}
+      {separator.type}
+    {/if}
   {:else}
-    {separator.type}
+    {@render separator.type()}
   {/if}
 </div>
 
 {#if href !== undefined || to !== undefined}
-  <a href={href || to} class={classes}>
-    {#if icon !== undefined}
-      <QIcon name={icon} size="1rem" />
-    {:else if $$slots.icon}
-      <slot name="icon" />
-    {/if}
-
-    <slot>
-      {label}
-    </slot>
+  <a
+    href={href || to}
+    class="q-breadcrumbs__el{$classesIfActive ? ` ${$classesIfActive}` : ''}"
+  >
+    {@render breadcrumbEl()}
   </a>
 {:else}
-  <svelte:element this={tag} class={classes}>
-    {#if icon !== undefined}
-      <QIcon name={icon} size="1rem" />
-    {:else if $$slots.icon}
-      <slot name="icon" />
-    {/if}
-
-    <slot>
-      {label}
-    </slot>
+  <svelte:element
+    this={tag}
+    class="q-breadcrumbs__el{$classesIfActive ? ` ${$classesIfActive}` : ''}"
+  >
+    {@render breadcrumbEl()}
   </svelte:element>
 {/if}

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

@@ -1,26 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QBreadcrumbsElProps } from "./props";
-declare const __propDef: {
-    props: {
-        label?: QBreadcrumbsElProps["label"];
-        icon?: QBreadcrumbsElProps["icon"];
-        tag?: QBreadcrumbsElProps["tag"];
-        to?: QBreadcrumbsElProps["to"];
-        href?: QBreadcrumbsElProps["href"];
-        activeClass?: QBreadcrumbsElProps["activeClass"];
-        class?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        icon: {};
-        default: {};
-    };
-};
-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 SvelteComponent<QBreadcrumbsElProps, QBreadcrumbsElEvents, QBreadcrumbsElSlots> {
-}
+declare const QBreadcrumbsEl: import("svelte").Component<QBreadcrumbsElProps, {}, "">;
+export default QBreadcrumbsEl;

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

@@ -1,2 +1,2 @@
-import type { QComponentDocs } from "$utils/types";
-export declare let QBreadcrumbsDocs: QComponentDocs;
+import type { QComponentDocs } from "../../utils";
+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/breadcrumbs/docs.props.js

@@ -1,11 +1,13 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 66c85971b241303d63478c8c8bca6aa0
 export const QBreadcrumbsDocsProps = [
     {
-        name: "separator",
+        name: "activeColor",
         type: "string",
         optional: true,
         clickableType: false,
-        description: 'Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.',
-        default: "/",
+        description: "Color to use for the active breadcrumb element. See <link to colors docs> to see what colors can be used.",
+        default: '"primary"',
     },
     {
         name: "gutter",
@@ -13,15 +15,15 @@ export const QBreadcrumbsDocsProps = [
         optional: true,
         clickableType: true,
         description: "Space around separators.",
-        default: "sm",
+        default: '"sm"',
     },
     {
-        name: "activeColor",
-        type: "string",
+        name: "separator",
+        type: "string | `icon:${MaterialSymbol}` | Snippet",
         optional: true,
-        clickableType: false,
-        description: "Color to use for the active breadcrumb element. See <link to colors docs> to see what colors can be used.",
-        default: "primary",
+        clickableType: true,
+        description: 'Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.',
+        default: '"/"',
     },
     {
         name: "separatorColor",
@@ -29,56 +31,56 @@ export const QBreadcrumbsDocsProps = [
         optional: true,
         clickableType: false,
         description: "Color to use for the separators. See <link to colors docs> to see what colors can be used.",
-        default: "outline",
+        default: '"outline"',
     },
 ];
 export const QBreadcrumbsElDocsProps = [
     {
-        name: "label",
+        name: "activeClass",
         type: "string",
         optional: true,
         clickableType: false,
-        description: "Text to use for the breadcrumb element. If default slot is defined, the label will be overwritten by it.",
-        default: '""',
+        description: "Class to apply to the breadcrumb element when the route is active.",
+        default: '"active"',
     },
     {
         name: "icon",
-        type: "string",
+        type: "MaterialSymbol | Snippet",
         optional: true,
-        clickableType: false,
+        clickableType: true,
         description: "Name of the leading icon for the breadcrumb element. The icon prop overwrites to icon slot.",
         default: "undefined",
     },
     {
-        name: "tag",
+        name: "label",
         type: "string",
         optional: true,
         clickableType: false,
-        description: "Tag to use for the breadcrumb element.",
-        default: '"div"',
+        description: "Text to use for the breadcrumb element. If default slot is defined, the label will be overwritten by it.",
+        default: '""',
     },
     {
-        name: "to",
+        name: "href",
         type: "string",
         optional: true,
         clickableType: false,
-        description: 'Makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")',
+        description: 'Also makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")',
         default: "undefined",
     },
     {
-        name: "href",
+        name: "tag",
         type: "string",
         optional: true,
         clickableType: false,
-        description: 'Also makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")',
-        default: "undefined",
+        description: "Tag to use for the breadcrumb element.",
+        default: '"div"',
     },
     {
-        name: "activeClass",
+        name: "to",
         type: "string",
         optional: true,
         clickableType: false,
-        description: "Class to apply to the breadcrumb element when the route is active.",
-        default: '"active"',
+        description: 'Makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")',
+        default: "undefined",
     },
 ];

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

@@ -1,38 +1,50 @@
-import type { NativeProps } from "../../utils/types";
-export type QBreadcrumbsGutterOptions = "none" | "sm" | "md" | "lg";
-export interface QBreadcrumbsProps extends NativeProps {
+import type { MaterialSymbol } from "material-symbols";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type QBreadcrumbsGutterOptions = Exclude<Q.Size, "xs" | "xl">;
+export interface QBreadcrumbsProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.
-     * @default /
+     * Color to use for the active breadcrumb element. See <link to colors docs> to see what colors can be used.
+     * @default "primary"
      */
-    separator?: string;
+    activeColor?: string;
     /**
      * Space around separators.
-     * @default sm
+     * @default "sm"
      */
     gutter?: QBreadcrumbsGutterOptions;
     /**
-     * Color to use for the active breadcrumb element. See <link to colors docs> to see what colors can be used.
-     * @default primary
+     * Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.
+     * @default "/"
      */
-    activeColor?: string;
+    separator?: string | `icon:${MaterialSymbol}` | Snippet;
     /**
      * Color to use for the separators. See <link to colors docs> to see what colors can be used.
-     * @default outline
+     * @default "outline"
      */
     separatorColor?: string;
 }
-export interface QBreadcrumbsElProps extends NativeProps {
+export interface QBreadcrumbsElProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Class to apply to the breadcrumb element when the route is active.
+     * @default "active"
+     */
+    activeClass?: string;
+    /**
+     * Name of the leading icon for the breadcrumb element. The icon prop overwrites to icon slot.
+     * @default undefined
+     */
+    icon?: MaterialSymbol | Snippet;
     /**
      * Text to use for the breadcrumb element. If default slot is defined, the label will be overwritten by it.
      * @default ""
      */
     label?: string;
     /**
-     * Name of the leading icon for the breadcrumb element. The icon prop overwrites to icon slot.
+     * Also makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")
      * @default undefined
      */
-    icon?: string;
+    href?: string;
     /**
      * Tag to use for the breadcrumb element.
      * @default "div"
@@ -43,14 +55,4 @@ export interface QBreadcrumbsElProps extends NativeProps {
      * @default undefined
      */
     to?: string;
-    /**
-     * Also makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")
-     * @default undefined
-     */
-    href?: string;
-    /**
-     * Class to apply to the breadcrumb element when the route is active.
-     * @default "active"
-     */
-    activeClass?: string;
 }

package/dist/components/button/QBtn.scss

@@ -0,0 +1,133 @@
+@use "$css/mixins";
+@use "$css/variables";
+@use "$css/disabled";
+
+@layer q-btn {
+  .q-btn {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0 0.5rem;
+    padding: 0 1.5rem;
+
+    box-sizing: content-box;
+    border: none;
+    outline: inherit;
+
+    background-color: transparent;
+    color: var(--ripple-color);
+
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: normal;
+
+    cursor: pointer;
+    user-select: none;
+    text-decoration: none;
+
+    transition:
+      variables.$speed3 transform,
+      variables.$speed3 border-radius,
+      variables.$speed3 padding;
+
+    @include mixins.btn-image;
+
+    $sizeMap: (
+      "sm": -1,
+      "md": 0,
+      "lg": 1,
+      "xl": 2,
+    );
+    @each $size, $val in $sizeMap {
+      &--#{$size} {
+        height: 2.5rem + 0.5 * $val;
+        min-width: 2.5rem + 0.5 * $val;
+
+        border-radius: 1.25rem + 0.25 * $val;
+
+        font-size: 1rem + 0.125 * $val;
+      }
+    }
+
+    &:not([aria-disabled]):hover::after {
+      @include mixins.overlay(var(--ripple-color), 0.08);
+    }
+
+    &:not([aria-disabled]):focus::after {
+      @include mixins.overlay(var(--ripple-color), 0.1);
+    }
+
+    &--elevated {
+      &:not(.q-btn--unelevated, [aria-disabled]) {
+        @include mixins.elevate(1, "bottom");
+      }
+
+      background-color: var(--surface-container-low);
+
+      // Surface tint overlay
+      &::before {
+        @include mixins.overlay(var(--surface-tint), 0.12);
+      }
+    }
+
+    &--filled {
+      background-color: var(--primary);
+
+      &:hover:not([aria-disabled]) {
+        @include mixins.elevate(1, "bottom");
+      }
+    }
+
+    &--tonal {
+      background-color: var(--secondary-container);
+
+      &:hover:not([aria-disabled]) {
+        @include mixins.elevate(1, "bottom");
+      }
+    }
+
+    &--outlined {
+      outline: solid 0.0625rem var(--outline);
+
+      &:not([aria-disabled]):focus {
+        outline-color: var(--primary);
+      }
+    }
+
+    &--round {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 50%;
+      padding: 0;
+    }
+
+    &--rectangle {
+      border-radius: 0.5rem;
+    }
+  }
+
+  .q-btn:not(.q-btn--round) > :is(.q-icon, .q-btn__img, .q-circular-progress) {
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+    --size: 1.5rem;
+  }
+}
+
+// Disabled
+@layer q-btn--disabled {
+  .q-btn[aria-disabled] {
+    @include disabled.base();
+
+    &:not(.q-btn--outlined, .q-btn--flat) {
+      background-color: disabled.rest-color();
+    }
+
+    &.q-btn--outlined {
+      outline-color: disabled.rest-color();
+    }
+  }
+}