@quaffui/quaff 0.1.0-prealpha11 → 0.1.0-prealpha12

package/dist/components/list/QList.svelte

@@ -1,5 +1,4 @@
-<script>import { setIndex } from "../../composables/use-index";
-import { createClasses } from "../../utils/props";
+<script>import { createClasses } from "../../utils/props";
 import { onMount, setContext } from "svelte";
 export let bordered = false, roundedBorders = false, dense = false, separator = false, separatorOptions = {}, padding = false, tag = "div", userClasses = void 0;
 export { userClasses as class };
@@ -8,14 +7,14 @@ onMount(() => listElement.querySelector(".q-separator__wrapper:first-child")?.re
 $:
   setContext("separator", separator === true ? separatorOptions : void 0);
 $:
-  classes = createClasses([
-    "q-list",
-    bordered && "border",
-    dense && "dense",
-    padding && "q-py-sm",
-    roundedBorders && "rounded-borders",
-    userClasses
-  ]);
+  classes = createClasses(
+    [bordered && "bordered", dense && "dense", roundedBorders && "rounded"],
+    {
+      component: "q-list",
+      quaffClasses: [padding && "q-py-sm"],
+      userClasses
+    }
+  );
 </script>
 
 <svelte:element this={tag} class={classes} {...$$restProps} bind:this={listElement} on:scroll>

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

@@ -10,7 +10,7 @@ declare const __propDef: {
         separatorOptions?: QListProps["separatorOptions"];
         padding?: QListProps["padding"];
         tag?: QListProps["tag"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         scroll: Event;

package/dist/components/list/index.scss

@@ -5,11 +5,15 @@
   justify-content: center;
   width: 100%;
 
-  &.rounded-borders {
+  &--bordered {
+    @include border;
+  }
+
+  &--rounded {
     border-radius: 0.25rem;
   }
 
-  &.dense {
+  &--dense {
     min-height: 32px;
     padding-block: 0;
 
@@ -43,10 +47,28 @@
     width: 40px;
   }
 
-  &.wave {
+  &.q-link {
     padding: 8px 24px 8px 16px;
 
-    &.multiline {
+    &:is(:hover, :focus):not([aria-disabled])::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--on-surface);
+    }
+
+    &:hover:not([aria-disabled])::after {
+      opacity: 0.08;
+    }
+
+    &:focus:not([aria-disabled])::after {
+      opacity: 0.16;
+    }
+
+    &.q-item--multiline {
       padding-block: 12px;
     }
 
@@ -55,7 +77,7 @@
     }
   }
 
-  &.multiline {
+  &--multiline {
     padding-block: 12px;
 
     &

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

@@ -1,7 +1,8 @@
 import { type NativeProps } from "../../utils/types";
+import type { UseRouterLinkProps } from "../../composables/use-router-link";
 import type { QSeparatorProps } from "../separator/props";
-import { type UseRouterLinkProps } from "../../composables/use-router-link";
-export interface QListProps extends NativeProps {
+import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
+export interface QListProps extends NativeProps, HTMLAttributes<HTMLElement> {
     bordered?: boolean;
     roundedBorders?: boolean;
     dense?: boolean;
@@ -18,16 +19,18 @@ export interface QListProps extends NativeProps {
     tag?: string;
 }
 export declare const QListPropsDefaults: QListProps;
-export interface QItemProps extends UseRouterLinkProps, NativeProps {
+export interface QItemProps extends UseRouterLinkProps, NativeProps, HTMLAttributes<HTMLElement> {
     tag?: string;
     active?: boolean;
     clickable?: boolean;
     dense?: boolean;
-    tabindex?: string | number;
+    noRipple?: boolean;
+    tabindex?: HTMLAttributes<HTMLElement>["tabindex"];
+    target?: HTMLAnchorAttributes["target"];
 }
 export declare const QItemPropsDefaults: QItemProps;
 export type QItemSectionTypes = "thumbnail" | "video" | "avatar" | "toggle" | "icon" | "trailingIcon" | "trailingText" | "content";
-export interface QItemSectionProps extends NativeProps {
+export interface QItemSectionProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     type?: QItemSectionTypes;
 }
 export declare const QItemSectionPropsDefaults: QItemSectionProps;

package/dist/components/list/props.js

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

package/dist/components/progress/QCircularProgress.svelte

@@ -13,7 +13,13 @@ $:
   });
 </script>
 
-<svg class={classes} height={spinnerSize.style} width={spinnerSize.style} viewBox="25 25 50 50">
+<svg
+  class={classes}
+  height={spinnerSize.style}
+  width={spinnerSize.style}
+  viewBox="25 25 50 50"
+  {...$$restProps}
+>
   <circle
     class="path"
     cx="50"

package/dist/components/progress/QCircularProgress.svelte.d.ts

@@ -2,12 +2,13 @@ import { SvelteComponent } from "svelte";
 import type { QCircularProgressProps } from "./props";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         value?: number | undefined;
         indeterminate?: QCircularProgressProps["indeterminate"];
         size?: QCircularProgressProps["size"];
         color?: QCircularProgressProps["color"];
         thickness?: QCircularProgressProps["thickness"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/progress/QLinearProgress.svelte.d.ts

@@ -6,8 +6,8 @@ declare const __propDef: {
         value?: number | undefined;
         from?: QLinearProgressProps["from"];
         rounded?: QLinearProgressProps["rounded"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,5 +1,6 @@
 import type { NativeProps, CssValue } from "../../utils/types";
-export interface QLinearProgressProps extends NativeProps {
+import type { HTMLAttributes, SVGAttributes } from "svelte/elements";
+export interface QLinearProgressProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * @default 0
      */
@@ -13,7 +14,7 @@ export interface QLinearProgressProps extends NativeProps {
      */
     rounded?: boolean;
 }
-export interface QCircularProgressProps extends NativeProps {
+export interface QCircularProgressProps extends NativeProps, SVGAttributes<SVGSVGElement> {
     /**
      * @default 0
      */

package/dist/components/radio/QRadio.svelte.d.ts

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

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

@@ -1,5 +1,6 @@
 import type { NativeProps } from "../../utils/types";
-export interface QRadioProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QRadioProps extends NativeProps, HTMLAttributes<HTMLLabelElement> {
     value: string;
     label?: string;
     selected?: any;

package/dist/components/railbar/QRailbar.svelte.d.ts

@@ -5,8 +5,8 @@ declare const __propDef: {
         width?: QRailbarProps["width"];
         side?: QRailbarProps["side"];
         bordered?: QRailbarProps["bordered"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,5 +1,6 @@
 import type { NativeProps, CssValue } from "../../utils/types";
-export interface QRailbarProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QRailbarProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * @default 88px
      */

package/dist/components/select/QSelect.svelte

@@ -7,7 +7,7 @@ export let options, multiple = false, bordered = false, dense = false, disable =
 export { userClasses as class };
 let active = false;
 $:
-  active = value?.length > 0;
+  active = typeof value === "number" || value?.length > 0;
 $:
   hasBorder = bordered || rounded || outlined;
 $:
@@ -89,7 +89,9 @@ function select(evt, option) {
   if (multiple) {
     const hasItem = value.some((entry) => entry === optionValue);
     if (hasItem) {
-      value = value.filter((val) => val !== optionValue);
+      value = value.filter(
+        (val) => val !== optionValue
+      );
     } else {
       value = [...value, optionValue];
     }

package/dist/components/select/QSelect.svelte.d.ts

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

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

@@ -1,10 +1,14 @@
 import type { NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 export type QSelectOption = string | {
     label: string;
     value: string;
 };
-export interface QSelectProps extends NativeProps {
-    value: string | string[] | number | number[];
+export type QSelectValue = QSelectSingleValue | QSelectMultipleValue;
+export type QSelectSingleValue = string | number;
+export type QSelectMultipleValue = QSelectSingleValue[];
+export interface QSelectProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
+    value: QSelectValue;
     multiple?: boolean;
     options: QSelectOption[];
     bordered?: boolean;

package/dist/components/separator/QSeparator.svelte

@@ -41,7 +41,7 @@ $:
 </script>
 
 {#if text !== undefined}
-  <div class="q-separator__wrapper" style={containerStyle}>
+  <div class="q-separator__wrapper" style={containerStyle} {...$$restProps}>
     {#if (vertical === true && textAlign !== "top") || (vertical === false && textAlign !== "left")}
       <hr class={classes} {style} aria-orientation={orientationClass} />
     {/if}
@@ -51,7 +51,7 @@ $:
     {/if}
   </div>
 {:else}
-  <div class="q-separator__wrapper" style={containerStyle}>
+  <div class="q-separator__wrapper" style={containerStyle} {...$$restProps}>
     <hr class={classes} {style} aria-orientation={orientationClass} />
   </div>
 {/if}

package/dist/components/separator/QSeparator.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { QSeparatorProps } from "./props";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         spacing?: QSeparatorProps["spacing"];
         inset?: QSeparatorProps["inset"];
         vertical?: QSeparatorProps["vertical"];
@@ -9,8 +10,8 @@ declare const __propDef: {
         size?: QSeparatorProps["size"];
         text?: QSeparatorProps["text"];
         textAlign?: QSeparatorProps["textAlign"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,4 +1,5 @@
 import type { NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 interface QSeparatorPropsVertical extends NativeProps {
     spacing?: "none" | "sm" | "md" | "lg";
     inset?: boolean;
@@ -8,7 +9,7 @@ interface QSeparatorPropsVertical extends NativeProps {
     text?: string;
     textAlign?: "top" | "middle" | "bottom";
 }
-interface QSeparatorPropsHorizontal extends NativeProps {
+interface QSeparatorPropsHorizontal extends NativeProps, HTMLAttributes<HTMLDivElement> {
     spacing?: "none" | "sm" | "md" | "lg";
     inset?: boolean;
     vertical?: false;

package/dist/components/table/QTable.svelte

@@ -88,7 +88,7 @@ function setSort(column) {
 }
 </script>
 
-<div class={classes}>
+<div class={classes} {...$$restProps}>
   <table class={classesTable}>
     <thead>
       <tr>

package/dist/components/table/QTable.svelte.d.ts

@@ -3,12 +3,13 @@ import type { QTableProps } from "./props";
 import type { QTableColumn, QTableRow } from "./props";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         columns?: QTableColumn[] | undefined;
         rows?: QTableRow[] | undefined;
         flat?: QTableProps["flat"];
         bordered?: QTableProps["bordered"];
         dense?: QTableProps["dense"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,4 +1,5 @@
 import type { NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 export type QTableColumn = {
     name: string;
     required?: boolean;
@@ -16,7 +17,7 @@ export type QTableSort = {
     columnField: string | ((row: QTableRow) => string);
     type: "asc" | "desc";
 } | null;
-export interface QTableProps extends NativeProps {
+export interface QTableProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * Column definitions of the table.
      * @default []

package/dist/components/tabs/QTab.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         name?: QTabProps["name"];
         to?: QTabProps["to"];
         icon?: QTabProps["icon"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/tabs/QTabs.svelte.d.ts

@@ -5,8 +5,8 @@ declare const __propDef: {
         value?: QTabsProps["value"];
         variant?: QTabsProps["variant"];
         round?: QTabsProps["round"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/tabs/index.scss

@@ -7,7 +7,7 @@
   overflow: auto;
   scroll-behavior: smooth;
   border-radius: 0;
-  border-bottom: solid 0.0625rem var(--outline);
+  border-bottom: solid 0.0625rem var(--outline-4);
   &::-webkit-scrollbar {
     display: none;
   }
@@ -26,6 +26,7 @@
     border-radius: 0;
     gap: 0;
     overflow: hidden;
+    @include padding("x", "md");
 
     & .q-tab__icon {
       margin-right: 0.25rem;
@@ -62,7 +63,7 @@
     width: fit-content;
     align-items: stretch;
     border-bottom: unset;
-    border-right: solid 0.0625rem var(--outline);
+    border-right: solid 0.0625rem var(--outline-4);
 
     & > .q-tab {
       @include padding("x", "md");

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

@@ -1,12 +1,13 @@
 import { type NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 export type QTabsVariants = "primary" | "secondary" | "vertical";
-export interface QTabsProps extends NativeProps {
+export interface QTabsProps extends NativeProps, HTMLAttributes<HTMLElement> {
     value?: string;
     variant?: QTabsVariants;
     round?: boolean;
 }
 export declare const QTabsPropsDefaults: QTabsProps;
-export interface QTabProps extends NativeProps {
+export interface QTabProps extends NativeProps, HTMLAttributes<HTMLElement> {
     name?: string;
     to?: string;
     icon?: string;

package/dist/components/toggle/QToggle.svelte

@@ -18,7 +18,15 @@ function toggle() {
 }
 </script>
 
-<div on:click={toggle} class={classes} aria-disabled={disable} {...$$restProps}>
+<div
+  on:click={toggle}
+  class={classes}
+  aria-disabled={disable}
+  role="switch"
+  aria-checked={value}
+  tabindex="0"
+  {...$$restProps}
+>
   <label class={classesInner}>
     <input bind:checked={value} type="checkbox" disabled={disable} />
     <span>

package/dist/components/toggle/QToggle.svelte.d.ts

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

package/dist/components/toolbar/QToolbar.svelte.d.ts

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

package/dist/components/toolbar/QToolbarTitle.svelte.d.ts

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

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

@@ -1,5 +1,6 @@
 import type { NativeProps, CssValue } from "../../utils/types";
-export interface QToolbarProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QToolbarProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * @default false
      */
@@ -17,7 +18,7 @@ export interface QToolbarProps extends NativeProps {
      */
     height?: CssValue | number;
 }
-export interface QToolbarTitleProps extends NativeProps {
+export interface QToolbarTitleProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * @default false
      */

package/dist/components/tooltip/QTooltip.svelte.d.ts

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

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

@@ -1,5 +1,6 @@
 import type { NativeProps } from "../../utils/types";
-export interface QTooltipProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QTooltipProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     value?: boolean;
     position?: "top" | "right" | "bottom" | "left";
 }

package/dist/composables/use-router-link.d.ts

@@ -2,9 +2,9 @@ import type { Page } from "@sveltejs/kit";
 export interface UseRouterLinkProps {
     href?: string;
     to?: string;
-    disable: boolean;
+    disable?: boolean;
     activeClass?: string;
-    replace: boolean;
+    replace?: boolean;
 }
 export declare const UseRouterLinkPropsDefaults: UseRouterLinkProps;
 export declare function isRouteActive(router: Page<Record<string, string>, string | null>, to: string | undefined): boolean;

package/dist/composables/use-router-link.js

@@ -12,11 +12,11 @@ export function isRouteActive(router, to) {
         : router.url.pathname.slice(0, (to || "").length) === to;
 }
 export default function (props) {
-    const hasLink = props.to !== undefined || props.href !== undefined;
+    const hasLink = [props.to, props.href].some((entry) => typeof entry !== "undefined");
     const linkClasses = createClasses([hasLink && "q-link", props.disable && "disable"]);
     const linkAttributes = {
         href: props.to || props.href,
-        "data-sveltkit-reload": props.replace === true ? "" : undefined,
+        "data-sveltkit-reload": props.replace ? "" : undefined,
     };
     return {
         hasLink,