m3-svelte 6.0.4 → 7.0.1

package/package/etc/layer.js

@@ -0,0 +1,142 @@
+import "./layer.css";
+const activePointerRipples = [];
+const activeKeyboardRipples = [];
+const isEnabled = (node) => {
+    if (node instanceof HTMLButtonElement && node.disabled)
+        return false;
+    if (node instanceof HTMLInputElement && node.disabled)
+        return false;
+    if (node instanceof HTMLLabelElement) {
+        const control = node.control;
+        if (control instanceof HTMLInputElement && control.disabled)
+            return false;
+    }
+    return true;
+};
+const createRippleSvg = (node, x, y, width, height) => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+        return null;
+    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()}-${Math.random().toString(36).slice(2)}`;
+    const stops = [
+        { offset: "0%", opacity: "0.12" },
+        { offset: "70%", opacity: "0.12" },
+        { offset: "100%", opacity: "0" },
+    ];
+    for (const { offset, opacity } of stops) {
+        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", `${x}`);
+    circle.setAttribute("cy", `${y}`);
+    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.classList.add("active-ripple");
+    svg.style.cssText = [
+        "position: absolute",
+        "inset: 0",
+        "width: 100%",
+        "height: 100%",
+        "overflow: hidden",
+        "border-radius: inherit",
+        "pointer-events: none",
+    ].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()}-${Math.random().toString(36).slice(2)}`;
+        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");
+        // implicitly uses result of previous filter primitive as in2
+        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);
+    };
+};
+if (typeof document != "undefined") {
+    document.documentElement.classList.add("js");
+    // Pointer events
+    document.addEventListener("pointerdown", (e) => {
+        if (e.button != 0)
+            return;
+        const layer = e.target.closest(".m3-layer");
+        if (!layer || !isEnabled(layer))
+            return;
+        const rect = layer.getBoundingClientRect();
+        const cancel = createRippleSvg(layer, e.clientX - rect.left, e.clientY - rect.top, rect.width, rect.height);
+        if (cancel) {
+            activePointerRipples.push(cancel);
+        }
+    });
+    const cancelPointerRipples = () => {
+        for (const cancel of activePointerRipples)
+            cancel();
+        activePointerRipples.length = 0;
+    };
+    document.addEventListener("pointerup", cancelPointerRipples);
+    document.addEventListener("dragend", cancelPointerRipples);
+    // Keyboard events
+    document.addEventListener("keydown", (e) => {
+        if (e.repeat)
+            return;
+        const target = e.target;
+        const layer = target.closest(".m3-layer");
+        if (!layer || !isEnabled(layer))
+            return;
+        const isActivate = e.key == "Enter" || (e.key == " " && layer.tagName == "BUTTON");
+        if (!isActivate)
+            return;
+        const rect = layer.getBoundingClientRect();
+        const cancel = createRippleSvg(layer, rect.width / 2, rect.height / 2, rect.width, rect.height);
+        if (cancel) {
+            activeKeyboardRipples.push(cancel);
+        }
+    });
+    document.addEventListener("keyup", () => {
+        for (const cancel of activeKeyboardRipples)
+            cancel();
+        activeKeyboardRipples.length = 0;
+    });
+}

package/package/etc/recommended-styles.css

@@ -0,0 +1,8 @@
+[placeholder]::placeholder {
+  color: --translucent(var(--m3c-on-surface), 0.5);
+  opacity: 1;
+}
+::selection {
+  background-color: var(--m3c-tertiary-container);
+  color: var(--m3c-on-tertiary-container);
+}

package/package/{misc → etc}/styles.css

@@ -1,10 +1,30 @@
-@function --translucent(--color, --opacity) {
-  result: oklab(from var(--color) l a b / var(--opacity));
-}
-/* DEPRECATED: This default --m3-density function will be removed in a future version.
-   For new themes, pick which option you actually want. */
-@function --m3-density(--size) {
-  result: calc(var(--size) + (var(--m3v-density, 0) * 0.25rem));
+@layer base {
+  /* Reset a few things */
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+  .m3-container {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .m3-container a,
+  a.m3-container {
+    text-decoration: none;
+  }
+  .m3-container dialog,
+  dialog.m3-container {
+    margin: auto;
+  }
+
+  :root {
+    accent-color: var(--m3c-primary);
+  }
+  :focus-visible {
+    outline: none;
+    @apply --m3-focused-outward;
+  }
 }
 
 @layer tokens {
@@ -39,7 +59,7 @@
     --m3-optical-centering-coefficient: 0.11;
 
     /* Typography */
-    --m3-font: Roboto, system-ui;
+    --m3-font: "Google Sans Flex", Roboto, system-ui;
     --m3-font-mono: "Google Sans Code", "Roboto Mono", monospace;
 
     /* Expressive easing */
@@ -120,12 +140,7 @@
     );
   }
 }
-/* Not tokens because they may be dynamically get/set and aren't generally constant */
-@property --m3v-bottom-offset {
-  syntax: "<length>";
-  inherits: true;
-  initial-value: 0;
-}
+/* Background is dynamic, so not a token */
 :root {
   --m3v-background: var(--m3c-surface);
 }
@@ -135,21 +150,21 @@
   font-family: var(--m3-font);
   font-size: 3.563rem;
   line-height: 1.123;
-  letter-spacing: 0;
+  /*letter-spacing: 0;*/
   font-weight: 400;
 }
 @mixin --m3-display-medium {
   font-family: var(--m3-font);
   font-size: 2.813rem;
   line-height: 1.156;
-  letter-spacing: 0;
+  /*letter-spacing: 0;*/
   font-weight: 400;
 }
 @mixin --m3-display-small {
   font-family: var(--m3-font);
   font-size: 2.25rem;
   line-height: 1.222;
-  letter-spacing: 0;
+  /*letter-spacing: 0;*/
   font-weight: 400;
 }
 
@@ -158,21 +173,21 @@
   font-family: var(--m3-font);
   font-size: 2rem;
   line-height: 1.25;
-  letter-spacing: 0;
+  /*letter-spacing: 0;*/
   font-weight: 400;
 }
 @mixin --m3-headline-medium {
   font-family: var(--m3-font);
   font-size: 1.75rem;
   line-height: 1.286;
-  letter-spacing: 0;
+  /*letter-spacing: 0;*/
   font-weight: 400;
 }
 @mixin --m3-headline-small {
   font-family: var(--m3-font);
   font-size: 1.5rem;
   line-height: 1.333;
-  letter-spacing: 0;
+  /*letter-spacing: 0;*/
   font-weight: 400;
 }
 
@@ -181,21 +196,21 @@
   font-family: var(--m3-font);
   font-size: 1.375rem;
   line-height: 1.273;
-  letter-spacing: 0;
+  /*letter-spacing: 0;*/
   font-weight: 400;
 }
 @mixin --m3-title-medium {
   font-family: var(--m3-font);
   font-size: 1rem;
   line-height: 1.5;
-  letter-spacing: 0;
+  /*letter-spacing: 0;*/
   font-weight: 500;
 }
 @mixin --m3-title-small {
   font-family: var(--m3-font);
   font-size: 0.875rem;
   line-height: 1.429;
-  letter-spacing: 0.006rem;
+  /*letter-spacing: 0.006rem;*/
   font-weight: 500;
 }
 
@@ -205,21 +220,21 @@ or for very small text in the content body, such as captions. */
   font-family: var(--m3-font);
   font-size: 0.875rem;
   line-height: 1.429;
-  letter-spacing: 0.006rem;
+  /*letter-spacing: 0.006rem;*/
   font-weight: 500;
 }
 @mixin --m3-label-medium {
   font-family: var(--m3-font);
   font-size: 0.75rem;
   line-height: 1.333;
-  letter-spacing: 0.031rem;
+  /*letter-spacing: 0.031rem;*/
   font-weight: 500;
 }
 @mixin --m3-label-small {
   font-family: var(--m3-font);
   font-size: 0.688rem;
   line-height: 1.455;
-  letter-spacing: 0.031rem;
+  /*letter-spacing: 0.031rem;*/
   font-weight: 500;
 }
 
@@ -228,47 +243,58 @@ or for very small text in the content body, such as captions. */
   font-family: var(--m3-font);
   font-size: 1rem;
   line-height: 1.5;
-  letter-spacing: 0;
+  /*letter-spacing: 0;*/
   font-weight: 400;
 }
 @mixin --m3-body-medium {
   font-family: var(--m3-font);
   font-size: 0.875rem;
   line-height: 1.429;
-  letter-spacing: 0.016rem;
+  /*letter-spacing: 0.016rem;*/
   font-weight: 400;
 }
 @mixin --m3-body-small {
   font-family: var(--m3-font);
   font-size: 0.75rem;
   line-height: 1.333;
-  letter-spacing: 0.025rem;
+  /*letter-spacing: 0.025rem;*/
   font-weight: 400;
 }
-@layer base {
-  /* Reset a few things */
-  *,
-  *::before,
-  *::after {
-    box-sizing: inherit;
+
+@keyframes focus-outward {
+  0% {
+    box-shadow: 0 0 0 0px var(--m3c-secondary);
   }
-  .m3-container {
-    box-sizing: border-box;
-    -webkit-tap-highlight-color: transparent;
+  100% {
+    box-shadow: 0 0 0 3px var(--m3c-secondary);
   }
-  .m3-container a,
-  a.m3-container {
-    text-decoration: none;
+}
+@keyframes focus-inward {
+  0% {
+    box-shadow: inset 0 0 0 0px var(--m3c-secondary);
   }
-  .m3-container dialog,
-  dialog.m3-container {
-    margin: auto;
+  100% {
+    box-shadow: inset 0 0 0 3px var(--m3c-secondary);
   }
-
-  :root {
-    accent-color: var(--m3c-primary);
+}
+@mixin --m3-focused-outward {
+  animation: focus-outward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
+}
+@mixin --m3-focused-inward {
+  animation: focus-inward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
+}
+@mixin --m3-focus-inward {
+  &:focus-visible {
+    @apply --m3-focused-inward;
   }
 }
+@mixin --m3-focus-none {
+  animation: none;
+}
+
+@function --translucent(--color, --opacity) {
+  result: oklab(from var(--color) l a b / var(--opacity));
+}
 
 /* Emphasized easing timing function derived from this code:
 const createBezierLUT = (points: number[][], pointCount: number = 100): number[][] => {

package/package/{misc → etc}/tailwind-styles.css

@@ -40,8 +40,6 @@
   --default-transition-timing-function: var(--ease);
   --default-transition-duration: var(--m3-duration);
 
-  --color-background: var(--m3c-background);
-  --color-on-background: var(--m3c-on-background);
   --color-surface: var(--m3c-surface);
   --color-surface-dim: var(--m3c-surface-dim);
   --color-surface-bright: var(--m3c-surface-bright);

package/package/forms/Checkbox.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import Layer from "../misc/Layer.svelte";
   import type { DivAttrs } from "../misc/typing-utils";
 
   // MUST BE WRAPPED IN A <label>
@@ -14,8 +13,7 @@
 
 <div class="m3-container" {...extra}>
   {@render children()}
-  <div class="layer-container">
-    <Layer />
+  <div class="layer-container m3-layer">
     <div class="checkbox-box"></div>
   </div>
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

package/package/forms/Chip.svelte

@@ -2,10 +2,10 @@
   import type { Snippet } from "svelte";
   import type { IconifyIcon } from "@iconify/types";
   import Icon from "../misc/Icon.svelte";
-  import Layer from "../misc/Layer.svelte";
-  import type { LabelAttrs, AnchorAttrs, ButtonAttrs } from "../misc/typing-utils";
+  import type { AnchorAttrs, ButtonAttrs, NotLink } from "../misc/typing-utils";
+  import type { HTMLLabelAttributes } from "svelte/elements";
 
-  type ActionProps = LabelAttrs | AnchorAttrs | ButtonAttrs;
+  type ActionProps = AnchorAttrs | (NotLink<HTMLLabelAttributes> & { label: true }) | ButtonAttrs;
 
   let {
     variant,
@@ -35,7 +35,6 @@
 </script>
 
 {#snippet content()}
-  <Layer />
   {#if icon}
     <Icon {icon} class="leading" />
   {/if}
@@ -45,16 +44,22 @@
   {/if}
 {/snippet}
 
-{#if "for" in extra}
-  <label class="m3-container {variant}" class:elevated class:selected {...extra}>
-    {@render content()}
-  </label>
-{:else if "href" in extra}
-  <a class="m3-container {variant}" class:elevated class:selected {...extra}>
+{#if extra.href != undefined}
+  <a class="m3-container {variant} m3-layer" class:elevated class:selected {...extra}>
     {@render content()}
   </a>
+{:else if "label" in extra}
+  <label class="m3-container {variant} m3-layer" class:elevated class:selected {...extra}>
+    {@render content()}
+  </label>
 {:else}
-  <button class="m3-container {variant}" class:elevated class:selected {...extra} type="button">
+  <button
+    class="m3-container {variant} m3-layer"
+    class:elevated
+    class:selected
+    {...extra}
+    type="button"
+  >
     {@render content()}
   </button>
 {/if}
@@ -76,13 +81,16 @@
     background-color: var(--m3c-surface);
     color: var(--m3c-on-surface-variant);
     border: solid 1px var(--m3c-outline);
-    position: relative;
     cursor: pointer;
     transition: var(--m3-easing-fast);
   }
 
-  .m3-container > :global(:is(.ripple-container, .tint)) {
-    inset: -1px;
+  .m3-container::before,
+  .m3-container::after,
+  .m3-container > :global(.active-ripple) {
+    inset: -1px !important;
+    width: calc(100% + 2px) !important;
+    height: calc(100% + 2px) !important;
   }
   .m3-container > :global(svg) {
     width: 1.125rem;

package/package/forms/Chip.svelte.d.ts

@@ -1,7 +1,10 @@
 import type { Snippet } from "svelte";
 import type { IconifyIcon } from "@iconify/types";
-import type { LabelAttrs, AnchorAttrs, ButtonAttrs } from "../misc/typing-utils";
-type ActionProps = LabelAttrs | AnchorAttrs | ButtonAttrs;
+import type { AnchorAttrs, ButtonAttrs, NotLink } from "../misc/typing-utils";
+import type { HTMLLabelAttributes } from "svelte/elements";
+type ActionProps = AnchorAttrs | (NotLink<HTMLLabelAttributes> & {
+    label: true;
+}) | ButtonAttrs;
 type $$ComponentProps = {
     /**
      * general is filter/suggestion since they're the same.

package/package/forms/DateField.svelte

@@ -4,7 +4,6 @@
   import type { TransitionConfig } from "svelte/transition";
   import iconCalendar from "@ktibow/iconset-material-symbols/calendar-today-outline";
   import Icon from "../misc/Icon.svelte";
-  import Layer from "../misc/Layer.svelte";
 
   import DatePickerDocked from "./DatePickerDocked.svelte";
   import { easeEmphasized } from "../misc/easing";
@@ -66,10 +65,15 @@ opacity: ${Math.min(t * 3, 1)};`,
   use:clickOutside
   style:--anchor-name="--{id}"
 >
-  <input type="date" class="focus-none" {disabled} {required} {id} bind:value {...extra} />
+  <input type="date" {disabled} {required} {id} bind:value {...extra} />
   <label for={id}>{label}</label>
-  <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>
-    <Layer />
+  <button
+    type="button"
+    class="m3-layer"
+    {disabled}
+    title={datePickerTitle}
+    onclick={() => (picker = !picker)}
+  >
     <Icon icon={iconCalendar} size={24} />
   </button>
   {#if picker}
@@ -117,12 +121,12 @@ opacity: ${Math.min(t * 3, 1)};`,
   }
   input {
     @apply --m3-body-large;
+    @apply --m3-focus-none;
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: none;
-    outline: none;
 
     padding: 1rem 1rem 0rem 1rem;
     padding-inline-start: 0.875rem;

package/package/forms/DateFieldOutlined.svelte

@@ -4,7 +4,6 @@
   import type { TransitionConfig } from "svelte/transition";
   import iconCalendar from "@ktibow/iconset-material-symbols/calendar-today-outline";
   import Icon from "../misc/Icon.svelte";
-  import Layer from "../misc/Layer.svelte";
 
   import DatePickerDocked from "./DatePickerDocked.svelte";
   import { easeEmphasized } from "../misc/easing";
@@ -66,11 +65,16 @@ opacity: ${Math.min(t * 3, 1)};`,
   use:clickOutside
   style:--anchor-name="--{id}"
 >
-  <input type="date" class="focus-none" {disabled} {required} {id} bind:value {...extra} />
+  <input type="date" {disabled} {required} {id} bind:value {...extra} />
   <div class="layer"></div>
   <label for={id}>{label}</label>
-  <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>
-    <Layer />
+  <button
+    type="button"
+    class="m3-layer"
+    {disabled}
+    title={datePickerTitle}
+    onclick={() => (picker = !picker)}
+  >
     <Icon icon={iconCalendar} size={24} />
   </button>
   {#if picker}
@@ -120,12 +124,12 @@ opacity: ${Math.min(t * 3, 1)};`,
   }
   input {
     @apply --m3-body-large;
+    @apply --m3-focus-none;
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: none;
-    outline: none;
 
     padding: 1rem;
     padding-inline-start: 0.875rem;

package/package/forms/RadioAnim1.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import Layer from "../misc/Layer.svelte";
   import type { DivAttrs } from "../misc/typing-utils";
 
   // MUST BE WRAPPED IN A <label>
@@ -14,8 +13,7 @@
 
 <div class="m3-container" {...extra}>
   {@render children()}
-  <div class="layer-container">
-    <Layer />
+  <div class="layer-container m3-layer">
     <div class="radio-circle"></div>
     <div class="radio-dot"></div>
   </div>

package/package/forms/RadioAnim2.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import Layer from "../misc/Layer.svelte";
   import type { DivAttrs } from "../misc/typing-utils";
 
   // MUST BE WRAPPED IN A <label>
@@ -14,8 +13,7 @@
 
 <div class="m3-container" {...extra}>
   {@render children()}
-  <div class="layer-container">
-    <Layer />
+  <div class="layer-container m3-layer">
     <div class="radio-circle"></div>
     <div class="radio-dot"></div>
   </div>

package/package/forms/RadioAnim3.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import Layer from "../misc/Layer.svelte";
   import type { DivAttrs } from "../misc/typing-utils";
 
   // MUST BE WRAPPED IN A <label>
@@ -14,8 +13,7 @@
 
 <div class="m3-container" {...extra}>
   {@render children()}
-  <div class="layer-container">
-    <Layer />
+  <div class="layer-container m3-layer">
     <div class="radio-circle"></div>
     <div class="radio-dot"></div>
   </div>

package/package/forms/Select.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLOptionAttributes, HTMLSelectAttributes } from "svelte/elements";
-  import Layer from "../misc/Layer.svelte";
   import Icon from "../misc/Icon.svelte";
 
   type Option = { icon?: IconifyIcon; text: string; value: string } & HTMLOptionAttributes;
@@ -30,10 +29,9 @@
 >
   <select style:--width={width} bind:value {id} {...extra}>
     {#each options as { icon, text, ...extra }, i (i)}
-      <option class="focus-inset" {...extra}>
-        <Layer />
+      <option {...extra} class="m3-layer">
         {#if icon}
-          <Icon {icon} size={24} />
+          <Icon {icon} size={24} style="grid-row: 1" />
         {/if}
         {@render render(text)}
       </option>
@@ -102,7 +100,6 @@
       box-shadow var(--m3-easing-fast);
 
     border: none;
-    position: relative;
 
     &:enabled {
       cursor: pointer;
@@ -166,6 +163,7 @@
   }
 
   option {
+    @apply --m3-focus-inward;
     display: grid;
     grid-template-columns: auto 1fr;
     padding-inline: 1rem;
@@ -183,8 +181,7 @@
       color: var(--m3c-on-primary-container);
     }
 
-    > *,
-    > :global(svg) {
+    > * {
       grid-row: 1;
     }
     &::checkmark {