@quaffui/quaff 0.1.0-prealpha21 → 0.1.0-prealpha22

package/dist/components/tabs/QTab.svelte

@@ -7,6 +7,7 @@
     getClosestFocusableBlock,
     getClosestFocusableSibling,
   } from "../../utils/dom";
+  import type { Direction } from "../../utils/events";
   import {
     getDirection,
     isActivationKey,
@@ -14,45 +15,67 @@
     isTabKey,
   } from "../../utils/events";
   import { isRouteActive } from "../../utils/router";
-  let { name, to, icon, children, ...props } = $props();
-  let qTab;
+  import type { QEvent } from "../../utils/types";
+  import type { QTabEl } from "./QTabs.svelte";
+  import type { QTabProps, QTabsVariants } from "./props";
+
+  type QTabEvent<T> = QEvent<T, QTabEl>;
+
+  let { name, to, icon, children, ...props }: QTabProps = $props();
+
+  let qTab: QTabEl;
+
   const tag = $derived(to ? "a" : "button");
+
   if (!hasContext("QTabsValue")) {
     console.warn("QTab should be use inside QTabs.");
   }
-  const qTabsRequestCtx = QContext.get("QTabsRequest");
-  const qTabsValueCtx = QContext.get("QTabsValue");
-  const variant = getContext("QTabsVariant");
+
+  const qTabsRequestCtx = QContext.get<string | null>("QTabsRequest")!;
+
+  const qTabsValueCtx = QContext.get<string | undefined | null>("QTabsValue")!;
+  const variant = getContext<QTabsVariants>("QTabsVariant");
   const isActive = $derived(
     to ? $isRouteActive(to) : name === qTabsValueCtx.value,
   );
-  function onclick(e) {
+
+  function onclick(e: QTabEvent<MouseEvent>) {
     props.onclick?.(e);
+
     if (e.defaultPrevented || isActive) {
       return;
     }
+
     qTabsRequestCtx.update(name);
   }
-  function onkeydown(e) {
+
+  function onkeydown(e: QTabEvent<KeyboardEvent>) {
     props.onkeydown?.(e);
+
     if (isActivationKey(e)) {
       e.preventDefault();
-      const click = new MouseEvent("click");
+
+      const click = new MouseEvent("click") as QTabEvent<MouseEvent>;
       return onclick(click);
     }
+
     if (isArrowKey(e)) {
       e.preventDefault();
       const direction = getDirection(e);
       const targetTab = getClosestFocusableSibling(qTab, direction);
+
       if (targetTab === qTab) {
         return;
       }
+
       return targetTab?.focus();
     }
+
     if (isTabKey(e)) {
       e.preventDefault();
-      const direction = e.shiftKey ? "previous" : "next";
+      const direction: Direction = e.shiftKey ? "previous" : "next";
       const targetBlock = getClosestFocusableBlock(qTab, direction);
+
       targetBlock?.focus();
     }
   }

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

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

package/dist/components/tabs/QTabs.svelte

@@ -1,39 +1,63 @@
-<script context="module" lang="ts"></script>
+<script context="module" lang="ts">
+  export type QTabEl = HTMLAnchorElement | HTMLButtonElement;
+  export type QTabsElementsContext = {
+    previous: QTabEl | null;
+    active: QTabEl | null;
+  };
+</script>
 
 <script lang="ts">
   import { setContext, untrack } from "svelte";
   import QContext from "../../classes/QContext.svelte";
   import { shouldReduceMotion } from "../../utils/dom";
+  import type { QTabsProps } from "./props";
+
   let {
     value = $bindable(),
     variant = "primary",
     round = false,
     children,
     ...props
-  } = $props();
-  let qTabs;
-  let tabList;
-  const valueContext = new QContext("QTabsValue", value);
-  const requestContext = new QContext("QTabsRequest", null);
+  }: QTabsProps = $props();
+
+  let qTabs: HTMLElement;
+  let tabList: HTMLElement[];
+
+  const valueContext = new QContext<string | undefined | null>(
+    "QTabsValue",
+    value,
+  );
+  const requestContext = new QContext<string | null>("QTabsRequest", null);
+
+  // Set the variant context
   setContext("QTabsVariant", variant);
+
   $effect(() => {
     tabList = Array.from(qTabs.querySelectorAll(".q-tab"));
   });
+
+  // Update the context when "value" changes
   $effect(() => {
     if (!value) {
       return;
     }
+
     untrack(() => {
-      const newTab = getResquetingTab(value);
+      const newTab = getResquetingTab(value!);
       animateIndicator(newTab);
+
       valueContext.update(value);
     });
   });
+
+  // Try to update "value" when context changes from a QTab
   $effect(() => {
     const request = requestContext.value;
+
     if (!request) {
       return;
     }
+
     const defaultPrevented = !dispatchEvent(
       new Event("change", { bubbles: true, cancelable: true }),
     );
@@ -41,30 +65,37 @@
     if (defaultPrevented || !requester) {
       return;
     }
+
     untrack(() => {
       value = request;
     });
   });
-  function getResquetingTab(requestingTabName) {
+
+  function getResquetingTab(requestingTabName: string) {
     return (
       tabList.find(
         (tab) => tab.getAttribute("aria-label") === requestingTabName,
       ) ?? null
     );
   }
+
   function getActiveTab() {
     return (
       tabList.find((tab) => tab.getAttribute("aria-current") === "true") ?? null
     );
   }
-  function animateIndicator(newTab) {
+
+  function animateIndicator(newTab: HTMLElement | null) {
     const qIndicator = newTab?.querySelector(".q-tab__indicator");
+
     if (!qIndicator) {
       return;
     }
+
     const previousTab = getActiveTab();
+
     qIndicator.getAnimations().forEach((animation) => animation.cancel());
-    const frames = getKeyframes(previousTab, newTab);
+    const frames = getKeyframes(previousTab, newTab!);
     if (frames) {
       qIndicator.animate(frames, {
         duration: 600,
@@ -72,30 +103,38 @@
       });
     }
   }
-  function getKeyframes(oldTab, newTab) {
+
+  function getKeyframes(oldTab: HTMLElement | null, newTab: HTMLElement) {
     const reduceMotion = shouldReduceMotion();
     if (!oldTab) {
       return reduceMotion ? [{ opacity: 1 }, { transform: "none" }] : null;
     }
+
     const previousEl =
       variant === "primary" ? oldTab?.querySelector(".q-tab__content") : oldTab;
     const activeEl =
       variant === "primary" ? newTab?.querySelector(".q-tab__content") : newTab;
+
     const pos = variant === "vertical" ? "top" : "left";
     const extent = variant === "vertical" ? "height" : "width";
     const axis = variant === "vertical" ? "Y" : "X";
-    const fromRect = previousEl?.getBoundingClientRect() ?? {};
+
+    const fromRect = previousEl?.getBoundingClientRect() ?? ({} as DOMRect);
     const fromPos = fromRect[pos];
     const fromExtent = fromRect[extent];
-    const toRect = activeEl?.getBoundingClientRect() ?? {};
+
+    const toRect = activeEl?.getBoundingClientRect() ?? ({} as DOMRect);
     const toPos = toRect[pos];
     const toExtent = toRect[extent];
+
     const scale = fromExtent / toExtent;
-    const keyframe = {};
+
+    const keyframe: Keyframe = {};
+
     if (
       !reduceMotion &&
-      fromPos !== void 0 &&
-      toPos !== void 0 &&
+      fromPos !== undefined &&
+      toPos !== undefined &&
       !isNaN(scale)
     ) {
       const translateAnimation = (fromPos - toPos).toFixed(4);
@@ -104,6 +143,9 @@
     } else {
       keyframe.opacity = 0;
     }
+
+    // Including `transform: none` avoids quirky Safari behavior
+    // that can hide the animation.
     return [keyframe, { transform: "none" }];
   }
 </script>

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

@@ -1,8 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
 export type QTabEl = HTMLAnchorElement | HTMLButtonElement;
 export type QTabsElementsContext = {
     previous: QTabEl | null;
     active: QTabEl | null;
 };
-import type { QTabsProps } from "./props";
-declare const QTabs: import("svelte").Component<QTabsProps, {}, "value">;
-export default QTabs;
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type QTabsProps_ = typeof __propDef.props;
+export { QTabsProps_ as QTabsProps };
+export type QTabsEvents = typeof __propDef.events;
+export type QTabsSlots = typeof __propDef.slots;
+export default class QTabs extends SvelteComponentTyped<QTabsProps_, QTabsEvents, QTabsSlots> {
+}

package/dist/components/toolbar/QToolbar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { QToolbarProps } from "./props";
+
   let {
     inset = false,
     border = false,
@@ -6,7 +8,7 @@
     height = 64,
     children,
     ...props
-  } = $props();
+  }: QToolbarProps = $props();
 </script>
 
 <nav

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

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

package/dist/components/toolbar/QToolbarTitle.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  let { shrink = false, children, ...props } = $props();
+  import type { QToolbarTitleProps } from "./props";
+
+  let { shrink = false, children, ...props }: QToolbarTitleProps = $props();
 </script>
 
 <div

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

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

package/dist/components/tooltip/QTooltip.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
-  let { value, position = "bottom", children, ...props } = $props();
+  import type { QTooltipProps } from "./props";
+
+  let {
+    value,
+    position = "bottom",
+    children,
+    ...props
+  }: QTooltipProps = $props();
 </script>
 
 <div

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

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

package/dist/css/classes/_index.scss

@@ -1,7 +1,7 @@
-@import "design";
-@import "flex";
-@import "grid";
-@import "overflow";
-@import "position";
-@import "select";
-@import "spaces";
+@forward "design";
+@forward "flex";
+@forward "grid";
+@forward "overflow";
+@forward "position";
+@forward "select";
+@forward "spaces";

package/dist/css/fonts.scss

@@ -1,7 +1,8 @@
-@import "@fontsource/roboto";
+@use "sass:string";
+@use "@fontsource/roboto";
 
 @mixin font-face-declaration($font-name) {
-  $file-name: to-lower-case($font-name);
+  $file-name: string.to-lower-case($font-name);
 
   @font-face {
     font-family: "Material Symbols #{$font-name}";