@quaffui/quaff 0.1.0-prealpha → 0.1.0-prealpha11

package/dist/css/theme/typography.scss

@@ -0,0 +1,111 @@
+html {
+  font-size: var(--size);
+}
+
+body {
+  font-family: var(--font);
+  font-size: 0.875rem;
+  line-height: 1.25;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  line-height: normal;
+}
+
+* + h1,
+* + h2,
+* + h3,
+* + h4,
+* + h5,
+* + h6 {
+  margin-top: 1rem;
+}
+
+h1 {
+  font-size: 3.5625rem;
+}
+
+h2 {
+  font-size: 2.8125rem;
+}
+
+h3 {
+  font-size: 2.25rem;
+}
+
+h4 {
+  font-size: 2rem;
+}
+
+h5 {
+  font-size: 1.75rem;
+}
+
+h6 {
+  font-size: 1.5rem;
+}
+
+h1.small {
+  font-size: 3.0625rem;
+}
+
+h2.small {
+  font-size: 2.3125rem;
+}
+
+h3.small {
+  font-size: 1.75rem;
+}
+
+h4.small {
+  font-size: 1.5rem;
+}
+
+h5.small {
+  font-size: 1.25rem;
+}
+
+h6.small {
+  font-size: 1rem;
+}
+
+h1.large {
+  font-size: 4.0625rem;
+}
+
+h2.large {
+  font-size: 3.3125rem;
+}
+
+h3.large {
+  font-size: 2.75rem;
+}
+
+h4.large {
+  font-size: 2.5rem;
+}
+
+h5.large {
+  font-size: 2.25rem;
+}
+
+h6.large {
+  font-size: 2rem;
+}
+
+p {
+  margin: 0.5rem 0;
+}
+
+.text-center {
+  text-align: center;
+}

package/dist/css/variables-sass.scss

@@ -0,0 +1,16 @@
+// Grid variables
+$grid-columns: 12;
+$gutter-xs: 4px;
+$gutter-sm: 8px;
+$gutter-md: 16px;
+$gutter-lg: 24px;
+$gutter-xl: 48px;
+
+// Responsive breakpoints
+$breakpoints: (
+  xs: 0px,
+  sm: 600px,
+  md: 960px,
+  lg: 1280px,
+  xl: 1920px,
+);

package/dist/global.d.ts

@@ -1,4 +1,3 @@
-declare var __QUAFF_VERSION__: string;
 declare var __PLATFORM__:
   | "aix"
   | "darwin"

package/dist/helpers/ripple.d.ts

@@ -0,0 +1,10 @@
+interface RippleOptions {
+    center?: boolean;
+    color?: string;
+    duration?: number;
+}
+export declare function ripple(el: HTMLElement, options?: RippleOptions): {
+    destroy(): void;
+    update(newOptions: RippleOptions): void;
+};
+export {};

package/dist/helpers/ripple.js

@@ -0,0 +1,79 @@
+const triggerEvents = ["pointerdown", "touchstart", "keydown"];
+const cancelEvents = ["mouseleave", "dragleave", "touchmove", "touchcancel", "pointerup", "keyup"];
+export function ripple(el, options = {}) {
+    function addClasses(center) {
+        let shouldBeCentered = center || options.center;
+        if (!el.classList.contains("q-ripple--effect")) {
+            el.classList.add("q-ripple--effect");
+        }
+        if (!shouldBeCentered && el.classList.contains("q-ripple--center")) {
+            el.classList.remove("q-ripple--center");
+        }
+        shouldBeCentered && el.classList.add("q-ripple--center");
+    }
+    function setOptions(options) {
+        if (options.duration && options.duration < 0) {
+            options.duration = undefined;
+        }
+        if (options.color) {
+            el.style.setProperty("--ripple-color", options.color);
+        }
+        if (options.duration) {
+            el.style.setProperty("--ripple-duration", `${options.duration}ms`);
+        }
+    }
+    addClasses();
+    setOptions(options);
+    function createRipple(e, center) {
+        if (el.hasAttribute("aria-disabled"))
+            return;
+        if (e instanceof KeyboardEvent) {
+            if (!["Enter", "Space"].includes(e.code) || e.repeat) {
+                return;
+            }
+            e.preventDefault();
+            const click = new PointerEvent("pointerdown");
+            createRipple(click, true);
+            return;
+        }
+        addClasses(center);
+        const rect = el.getBoundingClientRect();
+        const clientX = window.TouchEvent && e instanceof TouchEvent
+            ? e.touches[0].clientX
+            : e.clientX;
+        const clientY = window.TouchEvent && e instanceof TouchEvent
+            ? e.touches[0].clientY
+            : e.clientY;
+        const x = clientX - rect.left > el.offsetWidth / 2 ? 0 : el.offsetWidth;
+        const y = clientY - rect.top > el.offsetHeight / 2 ? 0 : el.offsetHeight;
+        const radius = Math.hypot(x - (clientX - rect.left), y - (clientY - rect.top));
+        const ripple = document.createElement("div");
+        ripple.classList.add("q-ripple");
+        ripple.style.left = `${clientX - rect.left - radius}px`;
+        ripple.style.top = `${clientY - rect.top - radius}px`;
+        ripple.style.width = ripple.style.height = `${radius * 2}px`;
+        el.appendChild(ripple);
+        function removeRipple() {
+            if (ripple === null)
+                return;
+            ripple.style.opacity = "0";
+            setTimeout(() => {
+                ripple.remove();
+            }, options.duration || 1000);
+            cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
+        }
+        cancelEvents.forEach((event) => el.addEventListener(event, removeRipple));
+    }
+    triggerEvents.forEach((event) => el.addEventListener(event, createRipple, { passive: event === "touchstart" }));
+    return {
+        destroy() {
+            triggerEvents.forEach((event) => {
+                el.removeEventListener(event, createRipple);
+            });
+        },
+        update(newOptions) {
+            options = newOptions;
+            setOptions(newOptions);
+        },
+    };
+}

package/dist/helpers/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "0.1.0-prealpha11";
+export default _default;

package/dist/helpers/version.js

@@ -0,0 +1 @@
+export default "0.1.0-prealpha11";

package/dist/index.d.ts

@@ -1 +1,2 @@
-export * from "$components";
+export * from "./components";
+export { Quaff } from "./stores/Quaff.js";

package/dist/index.js

@@ -1,2 +1,3 @@
 // Reexport your entry components here
-export * from "$components";
+export * from "./components";
+export { Quaff } from "./stores/Quaff.js";

package/dist/stores/QTheme.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="svelte" />
 interface IMaterialDynamicColorsThemeColorFormatted {
     primary: string;
     "on-primary": string;
@@ -33,9 +34,8 @@ interface IMaterialDynamicColorsThemeFormatted {
 }
 type CSSDynamicColor = `${keyof IMaterialDynamicColorsThemeColorFormatted}-${keyof IMaterialDynamicColorsThemeFormatted}`;
 export declare const QTheme: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<Record<"error-dark" | "error-light" | "outline-dark" | "outline-light" | "primary-dark" | "primary-light" | "secondary-dark" | "secondary-light" | "tertiary-dark" | "tertiary-light" | "surface-dark" | "surface-light" | "surface-variant-dark" | "surface-variant-light" | "on-primary-dark" | "on-primary-light" | "primary-container-dark" | "primary-container-light" | "on-primary-container-dark" | "on-primary-container-light" | "on-secondary-dark" | "on-secondary-light" | "secondary-container-dark" | "secondary-container-light" | "on-secondary-container-dark" | "on-secondary-container-light" | "on-tertiary-dark" | "on-tertiary-light" | "tertiary-container-dark" | "tertiary-container-light" | "on-tertiary-container-dark" | "on-tertiary-container-light" | "error-container-dark" | "error-container-light" | "on-error-dark" | "on-error-light" | "on-error-container-dark" | "on-error-container-light" | "background-dark" | "background-light" | "on-background-dark" | "on-background-light" | "on-surface-dark" | "on-surface-light" | "on-surface-variant-dark" | "on-surface-variant-light" | "inverse-on-surface-dark" | "inverse-on-surface-light" | "inverse-surface-dark" | "inverse-surface-light" | "inverse-primary-dark" | "inverse-primary-light" | "shadow-dark" | "shadow-light", string>>, invalidate?: ((value?: Record<"error-dark" | "error-light" | "outline-dark" | "outline-light" | "primary-dark" | "primary-light" | "secondary-dark" | "secondary-light" | "tertiary-dark" | "tertiary-light" | "surface-dark" | "surface-light" | "surface-variant-dark" | "surface-variant-light" | "on-primary-dark" | "on-primary-light" | "primary-container-dark" | "primary-container-light" | "on-primary-container-dark" | "on-primary-container-light" | "on-secondary-dark" | "on-secondary-light" | "secondary-container-dark" | "secondary-container-light" | "on-secondary-container-dark" | "on-secondary-container-light" | "on-tertiary-dark" | "on-tertiary-light" | "tertiary-container-dark" | "tertiary-container-light" | "on-tertiary-container-dark" | "on-tertiary-container-light" | "error-container-dark" | "error-container-light" | "on-error-dark" | "on-error-light" | "on-error-container-dark" | "on-error-container-light" | "background-dark" | "background-light" | "on-background-dark" | "on-background-light" | "on-surface-dark" | "on-surface-light" | "on-surface-variant-dark" | "on-surface-variant-light" | "inverse-on-surface-dark" | "inverse-on-surface-light" | "inverse-surface-dark" | "inverse-surface-light" | "inverse-primary-dark" | "inverse-primary-light" | "shadow-dark" | "shadow-light", string> | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
-    setThemeColors: (from: string) => Promise<void>;
+    subscribe: (this: void, run: import("svelte/store").Subscriber<Record<"error-dark" | "error-light" | "outline-dark" | "outline-light" | "primary-dark" | "primary-light" | "secondary-dark" | "secondary-light" | "tertiary-dark" | "tertiary-light" | "surface-dark" | "surface-light" | "surface-variant-dark" | "surface-variant-light" | "on-primary-dark" | "on-primary-light" | "primary-container-dark" | "primary-container-light" | "on-primary-container-dark" | "on-primary-container-light" | "on-secondary-dark" | "on-secondary-light" | "secondary-container-dark" | "secondary-container-light" | "on-secondary-container-dark" | "on-secondary-container-light" | "on-tertiary-dark" | "on-tertiary-light" | "tertiary-container-dark" | "tertiary-container-light" | "on-tertiary-container-dark" | "on-tertiary-container-light" | "error-container-dark" | "error-container-light" | "on-error-dark" | "on-error-light" | "on-error-container-dark" | "on-error-container-light" | "background-dark" | "background-light" | "on-background-dark" | "on-background-light" | "on-surface-dark" | "on-surface-light" | "on-surface-variant-dark" | "on-surface-variant-light" | "inverse-on-surface-dark" | "inverse-on-surface-light" | "inverse-surface-dark" | "inverse-surface-light" | "inverse-primary-dark" | "inverse-primary-light" | "shadow-dark" | "shadow-light", string>>, invalidate?: import("svelte/store").Invalidator<Record<"error-dark" | "error-light" | "outline-dark" | "outline-light" | "primary-dark" | "primary-light" | "secondary-dark" | "secondary-light" | "tertiary-dark" | "tertiary-light" | "surface-dark" | "surface-light" | "surface-variant-dark" | "surface-variant-light" | "on-primary-dark" | "on-primary-light" | "primary-container-dark" | "primary-container-light" | "on-primary-container-dark" | "on-primary-container-light" | "on-secondary-dark" | "on-secondary-light" | "secondary-container-dark" | "secondary-container-light" | "on-secondary-container-dark" | "on-secondary-container-light" | "on-tertiary-dark" | "on-tertiary-light" | "tertiary-container-dark" | "tertiary-container-light" | "on-tertiary-container-dark" | "on-tertiary-container-light" | "error-container-dark" | "error-container-light" | "on-error-dark" | "on-error-light" | "on-error-container-dark" | "on-error-container-light" | "background-dark" | "background-light" | "on-background-dark" | "on-background-light" | "on-surface-dark" | "on-surface-light" | "on-surface-variant-dark" | "on-surface-variant-light" | "inverse-on-surface-dark" | "inverse-on-surface-light" | "inverse-surface-dark" | "inverse-surface-light" | "inverse-primary-dark" | "inverse-primary-light" | "shadow-dark" | "shadow-light", string>> | undefined) => import("svelte/store").Unsubscriber;
+    setTheme: (from: string) => Promise<void>;
     updateThemeColor: (color: CSSDynamicColor, newValue: string) => void;
-    apply: () => void;
 };
 export {};

package/dist/stores/QTheme.js

@@ -2,7 +2,15 @@ import { writable } from "svelte/store";
 import materialDynamicColors from "material-dynamic-colors";
 import { convertCase } from "../utils/string";
 import QColors from "../utils/colors";
+function extractColorFromCssVar(cssVar) {
+    const rootStyles = getComputedStyle(document.documentElement);
+    const varName = cssVar.replace(/var\(([a-z0-9-]+)\)/, "$1");
+    return rootStyles.getPropertyValue(varName).trim();
+}
 async function prepareThemeColors(from) {
+    if (from.startsWith("var(")) {
+        from = extractColorFromCssVar(from);
+    }
     let theme = await materialDynamicColors(from);
     //@ts-ignore
     const themeColors = {};
@@ -17,20 +25,9 @@ async function prepareThemeColors(from) {
     }
     return themeColors;
 }
-/* const defaultThemeColors = await prepareThemeColors("/cocktail.jpg"); */
-const defaultThemeColors = await prepareThemeColors("#3499E7");
 function themeBuilder() {
-    const { subscribe, set, update } = writable(defaultThemeColors);
-    const setThemeColors = async (from) => {
-        let newTheme = await prepareThemeColors(from);
-        set(newTheme);
-    };
-    const updateThemeColor = (color, newValue) => {
-        update(($themeColors) => {
-            $themeColors[color] = newValue;
-            return $themeColors;
-        });
-    };
+    const { subscribe, set, update } = writable({});
+    prepareThemeColors("#3499E7").then((res) => set(res));
     const apply = () => {
         let root = document.documentElement;
         if (root === null)
@@ -43,11 +40,21 @@ function themeBuilder() {
             return $themeColors;
         });
     };
+    const updateThemeColor = (color, newValue) => {
+        update(($themeColors) => {
+            $themeColors[color] = newValue;
+            return $themeColors;
+        });
+    };
+    const setTheme = async (from) => {
+        let newTheme = await prepareThemeColors(from);
+        set(newTheme);
+        apply();
+    };
     return {
         subscribe,
-        setThemeColors,
+        setTheme,
         updateThemeColor,
-        apply,
     };
 }
 export const QTheme = themeBuilder();

package/dist/stores/Quaff.d.ts

@@ -1,12 +1,13 @@
+/// <reference types="svelte" />
 /// <reference types="@sveltejs/kit" />
 export declare const quaffStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<{
         version: string;
         dark: boolean;
-    }>, invalidate?: ((value?: {
+    }>, invalidate?: import("svelte/store").Invalidator<{
         version: string;
         dark: boolean;
-    } | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    }> | undefined) => import("svelte/store").Unsubscriber;
     setDarkMode: (newVal: boolean) => void;
     toggleDarkMode: () => void;
 };
@@ -22,10 +23,10 @@ export declare const Quaff: import("svelte/store").Readable<{
         quaff: (this: void, run: import("svelte/store").Subscriber<{
             version: string;
             dark: boolean;
-        }>, invalidate?: ((value?: {
+        }>, invalidate?: import("svelte/store").Invalidator<{
             version: string;
             dark: boolean;
-        } | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
-        page: (this: void, run: import("svelte/store").Subscriber<import("@sveltejs/kit").Page<Record<string, string>, string | null>>, invalidate?: ((value?: import("@sveltejs/kit").Page<Record<string, string>, string | null> | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+        }> | undefined) => import("svelte/store").Unsubscriber;
+        page: (this: void, run: import("svelte/store").Subscriber<import("@sveltejs/kit").Page<Record<string, string>, string | null>>, invalidate?: import("svelte/store").Invalidator<import("@sveltejs/kit").Page<Record<string, string>, string | null>> | undefined) => import("svelte/store").Unsubscriber;
     };
 }>;

package/dist/stores/Quaff.js

@@ -1,8 +1,9 @@
 import { writable, derived } from "svelte/store";
 import { page } from "$app/stores";
+import version from "../helpers/version";
 function quaff() {
     const { subscribe, set, update } = writable({
-        version: __QUAFF_VERSION__,
+        version,
         dark: false,
         //TODO lang: {},
         //TODO? iconSet: {},

package/dist/utils/dom.d.ts

@@ -0,0 +1,8 @@
+import type { Direction } from "./events";
+export declare function getParentElement(el: HTMLElement): HTMLElement;
+export declare function getAllChildren(el: HTMLElement): HTMLElement[];
+export declare function isFocusable(el: HTMLElement): boolean;
+export declare function getFocusableChildren<T extends HTMLElement>(el: T): T[];
+export declare function getClosestFocusableChild(el: HTMLElement): HTMLElement;
+export declare function getClosestFocusableSibling<T extends HTMLElement>(el: T, direction: Direction): HTMLElement;
+export declare function getClosestFocusableBlock(el: HTMLElement, direction: Direction): HTMLElement;

package/dist/utils/dom.js

@@ -0,0 +1,71 @@
+export function getParentElement(el) {
+    let parent = el.parentNode;
+    while (parent && parent.nodeType !== 1) {
+        parent = parent.parentNode;
+    }
+    return parent;
+}
+export function getAllChildren(el) {
+    return Array.from(el.querySelectorAll("*"));
+}
+// Focus utils
+const focusableElements = ':is(a, button, input, [tabindex]:not([tabindex="-1"])):not([disabled], [aria-disabled="true"])';
+export function isFocusable(el) {
+    return (el.offsetWidth > 0 &&
+        el.offsetHeight > 0 &&
+        (el.style.opacity === "" || +el.style.opacity > 0) &&
+        el.style.display !== "none" &&
+        el.tabIndex >= 0);
+}
+export function getFocusableChildren(el) {
+    return Array.from(el.querySelectorAll(focusableElements));
+}
+export function getClosestFocusableChild(el) {
+    let children = Array.from(el.querySelectorAll(focusableElements));
+    const focusableChildren = children.filter(isFocusable);
+    return focusableChildren[0] || null;
+}
+export function getClosestFocusableSibling(el, direction) {
+    const parent = getParentElement(el);
+    const allSiblings = Array.from(parent.childNodes);
+    let filtered = allSiblings.filter(isFocusable);
+    const indexOfEl = filtered.indexOf(el);
+    if (direction === "next") {
+        const i = indexOfEl + 1 === filtered.length ? 0 : indexOfEl + 1;
+        if (filtered[i].hasAttribute("aria-current")) {
+            // The target element is active, it shouldn't have focus
+            return i + 1 === filtered.length ? filtered[0] : filtered[i + 1];
+        }
+        return filtered[i];
+    }
+    else {
+        const i = indexOfEl - 1 === -1 ? filtered.length - 1 : indexOfEl - 1;
+        if (filtered[i].hasAttribute("aria-current")) {
+            // The target element is active, it shouldn't have focus
+            return i - 1 === -1 ? filtered.at(-1) : filtered[i - 1];
+        }
+        return filtered[i];
+    }
+}
+export function getClosestFocusableBlock(el, direction) {
+    let parent = getParentElement(el);
+    let parentFocusableChildren = getFocusableChildren(parent);
+    function getNextFocusableBlock(parentBlock) {
+        const grandParent = getParentElement(parentBlock);
+        const grandParentChildren = getAllChildren(grandParent);
+        const indexOfEl = grandParentChildren.indexOf(el);
+        const sliced = direction === "next"
+            ? grandParentChildren.slice(indexOfEl)
+            : grandParentChildren.slice(0, indexOfEl);
+        const filtered = sliced.filter((element) => isFocusable(element) && !parentFocusableChildren.includes(element));
+        if (!filtered.length) {
+            return getNextFocusableBlock(grandParent);
+        }
+        return direction === "next" ? filtered[0] : filtered.at(-1);
+    }
+    let targetBlock = getNextFocusableBlock(parent);
+    if (targetBlock.hasAttribute("aria-current")) {
+        targetBlock = getClosestFocusableSibling(targetBlock, direction);
+    }
+    return targetBlock;
+}

package/dist/utils/events.d.ts

@@ -0,0 +1,13 @@
+export type Direction = "previous" | "next";
+export declare function isActivationKey(e: KeyboardEvent): e is KeyboardEvent & {
+    code: "Enter" | "Space";
+};
+export declare function isArrowKey(e: KeyboardEvent): e is KeyboardEvent & {
+    code: "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
+};
+export declare function isTabKey(e: KeyboardEvent): e is KeyboardEvent & {
+    code: "Tab";
+};
+export declare function getDirection(e: KeyboardEvent & {
+    code: "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
+}): Direction;

package/dist/utils/events.js

@@ -0,0 +1,13 @@
+// Keyboard events
+export function isActivationKey(e) {
+    return e.code === "Enter" || e.code === "Space";
+}
+export function isArrowKey(e) {
+    return e.code.startsWith("Arrow");
+}
+export function isTabKey(e) {
+    return e.code === "Tab";
+}
+export function getDirection(e) {
+    return ["ArrowDown", "ArrowRight"].includes(e.code) ? "next" : "previous";
+}

package/dist/utils/props.d.ts

@@ -1,4 +1,4 @@
-export declare function createStyles(styleObj: Record<string, string | number | null | undefined>, userStyles?: string): string | null;
+export declare function createStyles(styleObj: Record<string, string | number | boolean | null | undefined>, userStyles?: string): string | null;
 interface CreateClassesOptions {
     component?: string;
     element?: string;

package/dist/utils/props.js

@@ -3,7 +3,7 @@ export function createStyles(styleObj, userStyles) {
     const stylesArray = Object.entries(styleObj);
     const toJoin = [];
     for (let [styleName, styleVal] of stylesArray) {
-        if (styleVal === undefined || styleVal === null) {
+        if (styleVal === undefined || styleVal === null || styleVal === false) {
             continue;
         }
         styleName = convertCase(styleName, "camel", "kebab");

package/dist/utils/types.d.ts

@@ -3,6 +3,9 @@ export interface NativeProps {
     userStyles?: string;
 }
 export declare const NativePropsDefaults: NativeProps;
+export type QuaffSizes = "xs" | "sm" | "md" | "lg" | "xl";
+export type CssUnit = "px" | "%" | "em" | "ex" | "ch" | "rem" | "vw" | "vh" | "vmin" | "vmax";
+export type CssValue = `${number}${CssUnit}`;
 export interface QComponentDocs {
     name: string;
     description: string;

package/dist/utils/types.json

@@ -1 +1 @@
-{"QAvatarShapeOptions":"type QAvatarShapeOptions =\r\n  | \"circle\"\r\n  | \"rounded\"\r\n  | \"top-round\"\r\n  | \"left-round\"\r\n  | \"right-round\"\r\n  | \"bottom-round\"\r\n  | \"top-left-round\"\r\n  | \"top-right-round\"\r\n  | \"bottom-left-round\"\r\n  | \"bottom-right-round\"","QAvatarSizeOptions":"type QAvatarSizeOptions = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | string","QBreadcrumbsGutterOptions":"type QBreadcrumbsGutterOptions = \"none\" | \"sm\" | \"md\" | \"lg\"","QLayoutEvents":"type QLayoutEvents = \"resize\" | \"scroll\" | \"scrollHeight\"","QSelectOption":"type QSelectOption = string | { label: string, value: string }","QItemSectionTypes":"type QItemSectionTypes =\r\n  | \"thumbnail\"\r\n  | \"video\"\r\n  | \"avatar\"\r\n  | \"icon\"\r\n  | \"trailingIcon\"\r\n  | \"trailingText\"\r\n  | \"content\"","QBtnSizeOptions":"type QBtnSizeOptions = \"sm\" | \"md\" | \"lg\" | \"xl\"","QDialogPositionOptions":"type QDialogPositionOptions = \"default\" | \"top\" | \"right\" | \"bottom\" | \"left\"","QDrawerSideOptions":"type QDrawerSideOptions = \"left\" | \"right\"","QDrawerBehaviorOptions":"type QDrawerBehaviorOptions = \"default\" | \"desktop\" | \"mobile\"","QIconSizeOptions":"type QIconSizeOptions = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | string | number","QIconTypeOptions":"type QIconTypeOptions = \"outlined\" | \"sharp\" | \"rounded\"","QLayoutViewOptions":"type QLayoutViewOptions = `${\"l\"|\"h\"}${\"h\"|\"H\"}${\"r\"|\"h\"} ${\"l\"|\"L\"}${\"p\"}${\"r\"|\"R\"} ${\"l\"|\"f\"}${\"f\"|\"F\"}${\"r\"|\"f\"}`","QTableColumn":"type QTableColumn = {\r\n  name: string\r\n  required?: boolean;\r\n  label: string;\r\n  align?: \"left\" | \"center\" | \"right\";\r\n  field: string | ((row: QTableRow) => string);\r\n  format?: (val: string) => string;\r\n  sortable?: boolean;\r\n  sort?: (a: string, b: string) => number;\r\n};","QTableRow":"type QTableRow = {\r\n  [key: string]: string | number\r\n};","QTableSort":"type QTableSort = {\r\n  columnField: string | ((row: QTableRow) => string)\r\n  type: \"asc\" | \"desc\";\r\n} | null;"}
+{"QAvatarShapeOptions":"type QAvatarShapeOptions =\n  | \"circle\"\n  | \"rounded\"\n  | \"top-round\"\n  | \"left-round\"\n  | \"right-round\"\n  | \"bottom-round\"\n  | \"top-left-round\"\n  | \"top-right-round\"\n  | \"bottom-left-round\"\n  | \"bottom-right-round\"","QAvatarSizeOptions":"type QAvatarSizeOptions = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | string","QBreadcrumbsGutterOptions":"type QBreadcrumbsGutterOptions = \"none\" | \"sm\" | \"md\" | \"lg\"","QLayoutEvents":"type QLayoutEvents = \"resize\" | \"scroll\" | \"scrollHeight\"","QSelectOption":"type QSelectOption = string | { label: string, value: string }","QItemSectionTypes":"type QItemSectionTypes =\n  | \"thumbnail\"\n  | \"video\"\n  | \"avatar\"\n  | \"toggle\"\n  | \"icon\"\n  | \"trailingIcon\"\n  | \"trailingText\"\n  | \"content\"","QBtnSizeOptions":"type QBtnSizeOptions = \"sm\" | \"md\" | \"lg\" | \"xl\"","QDialogPositionOptions":"type QDialogPositionOptions = \"default\" | \"top\" | \"right\" | \"bottom\" | \"left\"","QDrawerSideOptions":"type QDrawerSideOptions = \"left\" | \"right\"","QDrawerBehaviorOptions":"type QDrawerBehaviorOptions = \"default\" | \"desktop\" | \"mobile\"","QIconSizeOptions":"type QIconSizeOptions = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | string | number","QIconTypeOptions":"type QIconTypeOptions = \"outlined\" | \"sharp\" | \"rounded\"","QLayoutViewOptions":"type QLayoutViewOptions = `${\"l\"|\"h\"}${\"h\"|\"H\"}${\"r\"|\"h\"} ${\"l\"|\"L\"}${\"p\"}${\"r\"|\"R\"} ${\"l\"|\"f\"}${\"f\"|\"F\"}${\"r\"|\"f\"}`","QTableColumn":"type QTableColumn = {\n  name: string\n  required?: boolean;\n  label: string;\n  align?: \"left\" | \"center\" | \"right\";\n  field: string | ((row: QTableRow) => string);\n  format?: (val: string) => string;\n  sortable?: boolean;\n  sort?: (a: string, b: string) => number;\n};","QTableRow":"type QTableRow = {\n  [key: string]: string | number\n};","QTableSort":"type QTableSort = {\n  columnField: string | ((row: QTableRow) => string)\n  type: \"asc\" | \"desc\";\n} | null;","QCardFillColors":"type QCardFillColors = \"primary\" | \"secondary\" | \"tertiary\"","QChipSizeOptions":"type QChipSizeOptions = \"sm\" | \"md\" | \"lg\"","QTabsVariants":"type QTabsVariants = \"primary\" | \"secondary\" | \"vertical\""}

package/dist/utils/watchable.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="svelte" />
 import { Readable, Writable } from "svelte/store";
 export declare function watchable<T>(value: T): readonly [Writable<T>, Readable<T | null>];

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@quaffui/quaff",
-  "version": "0.1.0-prealpha",
+  "version": "0.1.0-prealpha11",
   "scripts": {
     "dev": "vite dev",
     "open": "vite dev --open",
-    "build": "vite build && npm run package",
+    "build": "vite build && npm run package && npm run build:css",
+    "build:css": "vite build --config vite.config.scss.ts",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
-    "prepublishOnly": "npm run package",
+    "prepublishOnly": "npm run build",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test:unit": "vitest",
@@ -20,7 +21,8 @@
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
-    }
+    },
+    "./css/*": "./dist/css/*"
   },
   "files": [
     "dist",
@@ -28,39 +30,43 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^3.54.0"
+    "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.5.0",
-    "@sveltejs/package": "^2.0.0",
-    "@types/node": "^20.3.1",
+    "@fontsource/material-symbols-outlined": "^5.0.6",
+    "@fontsource/material-symbols-rounded": "^5.0.6",
+    "@fontsource/material-symbols-sharp": "^5.0.6",
+    "@fontsource/roboto": "^5.0.7",
+    "@sveltejs/adapter-auto": "^2.1.0",
+    "@sveltejs/kit": "^1.22.4",
+    "@sveltejs/package": "^2.2.0",
+    "@types/node": "^20.4.6",
     "@types/prettier": "^2.7.3",
     "@types/prismjs": "^1.26.0",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte": "^2.26.0",
-    "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.8.1",
-    "publint": "^0.1.9",
-    "sass": "^1.62.1",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.9.0",
+    "eslint-plugin-svelte": "^2.32.4",
+    "prettier": "^3.0.0",
+    "prettier-plugin-svelte": "^3.0.3",
+    "publint": "^0.2.0",
+    "sass": "^1.64.2",
+    "svelte": "^4.1.2",
+    "svelte-check": "^3.4.6",
     "ts-node": "^10.9.1",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^4.3.0",
-    "vitest": "^0.25.3"
+    "tslib": "^2.6.1",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.8",
+    "vitest": "^0.34.1"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "beercss": "^3.2.6",
-    "material-dynamic-colors": "^0.1.7",
-    "prism-svelte": "0.5.0",
-    "prismjs": "^1.29.0"
+    "beercss": "^3.2.13",
+    "highlight.js": "^11.8.0",
+    "material-dynamic-colors": "^1.0.1",
+    "svelte-highlight": "^7.3.0"
   }
 }