m3-svelte 6.0.3 → 7.0.0

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,19 +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}
@@ -128,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 {

package/package/forms/SelectOutlined.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,8 +29,7 @@
 >
   <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} />
         {/if}
@@ -118,8 +116,6 @@
     color: var(--m3c-on-surface);
 
     border: none;
-    outline: none;
-    position: relative;
 
     &:enabled {
       cursor: pointer;
@@ -173,6 +169,7 @@
   }
 
   option {
+    @apply --m3-focus-inward;
     display: grid;
     grid-template-columns: auto 1fr;
     padding-inline: 1rem;

package/package/forms/Slider.svelte

@@ -367,7 +367,7 @@
 
     background-color: var(--m3c-inverse-surface);
     color: var(--m3c-inverse-on-surface);
-    width: 3rem;
+    min-width: 3rem;
     padding: 0.75rem 1rem;
     border-radius: var(--m3-slider-handle-shape);
 

package/package/forms/TextField.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";
   import type { ButtonAttrs } from "../misc/typing-utils";
 
   let {
@@ -35,7 +34,6 @@
   class:error
 >
   <input
-    class="focus-none"
     placeholder=" "
     bind:value
     onkeydown={(e) => e.key == "Enter" && enter?.()}
@@ -51,8 +49,7 @@
   {/if}
   {#if trailing}
     {@const { icon, ...extra } = trailing}
-    <button type="button" class="trailing" {...extra}>
-      <Layer />
+    <button type="button" class="trailing m3-layer" {...extra}>
       <Icon {icon} />
     </button>
   {/if}
@@ -74,12 +71,12 @@
   }
   input {
     @apply --m3-body-large;
+    @apply --m3-focus-none;
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: none;
-    outline: none;
     padding: 1.5rem 1rem 0.5rem 1rem;
     border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     background-color: var(--m3c-surface-container-highest);

package/package/forms/TextFieldMultiline.svelte

@@ -37,8 +37,7 @@
 </script>
 
 <div class="m3-container" class:leading-icon={leadingIcon} class:error use:resize>
-  <textarea class="focus-none" placeholder=" " bind:value {id} {disabled} {required} {...extra}
-  ></textarea>
+  <textarea placeholder=" " bind:value {id} {disabled} {required} {...extra}></textarea>
   <label for={id}>{label}</label>
   <div class="layer"></div>
   {#if leadingIcon}
@@ -61,12 +60,12 @@
   }
   textarea {
     @apply --m3-body-large;
+    @apply --m3-focus-none;
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: none;
-    outline: none;
     padding: 1.5rem 1rem 0.5rem 1rem;
     border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     background-color: var(--m3c-surface-container-highest);

package/package/forms/TextFieldOutlined.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";
   import type { ButtonAttrs } from "../misc/typing-utils";
 
   let {
@@ -35,7 +34,6 @@
   class:error
 >
   <input
-    class="focus-none"
     placeholder=" "
     bind:value
     onkeydown={(e) => e.key == "Enter" && enter?.()}
@@ -51,8 +49,7 @@
   {/if}
   {#if trailing}
     {@const { icon, ...extra } = trailing}
-    <button type="button" class="trailing" {...extra}>
-      <Layer />
+    <button type="button" class="trailing m3-layer" {...extra}>
       <Icon {icon} />
     </button>
   {/if}
@@ -77,12 +74,12 @@
   }
   input {
     @apply --m3-body-large;
+    @apply --m3-focus-none;
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: none;
-    outline: none;
     padding: 1rem;
     border-radius: var(--m3-field-outlined-shape);
     background-color: transparent;

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -37,8 +37,7 @@
 </script>
 
 <div class="m3-container" class:leading-icon={leadingIcon} class:error use:resize>
-  <textarea class="focus-none" placeholder=" " bind:value {id} {disabled} {required} {...extra}
-  ></textarea>
+  <textarea placeholder=" " bind:value {id} {disabled} {required} {...extra}></textarea>
   <div class="layer"></div>
   <label for={id}>{label}</label>
   {#if leadingIcon}
@@ -65,12 +64,12 @@
   }
   textarea {
     @apply --m3-body-large;
+    @apply --m3-focus-none;
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     border: none;
-    outline: none;
     padding: 1rem;
     border-radius: var(--m3-field-outlined-shape);
     background-color: transparent;

package/package/forms/_picker/FocusPicker.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import Icon from "../../misc/Icon.svelte";
-  import Layer from "../../misc/Layer.svelte";
   import iconCheck from "@ktibow/iconset-material-symbols/check";
 
   const conditionalScroll = (node: Element, shouldScroll: boolean) => {
@@ -16,8 +15,7 @@
 
 <div class="m3-container">
   {#each options as { name, selected, activate }}
-    <button type="button" onclick={activate} use:conditionalScroll={selected}>
-      <Layer />
+    <button type="button" class="m3-layer" onclick={activate} use:conditionalScroll={selected}>
       {#if selected}
         <Icon icon={iconCheck} />
       {/if}
@@ -46,7 +44,6 @@
     color: var(--m3c-on-surface);
     border: none;
     cursor: pointer;
-    position: relative;
   }
   button > :global(svg) {
     width: 1.5rem;

package/package/forms/_picker/Header.svelte

@@ -3,7 +3,6 @@
   import iconLeft from "@ktibow/iconset-material-symbols/chevron-left";
   import iconRight from "@ktibow/iconset-material-symbols/chevron-right";
   import iconDown from "@ktibow/iconset-material-symbols/arrow-drop-down";
-  import Layer from "../../misc/Layer.svelte";
 
   let {
     currentView = $bindable(),
@@ -23,61 +22,68 @@
   const monthClick = () => (currentView = currentView == "calendar" ? "month" : "calendar");
   const getShortMonth = (month: number) =>
     new Date(0, month).toLocaleDateString(undefined, { month: "short" });
+
+  let prevMonth = $derived((focusedMonth - 1 + 12) % 12);
+  let nextMonth = $derived((focusedMonth + 1) % 12);
+  let prevYear = $derived(focusedYear - 1);
+  let nextYear = $derived(focusedYear + 1);
 </script>
 
 <div class="m3-container" class:choosing={currentView != "calendar"}>
   <div>
     <button
       type="button"
-      class="arrow"
-      onclick={() => (focusedMonth = (focusedMonth - 1 + 12) % 12)}
+      class="arrow m3-layer"
+      onclick={() => (focusedMonth = prevMonth)}
+      title={getShortMonth(prevMonth)}
     >
-      <Layer />
-      <Icon icon={iconLeft} />
+      <Icon icon={iconLeft} size={24} />
     </button>
     <button
       type="button"
-      class="chooser"
+      class="chooser m3-layer"
       onclick={monthClick}
       disabled={currentView == "year"}
     >
-      <Layer />
       {getShortMonth(focusedMonth)}
-      <Icon icon={iconDown} />
+      <Icon icon={iconDown} size={18} style="margin-inline: 0.5rem -0.25rem" />
     </button>
-    <button type="button" class="arrow" onclick={() => (focusedMonth = (focusedMonth + 1) % 12)}>
-      <Layer />
-      <Icon icon={iconRight} />
+    <button
+      type="button"
+      class="arrow m3-layer"
+      onclick={() => (focusedMonth = nextMonth)}
+      title={getShortMonth(nextMonth)}
+    >
+      <Icon icon={iconRight} size={24} />
     </button>
   </div>
   <div>
     <button
       type="button"
-      class="arrow"
+      class="arrow m3-layer"
       disabled={focusedYear <= startYear}
-      onclick={() => focusedYear--}
+      onclick={() => (focusedYear = prevYear)}
+      title={prevYear.toString()}
     >
-      <Layer />
-      <Icon icon={iconLeft} />
+      <Icon icon={iconLeft} size={24} />
     </button>
     <button
       type="button"
-      class="chooser"
+      class="chooser m3-layer"
       onclick={yearClick}
       disabled={currentView == "month"}
     >
-      <Layer />
       {focusedYear}
-      <Icon icon={iconDown} />
+      <Icon icon={iconDown} size={18} style="margin-inline: 0.5rem -0.25rem" />
     </button>
     <button
       type="button"
-      class="arrow"
+      class="arrow m3-layer"
       disabled={focusedYear >= endYear}
-      onclick={() => focusedYear++}
+      title={nextYear.toString()}
+      onclick={() => (focusedYear = nextYear)}
     >
-      <Layer />
-      <Icon icon={iconRight} />
+      <Icon icon={iconRight} size={24} />
     </button>
   </div>
 </div>
@@ -104,7 +110,6 @@
     border: none;
     padding: 0;
     cursor: pointer;
-    position: relative;
   }
   button:disabled {
     cursor: auto;
@@ -115,19 +120,9 @@
     @apply --m3-label-large;
     flex-grow: 1;
   }
-  .chooser :global(svg) {
-    width: 1.125rem;
-    height: 1.125rem;
-    margin-right: -0.25rem;
-    margin-left: 0.5rem;
-  }
   .arrow {
     width: 3rem;
   }
-  .arrow :global(svg) {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
 
   .choosing {
     border-color: var(--m3c-outline-variant);

package/package/forms/_picker/Item.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import Layer from "../../misc/Layer.svelte";
-
   let {
     disabled,
     today,
@@ -16,15 +14,7 @@
   } = $props();
 </script>
 
-<button
-  type="button"
-  class="item"
-  {disabled}
-  class:today
-  class:selected
-  {onclick}
->
-  <Layer />
+<button type="button" class="item m3-layer" {disabled} class:today class:selected {onclick}>
   {label}
 </button>
 
@@ -43,7 +33,6 @@
     border: none;
     cursor: pointer;
     transition: var(--m3-easing-fast);
-    position: relative;
   }
   button:disabled {
     cursor: auto;

package/package/index.d.ts

@@ -1,19 +1,15 @@
+export * from "./misc/animation.js";
+export * from "./misc/badge.js";
 export { default as ChipChooser } from "./misc/ChipChooser.svelte";
 export { default as Divider } from "./misc/Divider.svelte";
+export * from "./misc/easing.js";
 export { default as Icon } from "./misc/Icon.svelte";
-export { default as Layer } from "./misc/Layer.svelte";
-export * from "./misc/animation.js";
-export * from "./misc/colors.js";
 export * from "./misc/shapes.js";
 export * from "./misc/shapesAnimatable.js";
-export * from "./misc/utils.js";
-export * from "./misc/easing.js";
-export * from "./misc/badge.js";
 export { default as Button } from "./buttons/Button.svelte";
 export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
 export { default as FAB } from "./buttons/FAB.svelte";
 export { default as SplitButton } from "./buttons/SplitButton.svelte";
-export { default as TogglePrimitive } from "./buttons/TogglePrimitive.svelte";
 export { default as BottomSheet } from "./containers/BottomSheet.svelte";
 export { default as Card } from "./containers/Card.svelte";
 export { default as Dialog } from "./containers/Dialog.svelte";

package/package/index.js

@@ -1,19 +1,15 @@
+export * from "./misc/animation.js";
+export * from "./misc/badge.js";
 export { default as ChipChooser } from "./misc/ChipChooser.svelte";
 export { default as Divider } from "./misc/Divider.svelte";
+export * from "./misc/easing.js";
 export { default as Icon } from "./misc/Icon.svelte";
-export { default as Layer } from "./misc/Layer.svelte";
-export * from "./misc/animation.js";
-export * from "./misc/colors.js";
 export * from "./misc/shapes.js";
 export * from "./misc/shapesAnimatable.js";
-export * from "./misc/utils.js";
-export * from "./misc/easing.js";
-export * from "./misc/badge.js";
 export { default as Button } from "./buttons/Button.svelte";
 export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
 export { default as FAB } from "./buttons/FAB.svelte";
 export { default as SplitButton } from "./buttons/SplitButton.svelte";
-export { default as TogglePrimitive } from "./buttons/TogglePrimitive.svelte";
 export { default as BottomSheet } from "./containers/BottomSheet.svelte";
 export { default as Card } from "./containers/Card.svelte";
 export { default as Dialog } from "./containers/Dialog.svelte";

package/package/misc/animation.js

@@ -1,5 +1,9 @@
 import { easeEmphasized } from "./easing";
-import { parseSize } from "./utils";
+const parseSize = (size) => (size.endsWith("px")
+    ? +size.slice(0, -2)
+    : size.endsWith("rem")
+        ? +size.slice(0, -3) * 16
+        : null) || 0;
 const getBackgroundColor = (node, defaultColor) => {
     if (!defaultColor) {
         const tmp = document.createElement("div");

package/package/misc/badge.js

@@ -12,7 +12,7 @@ export const addBadge = (icon, n) => {
             `<!--badge--><foreignObject x="${x}" y="${y}" width="40" height="16">` +
                 `<div style="${[
                     "font-size:0.688rem",
-                    "letter-spacing:0.031rem",
+                    // "letter-spacing:0.031rem",
                     "font-weight:500",
                     "background-color:var(--m3c-error)",
                     "color:var(--m3c-on-error)",

package/package/misc/easing.js

@@ -1,7 +1,8 @@
 // TODO: update for Expressive
 const createBezierLUT = (points, pointCount = 100) => {
     const lut = [];
-    for (let t = 0; t < 1; t += 1 / pointCount) {
+    for (let n = 0; n <= pointCount; n++) {
+        const t = n / pointCount;
         const a = (1 - t) * (1 - t) * (1 - t);
         const b = (1 - t) * (1 - t) * t;
         const c = (1 - t) * t * t;
@@ -16,9 +17,9 @@ const createEase = (lutOptions) => {
     let lut;
     return (t) => {
         if (!lut)
-            lut = lutOptions.map((args) => createBezierLUT(args)).flat();
+            lut = lutOptions.flatMap((args) => createBezierLUT(args));
         const closestPoint = lut.find((p) => p[0] >= t);
-        const closestY = closestPoint ? closestPoint[1] : 1;
+        const closestY = closestPoint[1];
         return closestY;
     };
 };

package/package/misc/typing-utils.d.ts

@@ -1,6 +1,15 @@
 import type { HTMLLabelAttributes, HTMLAnchorAttributes, HTMLButtonAttributes, HTMLAttributes } from "svelte/elements";
-export type LabelAttrs = HTMLLabelAttributes & Required<Pick<HTMLLabelAttributes, "for">>;
-export type AnchorAttrs = HTMLAnchorAttributes & Required<Pick<HTMLAnchorAttributes, "href">>;
-export type NotButton<T> = Omit<T, "onclick">;
-export type ButtonAttrs = HTMLButtonAttributes & Required<Pick<HTMLButtonAttributes, "onclick">>;
-export type DivAttrs = NotButton<HTMLAttributes<HTMLDivElement>>;
+type MakeRequired<T, K extends keyof T> = Omit<T, K> & {
+    [P in K]-?: NonNullable<T[P]>;
+};
+export type NotButton<T> = Omit<T, "onclick"> & {
+    onclick?: undefined;
+};
+export type NotLink<T> = T & {
+    href?: undefined;
+};
+export type ButtonAttrs = MakeRequired<NotLink<HTMLButtonAttributes>, "onclick">;
+export type LabelAttrs = MakeRequired<NotLink<NotButton<HTMLLabelAttributes>>, "for">;
+export type AnchorAttrs = MakeRequired<NotButton<HTMLAnchorAttributes>, "href">;
+export type DivAttrs = NotLink<NotButton<HTMLAttributes<HTMLDivElement>>>;
+export {};

package/package/nav/NavCMLXItem.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLButtonAttributes } from "svelte/elements";
-  import type { AnchorAttrs } from "../misc/typing-utils";
+  import type { AnchorAttrs, NotLink } from "../misc/typing-utils";
   import Icon from "../misc/Icon.svelte";
-  import Layer from "../misc/Layer.svelte";
 
-  type ActionProps = AnchorAttrs | HTMLButtonAttributes;
+  type ActionProps = AnchorAttrs | NotLink<HTMLButtonAttributes>;
   let {
     variant,
     icon,
@@ -20,10 +19,9 @@
   } & ActionProps = $props();
 </script>
 
-{#if "href" in props}
+{#if props.href != undefined}
   <a class="m3-container {variant}" {...props}>
-    <div class="content" class:selected>
-      <Layer />
+    <div class="content m3-layer" class:selected>
       <div class="icon">
         <Icon {icon} size={24} />
       </div>
@@ -32,8 +30,7 @@
   </a>
 {:else}
   <button type="button" class="m3-container {variant}" disabled={selected} {...props}>
-    <div class="content" class:selected>
-      <Layer />
+    <div class="content m3-layer" class:selected>
       <div class="icon">
         <Icon {icon} size={24} />
       </div>
@@ -83,7 +80,8 @@
         height: 2rem;
       }
 
-      > :global(:is(.ripple-container, .tint)) {
+      &::after,
+      > :global(.active-ripple) {
         display: none;
       }
     }
@@ -141,7 +139,6 @@
       display: flex;
       gap: 0.25rem;
       align-items: center;
-      position: relative;
       color: var(--m3c-on-surface-variant);
       transition: var(--m3-easing);
     }