@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

package/dist/css/theme/_colors.scss

@@ -0,0 +1,205 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+
+:root {
+  --primary-light: #2d54cc;
+  --on-primary-light: #ffffff;
+  --primary-container-light: #dce1ff;
+  --on-primary-container-light: #0039b4;
+  --secondary-light: #595d72;
+  --on-secondary-light: #ffffff;
+  --secondary-container-light: #dee1f9;
+  --on-secondary-container-light: #424659;
+  --tertiary-light: #75546f;
+  --on-tertiary-light: #ffffff;
+  --tertiary-container-light: #ffd7f5;
+  --on-tertiary-container-light: #5c3d57;
+  --error-light: #ba1a1a;
+  --on-error-light: #ffffff;
+  --error-container-light: #ffdad6;
+  --on-error-container-light: #93000a;
+  --background-light: #fbf8fd;
+  --inverse-on-surface-light: #f2f0f4;
+  --inverse-primary-light: #b7c4ff;
+  --inverse-surface-light: #303034;
+  --on-background-light: #1b1b1f;
+  --on-primary-fixed-light: #001551;
+  --on-primary-fixed-variant-light: #0039b4;
+  --on-secondary-fixed-light: #161b2c;
+  --on-secondary-fixed-variant-light: #424659;
+  --on-surface-light: #1b1b1f;
+  --on-surface-variant-light: #45464f;
+  --on-tertiary-fixed-light: #2c1229;
+  --on-tertiary-fixed-variant-light: #5c3d57;
+  --outline-light: #767680;
+  --outline-variant-light: #c6c5d0;
+  --primary-fixed-light: #dce1ff;
+  --primary-fixed-dim-light: #b7c4ff;
+  --scrim-light: #000000;
+  --secondary-fixed-light: #dee1f9;
+  --secondary-fixed-dim-light: #c2c5dd;
+  --shadow-light: #000000;
+  --surface-light: #fbf8fd;
+  --surface-bright-light: #fbf8fd;
+  --surface-container-light: #efedf1;
+  --surface-container-high-light: #eae7ec;
+  --surface-container-highest-light: #e4e1e6;
+  --surface-container-low-light: #f5f3f7;
+  --surface-container-lowest-light: #ffffff;
+  --surface-dim-light: #dbd9de;
+  --surface-tint-light: #2d54cc;
+  --surface-variant-light: #e2e1ec;
+  --tertiary-fixed-light: #ffd7f5;
+  --tertiary-fixed-dim-light: #e3bada;
+  --primary-dark: #b7c4ff;
+  --on-primary-dark: #002681;
+  --primary-container-dark: #0039b4;
+  --on-primary-container-dark: #dce1ff;
+  --secondary-dark: #c2c5dd;
+  --on-secondary-dark: #2b3042;
+  --secondary-container-dark: #424659;
+  --on-secondary-container-dark: #dee1f9;
+  --tertiary-dark: #e3bada;
+  --on-tertiary-dark: #43273f;
+  --tertiary-container-dark: #5c3d57;
+  --on-tertiary-container-dark: #ffd7f5;
+  --error-dark: #ffb4ab;
+  --on-error-dark: #690005;
+  --error-container-dark: #93000a;
+  --on-error-container-dark: #ffdad6;
+  --background-dark: #131316;
+  --inverse-on-surface-dark: #303034;
+  --inverse-primary-dark: #2d54cc;
+  --inverse-surface-dark: #e4e1e6;
+  --on-background-dark: #e4e1e6;
+  --on-primary-fixed-dark: #001551;
+  --on-primary-fixed-variant-dark: #0039b4;
+  --on-secondary-fixed-dark: #161b2c;
+  --on-secondary-fixed-variant-dark: #424659;
+  --on-surface-dark: #e4e1e6;
+  --on-surface-variant-dark: #c6c5d0;
+  --on-tertiary-fixed-dark: #2c1229;
+  --on-tertiary-fixed-variant-dark: #5c3d57;
+  --outline-dark: #90909a;
+  --outline-variant-dark: #45464f;
+  --primary-fixed-dark: #dce1ff;
+  --primary-fixed-dim-dark: #b7c4ff;
+  --scrim-dark: #000000;
+  --secondary-fixed-dark: #dee1f9;
+  --secondary-fixed-dim-dark: #c2c5dd;
+  --shadow-dark: #000000;
+  --surface-dark: #131316;
+  --surface-bright-dark: #39393c;
+  --surface-container-dark: #1f1f23;
+  --surface-container-high-dark: #2a2a2d;
+  --surface-container-highest-dark: #343438;
+  --surface-container-low-dark: #1b1b1f;
+  --surface-container-lowest-dark: #0e0e11;
+  --surface-dim-dark: #131316;
+  --surface-tint-dark: #b7c4ff;
+  --surface-variant-dark: #45464f;
+  --tertiary-fixed-dark: #ffd7f5;
+  --tertiary-fixed-dim-dark: #e3bada;
+}
+
+.body--light {
+  --primary: var(--primary-light);
+  --on-primary: var(--on-primary-light);
+  --primary-container: var(--primary-container-light);
+  --on-primary-container: var(--on-primary-container-light);
+  --secondary: var(--secondary-light);
+  --on-secondary: var(--on-secondary-light);
+  --secondary-container: var(--secondary-container-light);
+  --on-secondary-container: var(--on-secondary-container-light);
+  --tertiary: var(--tertiary-light);
+  --on-tertiary: var(--on-tertiary-light);
+  --tertiary-container: var(--tertiary-container-light);
+  --on-tertiary-container: var(--on-tertiary-container-light);
+  --error: var(--error-light);
+  --on-error: var(--on-error-light);
+  --error-container: var(--error-container-light);
+  --on-error-container: var(--on-error-container-light);
+  --background: var(--background-light);
+  --inverse-on-surface: var(--inverse-on-surface-light);
+  --inverse-primary: var(--inverse-primary-light);
+  --inverse-surface: var(--inverse-surface-light);
+  --on-background: var(--on-background-light);
+  --on-primary-fixed: var(--on-primary-fixed-light);
+  --on-primary-fixed-variant: var(--on-primary-fixed-variant-light);
+  --on-secondary-fixed: var(--on-secondary-fixed-light);
+  --on-secondary-fixed-variant: var(--on-secondary-fixed-variant-light);
+  --on-surface: var(--on-surface-light);
+  --on-surface-variant: var(--on-surface-variant-light);
+  --on-tertiary-fixed: var(--on-tertiary-fixed-light);
+  --on-tertiary-fixed-variant: var(--on-tertiary-fixed-variant-light);
+  --outline: var(--outline-light);
+  --outline-variant: var(--outline-variant-light);
+  --primary-fixed: var(--primary-fixed-light);
+  --primary-fixed-dim: var(--primary-fixed-dim-light);
+  --scrim: var(--scrim-light);
+  --secondary-fixed: var(--secondary-fixed-light);
+  --secondary-fixed-dim: var(--secondary-fixed-dim-light);
+  --shadow: var(--shadow-light);
+  --surface: var(--surface-light);
+  --surface-bright: var(--surface-bright-light);
+  --surface-container: var(--surface-container-light);
+  --surface-container-high: var(--surface-container-high-light);
+  --surface-container-highest: var(--surface-container-highest-light);
+  --surface-container-low: var(--surface-container-low-light);
+  --surface-container-lowest: var(--surface-container-lowest-light);
+  --surface-dim: var(--surface-dim-light);
+  --surface-tint: var(--surface-tint-light);
+  --surface-variant: var(--surface-variant-light);
+  --tertiary-fixed: var(--tertiary-fixed-light);
+  --tertiary-fixed-dim: var(--tertiary-fixed-dim-light);
+}
+.body--dark {
+  --primary: var(--primary-dark);
+  --on-primary: var(--on-primary-dark);
+  --primary-container: var(--primary-container-dark);
+  --on-primary-container: var(--on-primary-container-dark);
+  --secondary: var(--secondary-dark);
+  --on-secondary: var(--on-secondary-dark);
+  --secondary-container: var(--secondary-container-dark);
+  --on-secondary-container: var(--on-secondary-container-dark);
+  --tertiary: var(--tertiary-dark);
+  --on-tertiary: var(--on-tertiary-dark);
+  --tertiary-container: var(--tertiary-container-dark);
+  --on-tertiary-container: var(--on-tertiary-container-dark);
+  --error: var(--error-dark);
+  --on-error: var(--on-error-dark);
+  --error-container: var(--error-container-dark);
+  --on-error-container: var(--on-error-container-dark);
+  --background: var(--background-dark);
+  --inverse-on-surface: var(--inverse-on-surface-dark);
+  --inverse-primary: var(--inverse-primary-dark);
+  --inverse-surface: var(--inverse-surface-dark);
+  --on-background: var(--on-background-dark);
+  --on-primary-fixed: var(--on-primary-fixed-dark);
+  --on-primary-fixed-variant: var(--on-primary-fixed-variant-dark);
+  --on-secondary-fixed: var(--on-secondary-fixed-dark);
+  --on-secondary-fixed-variant: var(--on-secondary-fixed-variant-dark);
+  --on-surface: var(--on-surface-dark);
+  --on-surface-variant: var(--on-surface-variant-dark);
+  --on-tertiary-fixed: var(--on-tertiary-fixed-dark);
+  --on-tertiary-fixed-variant: var(--on-tertiary-fixed-variant-dark);
+  --outline: var(--outline-dark);
+  --outline-variant: var(--outline-variant-dark);
+  --primary-fixed: var(--primary-fixed-dark);
+  --primary-fixed-dim: var(--primary-fixed-dim-dark);
+  --scrim: var(--scrim-dark);
+  --secondary-fixed: var(--secondary-fixed-dark);
+  --secondary-fixed-dim: var(--secondary-fixed-dim-dark);
+  --shadow: var(--shadow-dark);
+  --surface: var(--surface-dark);
+  --surface-bright: var(--surface-bright-dark);
+  --surface-container: var(--surface-container-dark);
+  --surface-container-high: var(--surface-container-high-dark);
+  --surface-container-highest: var(--surface-container-highest-dark);
+  --surface-container-low: var(--surface-container-low-dark);
+  --surface-container-lowest: var(--surface-container-lowest-dark);
+  --surface-dim: var(--surface-dim-dark);
+  --surface-tint: var(--surface-tint-dark);
+  --surface-variant: var(--surface-variant-dark);
+  --tertiary-fixed: var(--tertiary-fixed-dark);
+  --tertiary-fixed-dim: var(--tertiary-fixed-dim-dark);
+}

package/dist/css/theme/_css-variables.scss

@@ -0,0 +1,5 @@
+:root {
+  --size: 16px;
+  --font: Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
+  --font-icon: "Material Symbols Outlined";
+}

package/dist/css/theme/_index.scss

@@ -0,0 +1,12 @@
+@forward "colors";
+@forward "color-classes";
+@forward "palette";
+
+@forward "reset";
+@forward "css-variables";
+@forward "page";
+@forward "elevate";
+
+@forward "typography";
+@forward "typography-classes";
+@forward "typography-variables";

package/dist/css/theme/_page.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+@use "$css/variables";
+
+.q-page {
+  max-width: 75rem;
+  margin: 0 auto;
+  padding: 4rem 1.5rem;
+  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, md)}) and (max-width: #{map.get(variables.$breakpoints, lg) - 1px}) {
+    padding: 3.5rem 1.5rem;
+  }
+}

package/dist/css/theme/{palette.scss → _palette.scss}

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 $red6: #f44336;
 
 $red1: #ffebee;
@@ -609,25 +611,45 @@ $colors-list: (
   ),
 );
 
-@each $color-name, $color-values in $colors-list {
-  @for $i from 1 through length($color-values) {
-    $color: nth($color-values, $i);
+:root {
+  @each $color-name, $color-values in $colors-list {
+    @for $i from 1 through list.length($color-values) {
+      $color: list.nth($color-values, $i);
+      $var-name: "--color-#{$color-name}-#{$i}";
+      #{$var-name}: $color;
+
+      @if $i == 6 {
+        $var-name-default: "--color-#{$color-name}";
+        #{$var-name-default}: $color;
+      }
+    }
+  }
+}
 
+@each $color-name, $color-values in $colors-list {
+  @for $i from 1 through list.length($color-values) {
+    $var-name: "--color-#{$color-name}-#{$i}";
     $text-selector: ".text-#{$color-name}-#{$i}";
     $bg-selector: ".bg-#{$color-name}-#{$i}";
+    $border-selector: ".border-#{$color-name}-#{$i}";
 
     // Color 6 is also the "default" color
     @if $i == 6 {
       $text-selector: ".text-#{$color-name}, #{$text-selector}";
       $bg-selector: ".bg-#{$color-name}, #{$bg-selector}";
+      $border-selector: ".border-#{$color-name}, #{$border-selector}";
     }
 
     #{$text-selector} {
-      color: $color;
+      color: var(#{$var-name}) !important;
     }
 
     #{$bg-selector} {
-      background-color: $color;
+      background-color: var(#{$var-name}) !important;
+    }
+
+    #{$border-selector} {
+      border-color: var(#{$var-name}) !important;
     }
   }
 }

package/dist/css/theme/{reset.scss → _reset.scss}

@@ -9,10 +9,19 @@
   box-sizing: border-box;
 }
 
+html,
 body {
-  color: var(--on-background);
-  background-color: var(--body);
+  min-height: 100%;
+  width: 100%;
+  color: var(--on-surface);
+  background-color: var(--surface);
+}
+
+body {
+  background-color: var(--surface-container-lowest);
   overflow-x: hidden;
+  height: 100vh;
+  width: 100%;
 }
 
 label {

package/dist/css/theme/_typography-variables.scss

@@ -0,0 +1,107 @@
+:root {
+  /* display - large */
+  --typescale-display-large-font-family-name: Roboto, sans-serif;
+  --typescale-display-large-font-family-style: Regular;
+  --typescale-display-large-font-weight: 400px;
+  --typescale-display-large-font-size: 57px;
+  --typescale-display-large-line-height: 64px;
+  --typescale-display-large-letter-spacing: -0.25px;
+  /* display - medium */
+  --typescale-display-medium-font-family-name: Roboto, sans-serif;
+  --typescale-display-medium-font-family-style: Regular;
+  --typescale-display-medium-font-weight: 400px;
+  --typescale-display-medium-font-size: 45px;
+  --typescale-display-medium-line-height: 52px;
+  --typescale-display-medium-letter-spacing: 0px;
+  /* display - small */
+  --typescale-display-small-font-family-name: Roboto, sans-serif;
+  --typescale-display-small-font-family-style: Regular;
+  --typescale-display-small-font-weight: 400px;
+  --typescale-display-small-font-size: 36px;
+  --typescale-display-small-line-height: 44px;
+  --typescale-display-small-letter-spacing: 0px;
+  /* headline - large */
+  --typescale-headline-large-font-family-name: Roboto, sans-serif;
+  --typescale-headline-large-font-family-style: Regular;
+  --typescale-headline-large-font-weight: 400px;
+  --typescale-headline-large-font-size: 32px;
+  --typescale-headline-large-line-height: 40px;
+  --typescale-headline-large-letter-spacing: 0px;
+  /* headline - medium */
+  --typescale-headline-medium-font-family-name: Roboto, sans-serif;
+  --typescale-headline-medium-font-family-style: Regular;
+  --typescale-headline-medium-font-weight: 400px;
+  --typescale-headline-medium-font-size: 28px;
+  --typescale-headline-medium-line-height: 36px;
+  --typescale-headline-medium-letter-spacing: 0px;
+  /* headline - small */
+  --typescale-headline-small-font-family-name: Roboto, sans-serif;
+  --typescale-headline-small-font-family-style: Regular;
+  --typescale-headline-small-font-weight: 400px;
+  --typescale-headline-small-font-size: 24px;
+  --typescale-headline-small-line-height: 32px;
+  --typescale-headline-small-letter-spacing: 0px;
+  /* body - large */
+  --typescale-body-large-font-family-name: Roboto, sans-serif;
+  --typescale-body-large-font-family-style: Regular;
+  --typescale-body-large-font-weight: 400px;
+  --typescale-body-large-font-size: 16px;
+  --typescale-body-large-line-height: 24px;
+  --typescale-body-large-letter-spacing: 0.5px;
+  /* body - medium */
+  --typescale-body-medium-font-family-name: Roboto, sans-serif;
+  --typescale-body-medium-font-family-style: Regular;
+  --typescale-body-medium-font-weight: 400px;
+  --typescale-body-medium-font-size: 14px;
+  --typescale-body-medium-line-height: 20px;
+  --typescale-body-medium-letter-spacing: 0.25px;
+  /* body - small */
+  --typescale-body-small-font-family-name: Roboto, sans-serif;
+  --typescale-body-small-font-family-style: Regular;
+  --typescale-body-small-font-weight: 400px;
+  --typescale-body-small-font-size: 12px;
+  --typescale-body-small-line-height: 16px;
+  --typescale-body-small-letter-spacing: 0.4px;
+  /* label - large */
+  --typescale-label-large-font-family-name: Roboto, sans-serif;
+  --typescale-label-large-font-family-style: Medium;
+  --typescale-label-large-font-weight: 500px;
+  --typescale-label-large-font-size: 14px;
+  --typescale-label-large-line-height: 20px;
+  --typescale-label-large-letter-spacing: 0.1px;
+  /* label - medium */
+  --typescale-label-medium-font-family-name: Roboto, sans-serif;
+  --typescale-label-medium-font-family-style: Medium;
+  --typescale-label-medium-font-weight: 500px;
+  --typescale-label-medium-font-size: 12px;
+  --typescale-label-medium-line-height: 16px;
+  --typescale-label-medium-letter-spacing: 0.5px;
+  /* label - small */
+  --typescale-label-small-font-family-name: Roboto, sans-serif;
+  --typescale-label-small-font-family-style: Medium;
+  --typescale-label-small-font-weight: 500px;
+  --typescale-label-small-font-size: 11px;
+  --typescale-label-small-line-height: 16px;
+  --typescale-label-small-letter-spacing: 0.5px;
+  /* title - large */
+  --typescale-title-large-font-family-name: Roboto, sans-serif;
+  --typescale-title-large-font-family-style: Regular;
+  --typescale-title-large-font-weight: 400px;
+  --typescale-title-large-font-size: 22px;
+  --typescale-title-large-line-height: 28px;
+  --typescale-title-large-letter-spacing: 0px;
+  /* title - medium */
+  --typescale-title-medium-font-family-name: Roboto, sans-serif;
+  --typescale-title-medium-font-family-style: Medium;
+  --typescale-title-medium-font-weight: 500px;
+  --typescale-title-medium-font-size: 16px;
+  --typescale-title-medium-line-height: 24px;
+  --typescale-title-medium-letter-spacing: 0.15px;
+  /* title - small */
+  --typescale-title-small-font-family-name: Roboto, sans-serif;
+  --typescale-title-small-font-family-style: Medium;
+  --typescale-title-small-font-weight: 500px;
+  --typescale-title-small-font-size: 14px;
+  --typescale-title-small-line-height: 20px;
+  --typescale-title-small-letter-spacing: 0.1px;
+}

package/dist/global.d.ts

@@ -1,4 +1,4 @@
-declare var __PLATFORM__:
+declare let __PLATFORM__:
   | "aix"
   | "darwin"
   | "freebsd"

package/dist/helpers/clickOutside.d.ts

@@ -1,6 +1,6 @@
-export declare function clickOutside(node: HTMLElement, onEventFunction: () => any): {
+export declare function clickOutside(node: HTMLElement, onEventFunction: () => unknown): {
     destroy(): void;
 };
-export declare function clickOutsideDialog(node: HTMLDialogElement, onEventFunction: () => any): {
+export declare function clickOutsideDialog(node: HTMLDialogElement, onEventFunction: () => unknown): {
     destroy(): void;
 };

package/dist/helpers/clickOutside.js

@@ -1,6 +1,6 @@
 export function clickOutside(node, onEventFunction) {
     const handleClick = (event) => {
-        let path = event.composedPath();
+        const path = event.composedPath();
         if (!path.includes(node)) {
             onEventFunction();
         }
@@ -14,10 +14,11 @@ export function clickOutside(node, onEventFunction) {
 }
 export function clickOutsideDialog(node, onEventFunction) {
     const handleClick = (event) => {
-        if (!node.open)
+        if (!node.open) {
             return;
-        let rect = node.getBoundingClientRect();
-        let isInDialog = rect.top <= event.clientY &&
+        }
+        const rect = node.getBoundingClientRect();
+        const isInDialog = rect.top <= event.clientY &&
             event.clientY <= rect.top + rect.height &&
             rect.left <= event.clientX &&
             event.clientX <= rect.left + rect.width;

package/dist/helpers/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./clickOutside";
-export * from "./activationHandler";
+export * from "./ripple";
+export { default as version } from "./version";

package/dist/helpers/index.js

@@ -1,2 +1,3 @@
 export * from "./clickOutside";
-export * from "./activationHandler";
+export * from "./ripple";
+export { default as version } from "./version";

package/dist/helpers/pageTitle.d.ts

@@ -0,0 +1 @@
+export declare function pageTitle(title: string): string;

package/dist/helpers/pageTitle.js

@@ -0,0 +1,3 @@
+export function pageTitle(title) {
+    return `${title} • Quaff`;
+}

package/dist/helpers/ripple.d.ts

@@ -2,6 +2,7 @@ interface RippleOptions {
     center?: boolean;
     color?: string;
     duration?: number;
+    disabled?: boolean;
 }
 export declare function ripple(el: HTMLElement, options?: RippleOptions): {
     destroy(): void;

package/dist/helpers/ripple.js

@@ -1,32 +1,42 @@
 const triggerEvents = ["pointerdown", "touchstart", "keydown"];
 const cancelEvents = ["mouseleave", "dragleave", "touchmove", "touchcancel", "pointerup", "keyup"];
 export function ripple(el, options = {}) {
+    const rippleContainer = document.createElement("div");
+    addClasses();
+    setOptions(options);
     function addClasses(center) {
-        let shouldBeCentered = center || options.center;
-        if (!el.classList.contains("q-ripple--effect")) {
-            el.classList.add("q-ripple--effect");
+        const shouldBeCentered = center || options.center;
+        if (!rippleContainer.classList.contains("q-ripple--effect")) {
+            rippleContainer.classList.add("q-ripple--effect");
+        }
+        if (!shouldBeCentered && rippleContainer.classList.contains("q-ripple--center")) {
+            rippleContainer.classList.remove("q-ripple--center");
         }
-        if (!shouldBeCentered && el.classList.contains("q-ripple--center")) {
-            el.classList.remove("q-ripple--center");
+        if (shouldBeCentered) {
+            rippleContainer.classList.add("q-ripple--center");
         }
-        shouldBeCentered && el.classList.add("q-ripple--center");
     }
     function setOptions(options) {
+        if (options.disabled || el.hasAttribute("aria-disabled")) {
+            rippleContainer.remove();
+        }
+        else {
+            el.appendChild(rippleContainer);
+        }
         if (options.duration && options.duration < 0) {
             options.duration = undefined;
         }
         if (options.color) {
-            el.style.setProperty("--ripple-color", options.color);
+            rippleContainer.style.setProperty("--ripple-color", options.color);
         }
         if (options.duration) {
-            el.style.setProperty("--ripple-duration", `${options.duration}ms`);
+            rippleContainer.style.setProperty("--ripple-duration", `${options.duration}ms`);
         }
     }
-    addClasses();
-    setOptions(options);
     function createRipple(e, center) {
-        if (el.hasAttribute("aria-disabled"))
+        if (options.disabled || el.hasAttribute("aria-disabled")) {
             return;
+        }
         if (e instanceof KeyboardEvent) {
             if (!["Enter", "Space"].includes(e.code) || e.repeat) {
                 return;
@@ -38,8 +48,12 @@ export function ripple(el, options = {}) {
         }
         addClasses(center);
         const rect = el.getBoundingClientRect();
-        const clientX = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
-        const clientY = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
+        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));
@@ -48,17 +62,18 @@ export function ripple(el, options = {}) {
         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);
+        rippleContainer.appendChild(ripple);
         function removeRipple() {
-            if (ripple === null)
+            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));
+        cancelEvents.forEach((event) => el.addEventListener(event, removeRipple, { passive: true }));
     }
     triggerEvents.forEach((event) => el.addEventListener(event, createRipple, { passive: event === "touchstart" }));
     return {

package/dist/helpers/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.1.0-prealpha9";
+declare const _default: "1.0.0-alpha2";
 export default _default;

package/dist/helpers/version.js

@@ -1 +1 @@
-export default "0.1.0-prealpha9";
+export default "1.0.0-alpha2";

package/dist/index.d.ts

@@ -1,2 +1,5 @@
+import Quaff from "./classes/Quaff.svelte.js";
+import QTheme from "./classes/QTheme.svelte.js";
+import QScrollObserver from "./classes/QScrollObserver.svelte";
 export * from "./components";
-export { Quaff } from "./stores/Quaff.js";
+export { Quaff, QTheme, QScrollObserver };

package/dist/index.js

@@ -1,3 +1,6 @@
+import Quaff from "./classes/Quaff.svelte.js";
+import QTheme from "./classes/QTheme.svelte.js";
+import QScrollObserver from "./classes/QScrollObserver.svelte";
 // Reexport your entry components here
 export * from "./components";
-export { Quaff } from "./stores/Quaff.js";
+export { Quaff, QTheme, QScrollObserver };

package/dist/stores/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/utils/clipboard.d.ts

@@ -1 +1 @@
-declare function copy(text: string): Promise<void>;
+export declare function copy(text: string): Promise<void>;

package/dist/utils/clipboard.js

@@ -1,8 +1,7 @@
-"use strict";
-async function copy(text) {
+export async function copy(text) {
     if (navigator.clipboard.write) {
-        let blob = new Blob([text], { type: "text/plain" });
-        let item = new ClipboardItem({ "text/plain": blob });
+        const blob = new Blob([text], { type: "text/plain" });
+        const item = new ClipboardItem({ "text/plain": blob });
         await navigator.clipboard.write([item]);
     }
     else {