m3-svelte 6.0.4 → 7.0.0

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/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(),
@@ -34,53 +33,57 @@
   <div>
     <button
       type="button"
-      class="arrow"
+      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" onclick={monthClick} disabled={currentView == "year"}>
-      <Layer />
+    <button
+      type="button"
+      class="chooser m3-layer"
+      onclick={monthClick}
+      disabled={currentView == "year"}
+    >
       {getShortMonth(focusedMonth)}
-      <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"
       onclick={() => (focusedMonth = nextMonth)}
       title={getShortMonth(nextMonth)}
     >
-      <Layer />
-      <Icon icon={iconRight} />
+      <Icon icon={iconRight} size={24} />
     </button>
   </div>
   <div>
     <button
       type="button"
-      class="arrow"
+      class="arrow m3-layer"
       disabled={focusedYear <= startYear}
       onclick={() => (focusedYear = prevYear)}
       title={prevYear.toString()}
     >
-      <Layer />
-      <Icon icon={iconLeft} />
+      <Icon icon={iconLeft} size={24} />
     </button>
-    <button type="button" class="chooser" onclick={yearClick} disabled={currentView == "month"}>
-      <Layer />
+    <button
+      type="button"
+      class="chooser m3-layer"
+      onclick={yearClick}
+      disabled={currentView == "month"}
+    >
       {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}
       title={nextYear.toString()}
       onclick={() => (focusedYear = nextYear)}
     >
-      <Layer />
-      <Icon icon={iconRight} />
+      <Icon icon={iconRight} size={24} />
     </button>
   </div>
 </div>
@@ -107,7 +110,6 @@
     border: none;
     padding: 0;
     cursor: pointer;
-    position: relative;
   }
   button:disabled {
     cursor: auto;
@@ -118,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,8 +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>
 
@@ -36,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/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);
     }

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;