@quaffui/quaff 1.0.0-beta1 → 1.0.0-beta13

package/dist/css/mixins/_design.scss

@@ -11,7 +11,7 @@
   box-shadow: 0 $elevate * $coeff $elevate 0 with-alpha(var(--shadow), calc(24% + (8% * $strength)));
 }
 
-@mixin border($color: var(--outline), $position: variables.$border-positions) {
+@mixin border($color: var(--outline-variant), $position: variables.$border-positions) {
   @if list.index($list: $position, $value: top) {
     border-top: 0.0625rem solid $color;
   }

package/dist/css/mixins/_field.scss

@@ -22,7 +22,7 @@
 }
 
 @mixin border-substitute($variant: "outlined", $wrapper-height, $dense: false) {
-  $border-radius: if($variant == "outlined", 0.25rem, math.div($wrapper-height, 2));
+  $border-radius: if(sass($variant == "outlined"): 0.25rem; else: math.div($wrapper-height, 2));
 
   &::before,
   &::after {
@@ -36,6 +36,7 @@
     border-top-color: var(--decorator-color);
     border-radius: $border-radius;
     box-sizing: border-box;
+    pointer-events: none;
   }
 
   &::before {
@@ -43,7 +44,7 @@
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
     $clip-height: 0.25rem;
-    $clip-width: if($variant == "outlined", 0.9375rem, 0.25rem);
+    $clip-width: if(sass($variant == "outlined"): 0.9375rem; else: 0.25rem);
 
     @if $dense == true and $variant == "outlined" {
       $clip-width: math.div($clip-width, 1.4);

package/dist/css/mixins/_table.scss

@@ -18,7 +18,7 @@
   }
 
   :is(th, td) {
-    border-bottom: 0.0625rem solid var(--outline);
+    border-bottom: 0.0625rem solid var(--outline-variant);
   }
 
   &--sm,

package/dist/css/mixins/_toolbar.scss

@@ -3,5 +3,5 @@
   align-items: center;
   justify-content: flex-start;
   white-space: nowrap;
-  gap: 1rem;
+  gap: 0;
 }

package/dist/css/shared/q-field.scss

@@ -7,11 +7,15 @@
   $wrapper-height-dense: 2.5rem;
 
   display: flex;
+  min-width: 0;
+  max-width: 100%;
 
   &__inner {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+    min-width: 0;
+    max-width: 100%;
   }
 
   &__wrapper {
@@ -19,6 +23,8 @@
     display: flex;
     position: relative;
     height: $wrapper-height;
+    min-width: 0;
+    max-width: 100%;
   }
 
   &--dense &__wrapper {
@@ -268,11 +274,6 @@
     padding-top: 0.9375rem;
   }
 
-  &--focus#{&}--default &__input,
-  &--focus#{&}--filled &__input {
-    padding-top: 1rem;
-  }
-
   &--rounded &__input {
     padding: 0 1.4375rem;
   }
@@ -341,7 +342,7 @@
     padding-left: 0.75rem;
   }
 
-  &--disable {
+  &--disabled {
     opacity: 0.5;
     &,
     * {

package/dist/css/theme/_page.scss

@@ -2,16 +2,18 @@
 @use "$css/variables";
 
 .q-page {
+  width: 100%;
   max-width: 75rem;
-  margin: 0 auto;
-  padding: 4rem 1.5rem;
+  margin-inline: auto;
+  padding-block: variables.$space-lg;
+  padding-inline: variables.$space-md;
   line-height: 1.5;
 
-  @media only screen and (max-width: #{map.get(variables.$breakpoints, md) - 1px}) {
-    padding: 3rem 1.25rem;
+  @media only screen and (min-width: #{map.get(variables.$breakpoints, sm)}) {
+    padding-inline: variables.$space-lg;
   }
 
-  @media only screen and (min-width: #{map.get(variables.$breakpoints, md)}) and (max-width: #{map.get(variables.$breakpoints, lg) - 1px}) {
-    padding: 3.5rem 1.5rem;
+  @media only screen and (min-width: #{map.get(variables.$breakpoints, lg)}) {
+    padding-block: 2rem;
   }
 }

package/dist/css/theme/_reset.scss

@@ -17,7 +17,8 @@ body {
   background-color: var(--surface);
 }
 
-body {
+body,
+body > div:not(.q-tooltip):not([data-quaff-overlay]) {
   background-color: var(--surface-container-lowest);
   overflow-x: hidden;
   height: 100vh;

package/dist/helpers/clickOutside.js

@@ -1,3 +1,4 @@
+import { on } from "svelte/events";
 export function clickOutside(node, onEventFunction) {
     const handleClick = (event) => {
         const path = event.composedPath();
@@ -5,10 +6,10 @@ export function clickOutside(node, onEventFunction) {
             onEventFunction();
         }
     };
-    document.addEventListener("click", handleClick);
+    const removeClickListener = on(document, "click", handleClick);
     return {
         destroy() {
-            document.removeEventListener("click", handleClick);
+            removeClickListener();
         },
     };
 }
@@ -26,10 +27,10 @@ export function clickOutsideDialog(node, onEventFunction) {
             onEventFunction();
         }
     };
-    document.addEventListener("click", handleClick);
+    const removeClickListener = on(document, "click", handleClick);
     return {
         destroy() {
-            document.removeEventListener("click", handleClick);
+            removeClickListener();
         },
     };
 }

package/dist/helpers/ripple.js

@@ -1,3 +1,4 @@
+import { on } from "svelte/events";
 const triggerEvents = ["pointerdown", "touchstart", "keydown"];
 const cancelEvents = ["mouseleave", "dragleave", "touchmove", "touchcancel", "pointerup", "keyup"];
 export function ripple(el, options = {}) {
@@ -71,16 +72,14 @@ export function ripple(el, options = {}) {
             setTimeout(() => {
                 ripple.remove();
             }, options.duration || 1000);
-            cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
+            removeCancelListeners.forEach((removeCancelListener) => removeCancelListener());
         }
-        cancelEvents.forEach((event) => el.addEventListener(event, removeRipple, { passive: true }));
+        const removeCancelListeners = cancelEvents.map((event) => on(el, event, removeRipple, { passive: true }));
     }
-    triggerEvents.forEach((event) => el.addEventListener(event, createRipple, { passive: event === "touchstart" }));
+    const removeTriggerListeners = triggerEvents.map((event) => on(el, event, createRipple, { passive: event === "touchstart" }));
     return {
         destroy() {
-            triggerEvents.forEach((event) => {
-                el.removeEventListener(event, createRipple);
-            });
+            removeTriggerListeners.forEach((removeTriggerListener) => removeTriggerListener());
         },
         update(newOptions) {
             options = newOptions;

package/dist/helpers/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.0.0-beta1";
+declare const _default: "1.0.0-beta13";
 export default _default;

package/dist/helpers/version.js

@@ -1 +1 @@
-export default "1.0.0-beta1";
+export default "1.0.0-beta13";

package/dist/{components/private/ContextReseter.svelte → internal/ContextResetter.svelte}

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { QContext } from "../../classes/QContext.svelte";
-  import type { Snippet } from "svelte";
+  import { setContext, type Snippet } from "svelte";
 
   let {
     keys,
@@ -11,7 +10,7 @@
   } = $props();
 
   const keysArr = Array.isArray(keys) ? keys : [keys];
-  keysArr.forEach((key) => QContext.reset(key));
+  keysArr.forEach((key) => setContext(key, undefined));
 </script>
 
 {@render children?.()}

package/dist/internal/ContextResetter.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    keys: symbol | symbol[];
+    children?: Snippet;
+};
+declare const ContextResetter: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextResetter = ReturnType<typeof ContextResetter>;
+export default ContextResetter;

package/dist/{components/private → internal}/QIconSnippet.svelte

@@ -1,7 +1,7 @@
 <!-- This component should be used when an icon can be set from props. The icon can either be undefined, a string or a Snippet so this componnet handles it all. -->
 <script lang="ts">
-  import QIcon from "../icon/QIcon.svelte";
-  import type { QIconProps } from "../icon/props";
+  import QIcon from "../components/icon/QIcon.svelte";
+  import type { QIconProps } from "../components/icon/props";
   import type { MaterialSymbol } from "material-symbols";
   import type { Snippet } from "svelte";
 

package/dist/internal/QIconSnippet.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { QIconProps } from "../components/icon/props";
+import type { MaterialSymbol } from "material-symbols";
+import type { Snippet } from "svelte";
+interface IconSnippetProps extends Omit<QIconProps, "name"> {
+    icon?: MaterialSymbol | Snippet;
+    defaultIcon?: MaterialSymbol | Snippet;
+}
+declare const QIconSnippet: import("svelte").Component<IconSnippetProps, {}, "">;
+type QIconSnippet = ReturnType<typeof QIconSnippet>;
+export default QIconSnippet;

package/dist/utils/context.d.ts

@@ -1,33 +1,50 @@
-export declare const QBreadcrumbsCtxName: {
-    activeColor: symbol;
-    separator: symbol;
-};
-export declare const QDocsCtxName: {
-    snippets: symbol;
-};
-export declare const QItemCtxName: {
-    activeClass: symbol;
-    multiline: symbol;
-};
-export declare const QLayoutCtxName: {
-    view: symbol;
-    header: symbol;
-    footer: symbol;
-    railbar: {
-        left: symbol;
-        right: symbol;
-    };
-    drawer: {
-        left: symbol;
-        right: symbol;
-    };
-};
-export declare const QListCtxName: {
-    activeClass: symbol;
-    separator: symbol;
-};
-export declare const QTabsCtxName: {
-    request: symbol;
-    value: symbol;
-    variant: symbol;
+/**
+ * This function allows to manipulate contexts more easily.
+ * Coupled with the class preprocessor, it avoids having to bother with reactivity as it automatically creates getters and setters from a typed interface.
+ */
+export declare function QContext<T>(name: string): {
+    /**
+     * The inner symbol used to identify the context.
+     */
+    readonly symbol: symbol;
+    /**
+     * Get the context value.
+     * @returns The context value or undefined if not found.
+     */
+    get(): T | undefined;
+    /**
+     * Get the context value or throw an error if not found.
+     *
+     * @param errorMsg Optional error message to throw if context is not found.
+     * @returns The context value.
+     * @throws Error if context is not found.
+     */
+    assertGet(errorMsg?: string): NonNullable<T>;
+    /**
+     * Set the context value.
+     * @param context The context value to set.
+     */
+    set(context: T): void;
+    /**
+     * Reset the context value.
+     */
+    reset(): void;
+    /**
+     * Checks whether the context exists.
+     * @returns True if the context exists, false otherwise.
+     */
+    exists(): boolean;
+    /**
+     * Update one entry of the context.
+     *
+     * @param key The key of the entry to update.
+     * @param value The new value for the entry.
+     */
+    updateEntry(key: keyof T, value: NonNullable<T>[keyof T]): void;
+    /**
+     * Update multiple entries of the context.
+     *
+     * @param updates The key/value pairs to update in the context.
+     */
+    updateEntries(updates: Partial<T>): void;
 };

package/dist/utils/context.js

@@ -1,33 +1,82 @@
-export const QBreadcrumbsCtxName = {
-    activeColor: Symbol("activeColor"),
-    separator: Symbol("separator"),
-};
-export const QDocsCtxName = {
-    snippets: Symbol("snippets"),
-};
-export const QItemCtxName = {
-    activeClass: Symbol("activeClass"),
-    multiline: Symbol("multiline"),
-};
-export const QLayoutCtxName = {
-    view: Symbol("layoutView"),
-    header: Symbol("QHeader"),
-    footer: Symbol("QFooter"),
-    railbar: {
-        left: Symbol("QRailbar-left"),
-        right: Symbol("QRailbar-right"),
-    },
-    drawer: {
-        left: Symbol("QDrawer-left"),
-        right: Symbol("QDrawer-right"),
-    },
-};
-export const QListCtxName = {
-    activeClass: Symbol("activeClass"),
-    separator: Symbol("separator"),
-};
-export const QTabsCtxName = {
-    request: Symbol("request"),
-    value: Symbol("value"),
-    variant: Symbol("variant"),
-};
+import { getContext, hasContext, setContext } from "svelte";
+/**
+ * This function allows to manipulate contexts more easily.
+ * Coupled with the class preprocessor, it avoids having to bother with reactivity as it automatically creates getters and setters from a typed interface.
+ */
+export function QContext(name) {
+    const sym = Symbol(name);
+    return {
+        /**
+         * The inner symbol used to identify the context.
+         */
+        get symbol() {
+            return sym;
+        },
+        /**
+         * Get the context value.
+         * @returns The context value or undefined if not found.
+         */
+        get() {
+            return getContext(sym);
+        },
+        /**
+         * Get the context value or throw an error if not found.
+         *
+         * @param errorMsg Optional error message to throw if context is not found.
+         * @returns The context value.
+         * @throws Error if context is not found.
+         */
+        assertGet(errorMsg) {
+            const ctx = getContext(sym);
+            if (!ctx) {
+                throw new Error(errorMsg || `Context "${name}" not found`);
+            }
+            return ctx;
+        },
+        /**
+         * Set the context value.
+         * @param context The context value to set.
+         */
+        set(context) {
+            setContext(sym, context);
+        },
+        /**
+         * Reset the context value.
+         */
+        reset() {
+            setContext(sym, undefined);
+        },
+        /**
+         * Checks whether the context exists.
+         * @returns True if the context exists, false otherwise.
+         */
+        exists() {
+            return hasContext(sym);
+        },
+        /**
+         * Update one entry of the context.
+         *
+         * @param key The key of the entry to update.
+         * @param value The new value for the entry.
+         */
+        updateEntry(key, value) {
+            const ctx = getContext(sym);
+            if (!ctx) {
+                return;
+            }
+            ctx[key] = value;
+        },
+        /**
+         * Update multiple entries of the context.
+         *
+         * @param updates The key/value pairs to update in the context.
+         */
+        updateEntries(updates) {
+            const ctx = getContext(sym);
+            if (!ctx) {
+                return;
+            }
+            Object.assign(ctx, updates);
+        },
+    };
+}

package/dist/utils/dom.d.ts

@@ -1,4 +1,10 @@
 import type { Direction } from "./events";
+import type { Action } from "svelte/action";
+export type PortalTarget = ParentNode | undefined;
+export declare const usePortal: Action<HTMLElement, PortalTarget>;
+export declare function getDialogOverlayRoot(dialog: HTMLDialogElement): ParentNode;
+export declare function doesOverlayUsePopover(from: HTMLElement | null | undefined): boolean;
+export declare function getOverlayPortalTarget(from: HTMLElement | null | undefined): ParentNode;
 export declare function getParentElement(el: HTMLElement): HTMLElement;
 export declare function getAllChildren(el: HTMLElement): HTMLElement[];
 export declare function isFocusable(el: HTMLElement): boolean;

package/dist/utils/dom.js

@@ -1,3 +1,36 @@
+function resolvePortalTarget(target) {
+    return target ?? document.body;
+}
+export const usePortal = (node, target) => {
+    resolvePortalTarget(target).appendChild(node);
+    return {
+        update(newTarget) {
+            const parent = resolvePortalTarget(newTarget);
+            if (node.parentNode !== parent) {
+                node.remove();
+                parent.appendChild(node);
+            }
+        },
+        destroy() {
+            node.remove();
+        },
+    };
+};
+export function getDialogOverlayRoot(dialog) {
+    return dialog.querySelector("[data-quaff-overlay-root]") ?? dialog;
+}
+export function doesOverlayUsePopover(from) {
+    return (typeof HTMLElement !== "undefined" &&
+        "showPopover" in HTMLElement.prototype &&
+        !!from?.closest("dialog")?.open);
+}
+export function getOverlayPortalTarget(from) {
+    const dialog = from?.closest("dialog");
+    if (dialog?.open) {
+        return getDialogOverlayRoot(dialog);
+    }
+    return document.body;
+}
 export function getParentElement(el) {
     let parent = el.parentNode;
     while (parent && parent.nodeType !== 1) {

package/dist/utils/events.d.ts

@@ -11,27 +11,3 @@ export declare function isTabKey(e: KeyboardEvent): e is KeyboardEvent & {
 export declare function getDirection(e: KeyboardEvent & {
     code: "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
 }): Direction;
-type EventMap<T> = T extends HTMLElement ? HTMLElementEventMap : T extends typeof window ? WindowEventMap : DocumentEventMap;
-/**
- * Adds an event listener to an element.
- *
- * @param el The element to add the event listener to. If `null` or `undefined`, nothing is added.
- * @param event The event to listen for.
- * @param callback The function to call when the event is triggered.
- * @returns An object with a single method, `remove()`, which removes the event listener.
- */
-export declare function addEventListener<T extends HTMLElement | typeof window | typeof document, K extends keyof EventMap<T>>(el: T | undefined | null, event: K, callback: (e: EventMap<T>[K]) => void): {
-    remove: () => void;
-};
-/**
- * Adds multiple event listeners to an element.
- *
- * @param el The element to add the event listener to. If `null` or `undefined`, nothing is added.
- * @param events The events to listen for.
- * @param callback The function to call when any of the events are triggered.
- * @returns An object with a single method, `remove()`, which removes the event listeners.
- */
-export declare function addEventListener<T extends HTMLElement | typeof window | typeof document, K extends keyof EventMap<T>>(el: T | undefined | null, events: K[], callback: (e: EventMap<T>[K]) => void): {
-    remove: () => void;
-};
-export {};

package/dist/utils/events.js

@@ -11,27 +11,3 @@ export function isTabKey(e) {
 export function getDirection(e) {
     return ["ArrowDown", "ArrowRight"].includes(e.code) ? "next" : "previous";
 }
-/**
- * Adds one or more event listeners to an element.
- *
- * @param el The element to add the event listener(s) to. If `null` or `undefined`, no action is taken.
- * @param events An event or an array of events to listen for.
- * @param callback The function to call when the event(s) are triggered.
- * @returns An object with a `remove()` method to remove the event listener(s) added.
- */
-export function addEventListener(el, events, callback) {
-    if (!el) {
-        return;
-    }
-    if (Array.isArray(events)) {
-        const listeners = events.map((event) => addEventListener(el, event, callback));
-        return {
-            remove: () => listeners.forEach((listener) => listener.remove()),
-        };
-    }
-    // Type casting to align with the broader compatibility between HTMLElement, Window, and Document
-    el.addEventListener(events, callback);
-    return {
-        remove: () => el.removeEventListener(events, callback),
-    };
-}