m3-svelte 6.0.3 → 7.0.0

package/package/nav/NavCMLXItem.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { IconifyIcon } from "@iconify/types";
 import type { HTMLButtonAttributes } from "svelte/elements";
-import type { AnchorAttrs } from "../misc/typing-utils";
-type ActionProps = AnchorAttrs | HTMLButtonAttributes;
+import type { AnchorAttrs, NotLink } from "../misc/typing-utils";
+type ActionProps = AnchorAttrs | NotLink<HTMLButtonAttributes>;
 type $$ComponentProps = {
     variant: "compact" | "medium" | "large" | "extra-large" | "auto";
     icon: IconifyIcon;

package/package/nav/Tabs.svelte

@@ -2,7 +2,6 @@
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLInputAttributes } from "svelte/elements";
   import Icon from "../misc/Icon.svelte";
-  import Layer from "../misc/Layer.svelte";
 
   let {
     secondary = false,
@@ -26,8 +25,7 @@
   {#each items as item}
     {@const id = name + item.value}
     <input type="radio" {name} {id} value={item.value} bind:group={tab} {...extra} />
-    <label for={id} class:tall={item.icon}>
-      <Layer />
+    <label for={id} class:tall={item.icon} class="m3-layer">
       {#if item.icon}
         <Icon icon={item.icon} />
       {/if}
@@ -61,7 +59,6 @@
     white-space: nowrap;
     padding: 0 1rem;
 
-    position: relative;
     display: flex;
     gap: 0.5rem;
     align-items: center;

package/package/nav/TabsLink.svelte

@@ -2,7 +2,6 @@
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLAnchorAttributes } from "svelte/elements";
   import Icon from "../misc/Icon.svelte";
-  import Layer from "../misc/Layer.svelte";
 
   let {
     secondary = false,
@@ -29,8 +28,13 @@
 >
   <div class="divider"></div>
   {#each items as item}
-    <a href={item.href} class:tall={item.icon} class:selected={item.value == tab} {...extra}>
-      <Layer />
+    <a
+      href={item.href}
+      class:tall={item.icon}
+      class:selected={item.value == tab}
+      class="m3-layer"
+      {...extra}
+    >
       {#if item.icon}
         <Icon icon={item.icon} />
       {/if}
@@ -59,7 +63,6 @@
     white-space: nowrap;
     padding: 0 1rem;
 
-    position: relative;
     display: flex;
     gap: 0.5rem;
     align-items: center;

package/package/nav/VariableTabs.svelte

@@ -2,7 +2,6 @@
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLInputAttributes } from "svelte/elements";
   import Icon from "../misc/Icon.svelte";
-  import Layer from "../misc/Layer.svelte";
 
   let {
     secondary = false,
@@ -85,8 +84,7 @@
       oninput={handleInput}
       {...extra}
     />
-    <label for={id} class:tall={item.icon}>
-      <Layer />
+    <label for={id} class:tall={item.icon} class="m3-layer">
       {#if item.icon}
         <Icon icon={item.icon} />
       {/if}
@@ -122,7 +120,6 @@
     white-space: nowrap;
     padding: 0 1rem;
 
-    position: relative;
     display: flex;
     gap: 0.5rem;
     align-items: center;

package/package/nav/VariableTabsLink.svelte

@@ -2,7 +2,6 @@
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLAnchorAttributes } from "svelte/elements";
   import Icon from "../misc/Icon.svelte";
-  import Layer from "../misc/Layer.svelte";
 
   let {
     secondary = false,
@@ -87,10 +86,10 @@
       href={item.href}
       class:tall={item.icon}
       class:selected={item.value == tab}
+      class="m3-layer"
       style:grid-column={i + 1}
       {...extra}
     >
-      <Layer />
       {#if item.icon}
         <Icon icon={item.icon} />
       {/if}
@@ -121,7 +120,6 @@
     white-space: nowrap;
     padding: 0 1rem;
 
-    position: relative;
     display: flex;
     gap: 0.5rem;
     align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "6.0.3",
+  "version": "7.0.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -21,52 +21,69 @@
       "types": "./package/index.d.ts",
       "svelte": "./package/index.js"
     },
-    "./misc/styles.css": {
-      "style": "./package/misc/styles.css"
+    "./etc/styles.css": {
+      "style": "./package/etc/styles.css"
     },
-    "./misc/recommended-styles.css": {
-      "style": "./package/misc/recommended-styles.css"
+    "./etc/recommended-styles.css": {
+      "style": "./package/etc/recommended-styles.css"
     },
-    "./misc/tailwind-styles.css": {
-      "style": "./package/misc/tailwind-styles.css"
+    "./etc/tailwind-styles.css": {
+      "style": "./package/etc/tailwind-styles.css"
+    },
+    "./etc/unocss-preset": {
+      "types": "./package/etc/unocss-preset.d.ts",
+      "import": "./package/etc/unocss-preset.js"
+    },
+    "./etc/colors": {
+      "types": "./package/etc/colors.d.ts",
+      "import": "./package/etc/colors.js"
+    },
+    "./etc/layer": {
+      "types": "./package/etc/layer.d.ts",
+      "import": "./package/etc/layer.js"
     }
   },
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@ktibow/iconset-material-symbols": "~0.0.1764827375",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11763580498000"
+    "@ktibow/iconset-material-symbols": "~0.0.1764827375"
   },
   "devDependencies": {
     "@eslint/compat": "^2.0.0",
     "@eslint/js": "^9.39.2",
+    "@ktibow/material-color-utilities-nightly": "^0.3.11763580498000",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/kit": "^2.49.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/flubber": "^0.4.0",
-    "@types/node": "^25.0.2",
-    "eslint": "^9.39.1",
+    "@types/node": "^25.0.3",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.13.1",
-    "flubber": "^0.4.2",
     "globals": "^16.5.0",
     "m3-svelte": "link:",
     "prettier": "^3.7.4",
     "prettier-plugin-svelte": "^3.4.1",
     "publint": "^0.3.16",
-    "svelte": "^5.46.0",
-    "svelte-check": "^4.3.4",
-    "svelte-highlight": "^7.9.0",
+    "shiki": "^3.20.0",
+    "svelte": "^5.46.1",
+    "svelte-check": "^4.3.5",
     "tinyglobby": "^0.2.15",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.50.0",
+    "typescript-eslint": "^8.51.0",
+    "unocss": "^66.5.12",
     "vite": "^7.3.0",
     "vite-plugin-functions-mixins": "^0.4.0",
     "vite-plugin-token-shaker": "^0.0.3"
   },
   "peerDependencies": {
+    "@ktibow/material-color-utilities-nightly": "^0.3.11763580498000",
     "svelte": "^5.40.0"
   },
+  "peerDependenciesMeta": {
+    "@ktibow/material-color-utilities-nightly": {
+      "optional": true
+    }
+  },
   "keywords": [
     "svelte",
     "material",
@@ -79,7 +96,9 @@
     "ui-library",
     "theming"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "./package/etc/layer.js"
+  ],
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",

package/package/buttons/TogglePrimitive.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import Button from "./Button.svelte";
-
-  let {
-    toggle = $bindable(),
-    variant,
-    round = false,
-    size,
-    children,
-  }: {
-    toggle: boolean;
-    variant?: "filled" | "tonal";
-    round?: boolean;
-    size?: "xs" | "s" | "m" | "l" | "xl";
-    children: Snippet;
-  } = $props();
-  const id = $props.id();
-</script>
-
-<input type="checkbox" {id} bind:checked={toggle} />
-<Button for={id} {variant} square={!round} {size} {children} />

package/package/buttons/TogglePrimitive.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from "svelte";
-type $$ComponentProps = {
-    toggle: boolean;
-    variant?: "filled" | "tonal";
-    round?: boolean;
-    size?: "xs" | "s" | "m" | "l" | "xl";
-    children: Snippet;
-};
-declare const TogglePrimitive: import("svelte").Component<$$ComponentProps, {}, "toggle">;
-type TogglePrimitive = ReturnType<typeof TogglePrimitive>;
-export default TogglePrimitive;

package/package/misc/Layer.svelte

@@ -1,213 +0,0 @@
-<script lang="ts">
-  type Ripples = (() => void)[];
-  let pointerRipples: Ripples = $state([]);
-  let keyboardRipples: Ripples = $state([]);
-
-  const createRipple = (node: HTMLDivElement) => {
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-
-    node.classList.remove("broken");
-
-    const parent = node.parentElement!;
-
-    const isEnabled = () => {
-      if (parent instanceof HTMLButtonElement) {
-        if (parent.disabled) return false;
-      }
-      if (parent instanceof HTMLLabelElement) {
-        const control = parent.control;
-        if (control instanceof HTMLInputElement && control.disabled) return false;
-      }
-      if (parent.classList.contains("layer-container")) {
-        const input = parent.previousElementSibling;
-        if (input instanceof HTMLInputElement && input.disabled) return false;
-      }
-      return true;
-    };
-    const ripple = (x: number, y: number, width: number, height: number) => {
-      const size = Math.hypot(Math.max(x, width - x), Math.max(y, height - y)) * 2.5;
-      const speed = Math.max(Math.min(Math.log(size) * 50, 600), 200);
-
-      const gradient = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient");
-      gradient.id = `ripple-${Date.now()}`;
-
-      const stops = [
-        { offset: "0%", opacity: "0.12" },
-        { offset: "70%", opacity: "0.12" },
-        { offset: "100%", opacity: "0" },
-      ];
-
-      stops.forEach(({ offset, opacity }) => {
-        const stop = document.createElementNS("http://www.w3.org/2000/svg", "stop");
-        stop.setAttribute("offset", offset);
-        stop.setAttribute("stop-color", "currentColor");
-        stop.setAttribute("stop-opacity", opacity);
-        gradient.appendChild(stop);
-      });
-
-      const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-      circle.setAttribute("cx", `${size / 2}`);
-      circle.setAttribute("cy", `${size / 2}`);
-      circle.setAttribute("r", "0");
-      circle.setAttribute("fill", `url(#${gradient.id})`);
-
-      const expand = document.createElementNS("http://www.w3.org/2000/svg", "animate");
-      expand.setAttribute("attributeName", "r");
-      expand.setAttribute("from", "0");
-      expand.setAttribute("to", `${size / 2}`);
-      expand.setAttribute("dur", `${speed}ms`);
-      expand.setAttribute("fill", "freeze");
-      expand.setAttribute("calcMode", "spline");
-      expand.setAttribute("keySplines", "0.4 0, 0.2 1");
-
-      circle.appendChild(expand);
-
-      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-      svg.style.cssText = [
-        "position: absolute",
-        `left: ${x - size / 2}px`,
-        `top: ${y - size / 2}px`,
-        `width: ${size}px`,
-        `height: ${size}px`,
-        "pointer-events: none",
-        "overflow: visible",
-      ].join(";");
-      svg.appendChild(gradient);
-      svg.appendChild(circle);
-
-      const ua = navigator.userAgent;
-      const isFirefox = ua.includes("Firefox");
-      const isTrulySafari = !ua.includes("Chrome") && ua.includes("Safari");
-      if (!isFirefox && !isTrulySafari && size > 100) {
-        const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
-        filter.id = `noise-${Date.now()}`;
-
-        const turb = document.createElementNS("http://www.w3.org/2000/svg", "feTurbulence");
-        turb.setAttribute("type", "fractalNoise");
-        turb.setAttribute("baseFrequency", "0.6");
-        turb.setAttribute("seed", Math.random().toString());
-
-        const blur = document.createElementNS("http://www.w3.org/2000/svg", "feDisplacementMap");
-        blur.setAttribute("in", "SourceGraphic");
-        blur.setAttribute("in2", "turbulence");
-        blur.setAttribute("scale", `${size ** 2 * 0.0002}`);
-        blur.setAttribute("xChannelSelector", "R");
-        blur.setAttribute("yChannelSelector", "B");
-
-        filter.appendChild(turb);
-        filter.appendChild(blur);
-
-        circle.setAttribute("filter", `url(#${filter.id})`);
-        svg.appendChild(filter);
-      }
-
-      node.appendChild(svg);
-
-      return () => {
-        const fade = document.createElementNS("http://www.w3.org/2000/svg", "animate");
-        fade.setAttribute("attributeName", "opacity");
-        fade.setAttribute("from", "1");
-        fade.setAttribute("to", "0");
-        fade.setAttribute("dur", "800ms");
-        fade.setAttribute("fill", "freeze");
-        fade.setAttribute("calcMode", "spline");
-        fade.setAttribute("keySplines", "0.4 0, 0.2 1");
-        circle.appendChild(fade);
-        fade.beginElement();
-        setTimeout(() => svg.remove(), 800);
-      };
-    };
-    const pointerdown = (e: PointerEvent) => {
-      if (!isEnabled()) return;
-      if (e.button != 0) return;
-
-      const rect = parent.getBoundingClientRect();
-      const cancel = ripple(e.clientX - rect.left, e.clientY - rect.top, rect.width, rect.height);
-      pointerRipples.push(cancel);
-    };
-    const keydown = (e: KeyboardEvent) => {
-      if (!isEnabled()) return;
-      if (e.repeat) return;
-
-      const isActivate = e.key == "Enter" || (e.key == " " && parent.tagName == "BUTTON");
-      if (!isActivate) return;
-
-      const rect = parent.getBoundingClientRect();
-      const cancel = ripple(rect.width / 2, rect.height / 2, rect.width, rect.height);
-      keyboardRipples.push(cancel);
-    };
-
-    parent.addEventListener("pointerdown", pointerdown);
-    parent.addEventListener("keydown", keydown);
-
-    return {
-      destroy() {
-        parent.removeEventListener("pointerdown", pointerdown);
-        parent.removeEventListener("keydown", keydown);
-      },
-    };
-  };
-</script>
-
-<svelte:window
-  onpointerup={() => {
-    pointerRipples.forEach((cancel) => cancel());
-    pointerRipples = [];
-  }}
-  ondragend={() => {
-    pointerRipples.forEach((cancel) => cancel());
-    pointerRipples = [];
-  }}
-  onkeyup={() => {
-    keyboardRipples.forEach((cancel) => cancel());
-    keyboardRipples = [];
-  }}
-/>
-
-<div class="hitbox"></div>
-<div class="ripple-container broken" use:createRipple></div>
-<div class="tint"></div>
-
-<style>
-  .hitbox {
-    position: absolute;
-    inset: 0;
-  }
-  .ripple-container {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    pointer-events: none;
-
-    overflow: hidden;
-  }
-  .tint {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    pointer-events: none;
-
-    background-color: currentColor;
-    opacity: 0;
-    transition: opacity var(--m3-easing-fast);
-
-    &:not(
-      :global(input:disabled + label) > *,
-      :global(input:disabled + .layer-container) > *,
-      :global(:disabled) > *
-    ) {
-      @media (hover: hover) {
-        &:is(:global(:hover) > *, :global(:active) > *) {
-          opacity: 0.08;
-        }
-      }
-      &:is(
-        :global(input:focus-visible + label) > *,
-        :global(:focus-visible) > *,
-        :global(:active) > .ripple-container.broken + *
-      ) {
-        opacity: 0.12;
-      }
-    }
-  }
-</style>

package/package/misc/Layer.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const Layer: import("svelte").Component<Record<string, never>, {}, "">;
-type Layer = ReturnType<typeof Layer>;
-export default Layer;

package/package/misc/colors.d.ts

@@ -1,4 +0,0 @@
-import { MaterialDynamicColors, DynamicColor } from "@ktibow/material-color-utilities-nightly";
-export declare const materialColors: MaterialDynamicColors;
-export declare const colors: DynamicColor[];
-export declare const pairs: DynamicColor[][];

package/package/misc/recommended-styles.css

@@ -1,41 +0,0 @@
-@layer tokens {
-  :root {
-    --m3-refocus: refocus-outward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
-  }
-}
-:focus-visible:not(.focus-inset, .focus-none) {
-  animation: var(--m3-refocus);
-  outline: none;
-}
-:focus-visible:is(.focus-inset):not(.focus-none) {
-  animation: refocus-inward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
-  outline: none;
-}
-:focus-visible.focus-none {
-  outline: none;
-}
-@keyframes refocus-outward {
-  0% {
-    box-shadow: 0 0 0 0px var(--m3c-secondary);
-  }
-  100% {
-    box-shadow: 0 0 0 3px var(--m3c-secondary);
-  }
-}
-@keyframes refocus-inward {
-  0% {
-    box-shadow: inset 0 0 0 0px var(--m3c-secondary);
-  }
-  100% {
-    box-shadow: inset 0 0 0 3px var(--m3c-secondary);
-  }
-}
-
-[placeholder]::placeholder {
-  color: --translucent(var(--m3c-on-background), 0.5);
-  opacity: 1;
-}
-::selection {
-  background-color: var(--m3c-tertiary-container);
-  color: var(--m3c-on-tertiary-container);
-}

package/package/misc/utils.d.ts

@@ -1,6 +0,0 @@
-import { type DynamicScheme } from "@ktibow/material-color-utilities-nightly";
-/**
- * @returns A string of CSS code with custom properties representing the color scheme values.
- * */
-export declare const genCSS: (light: DynamicScheme, dark: DynamicScheme) => string;
-export declare const parseSize: (size: string) => number;

package/package/misc/utils.js

@@ -1,39 +0,0 @@
-import {} from "@ktibow/material-color-utilities-nightly";
-import { colors } from "./colors";
-/**
- * @returns A string of CSS code with custom properties representing the color scheme values.
- * */
-export const genCSS = (light, dark) => {
-    const genColorVariable = (name, argb) => {
-        const kebabCase = name.replaceAll("_", "-");
-        const hex = argb.toString(16).slice(-6);
-        return `    --m3c-${kebabCase}: #${hex};`;
-    };
-    const lightColors = colors
-        .map((color) => genColorVariable(color.name, color.getArgb(light)))
-        .join("\n");
-    const darkColors = colors
-        .map((color) => genColorVariable(color.name, color.getArgb(dark)))
-        .join("\n");
-    return `@media (prefers-color-scheme: light) {
-  :root {
-    color-scheme: light;
-  }
-  :root, ::backdrop {
-${lightColors}
-  }
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    color-scheme: dark;
-  }
-  :root, ::backdrop {
-${darkColors}
-  }
-}`;
-};
-export const parseSize = (size) => (size.endsWith("px")
-    ? +size.slice(0, -2)
-    : size.endsWith("rem")
-        ? +size.slice(0, -3) * 16
-        : null) || 0;