m3-svelte 5.15.4 → 6.0.0

package/package/nav/NavCMLXItem.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
-  import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import type { AnchorAttrs } from "../misc/typing-utils";
   import Icon from "../misc/Icon.svelte";
   import Layer from "../misc/Layer.svelte";
 
-  type ActionProps =
-    | ({ click?: () => void } & HTMLButtonAttributes) // deprecated: drop in favour of `onclick`
-    | ({ href: string } & HTMLAnchorAttributes);
+  type ActionProps = AnchorAttrs | HTMLButtonAttributes;
   let {
     variant,
     icon,
@@ -14,7 +13,7 @@
     selected,
     ...props
   }: {
-    variant: "compact" | "medium" | "large" | "expanded" | "auto"; // next release / "deprecated": rename expanded to extra-large
+    variant: "compact" | "medium" | "large" | "extra-large" | "auto";
     icon: IconifyIcon;
     text: string;
     selected: boolean;
@@ -22,7 +21,7 @@
 </script>
 
 {#if "href" in props}
-  <a class="m3-container m3-font-label-medium {variant}" {...props}>
+  <a class="m3-container {variant}" {...props}>
     <div class="content" class:selected>
       <Layer />
       <div class="icon">
@@ -32,14 +31,7 @@
     </div>
   </a>
 {:else}
-  {@const { click, ...extra } = props}
-  <button
-    type="button"
-    onclick={click}
-    class="m3-container m3-font-label-medium {variant}"
-    disabled={selected}
-    {...extra}
-  >
+  <button type="button" class="m3-container {variant}" disabled={selected} {...props}>
     <div class="content" class:selected>
       <Layer />
       <div class="icon">
@@ -51,7 +43,96 @@
 {/if}
 
 <style>
+  @mixin --cmlxi-compact {
+    height: 4rem;
+    padding-block: 0.375rem;
+  }
+
+  @mixin --cmlxi-horizontal {
+    .content {
+      padding-inline: 1rem;
+      border-radius: var(--m3-shape-full);
+    }
+    .content.selected {
+      background-color: var(--m3c-secondary-container);
+      color: var(--m3c-on-secondary-container);
+    }
+  }
+
+  @mixin --cmlxi-vertical {
+    .content {
+      flex-direction: column;
+      text-align: center;
+
+      &:hover {
+        > .icon {
+          background-color: --translucent(currentColor, 0.08);
+        }
+      }
+
+      &:focus-visible,
+      &:active {
+        > .icon {
+          background-color: --translucent(currentColor, 0.12);
+        }
+      }
+
+      > .icon {
+        width: 3.5rem;
+        height: 2rem;
+      }
+
+      > :global(:is(.ripple-container, .tint)) {
+        display: none;
+      }
+    }
+
+    .content.selected {
+      color: var(--m3c-secondary);
+      > .icon {
+        color: var(--m3c-on-secondary-container);
+      }
+      > .icon::before {
+        opacity: 1;
+        width: 100%;
+        inset: 0;
+        transition:
+          width var(--m3-easing-fast-spatial),
+          inset var(--m3-easing-fast-spatial);
+      }
+    }
+  }
+
+  @mixin --cmlxi-medium {
+    height: 4rem;
+    padding-block: 0.75rem;
+  }
+
+  @mixin --cmlxi-large {
+    height: 4rem;
+    .content {
+      padding-block: 0.375rem;
+    }
+  }
+
+  @mixin --cmlxi-extra-large {
+    @apply --m3-label-large;
+    height: 3.5rem;
+    padding-inline: 1.25rem;
+
+    .content {
+      gap: 0.75rem;
+    }
+  }
+
   .m3-container {
+    
+  font-family: var(--m3-font);
+  font-size: 0.75rem;
+  line-height: 1.333;
+  letter-spacing: 0.031rem;
+  font-weight: 500;
+
     display: flex;
 
     &:is(button) {
@@ -65,239 +146,329 @@
       gap: 0.25rem;
       align-items: center;
       position: relative;
-      color: rgb(var(--m3-scheme-on-surface-variant));
-      transition: var(--m3-util-easing);
-      &:is(.compact .content, .large .content) {
-        flex-direction: column;
-        text-align: center;
-        &.selected {
-          color: rgb(var(--m3-scheme-secondary));
-          > .icon {
-            color: rgb(var(--m3-scheme-on-secondary-container));
-          }
-          > .icon::before {
-            opacity: 1;
-            width: 100%;
-            inset: 0;
-            transition:
-              width var(--m3-util-easing-fast-spatial),
-              inset var(--m3-util-easing-fast-spatial);
-          }
-        }
-        &:hover {
-          > .icon {
-            background-color: color-mix(in oklab, currentColor 8%, transparent);
-          }
-        }
-        &:focus-visible,
-        &:active {
-          > .icon {
-            background-color: color-mix(in oklab, currentColor 12%, transparent);
-          }
-        }
-        > .icon {
-          width: 3.5rem;
-          height: 2rem;
-        }
-        > :global(:is(.ripple-container, .tint)) {
-          display: none;
-        }
-      }
-      &:is(.medium .content, .expanded .content) {
-        padding-inline: 1rem;
-        border-radius: var(--m3-util-rounding-full);
-        &.selected {
-          background-color: rgb(var(--m3-scheme-secondary-container));
-          color: rgb(var(--m3-scheme-on-secondary-container));
-        }
-      }
-      &:is(.large .content) {
-        padding-block: 0.375rem;
-      }
-      &:is(.expanded .content) {
-        gap: 0.75rem;
-      }
+      color: var(--m3c-on-surface-variant);
+      transition: var(--m3-easing);
     }
+
     .icon {
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: var(--m3-util-rounding-full);
+      border-radius: var(--m3-shape-full);
       position: relative;
-      transition: var(--m3-util-easing);
+      transition: var(--m3-easing);
     }
+    .icon > :global(svg) {
+      z-index: 1;
+    }
+
     .icon::before {
       position: absolute;
       display: block;
       content: " ";
-      background-color: rgb(var(--m3-scheme-secondary-container));
+      background-color: var(--m3c-secondary-container);
 
       opacity: 0;
       inset: 0 50%;
       width: 0;
       border-radius: 2rem;
       transition:
-        opacity var(--m3-util-easing),
+        opacity var(--m3-easing),
         inset 0ms 500ms,
         width 0ms 500ms;
     }
-    .icon > :global(svg) {
-      z-index: 1;
-    }
+
     &.compact {
+      
+    height: 4rem;
+    padding-block: 0.375rem;
+  
+      
+    .content {
       flex-direction: column;
-      height: 4rem;
-      padding-block: 0.375rem;
+      text-align: center;
+
+      &:hover {
+        > .icon {
+          background-color: oklab(from currentColor l a b / 0.08);
+        }
+      }
+
+      &:focus-visible,
+      &:active {
+        > .icon {
+          background-color: oklab(from currentColor l a b / 0.12);
+        }
+      }
+
+      > .icon {
+        width: 3.5rem;
+        height: 2rem;
+      }
+
+      > :global(:is(.ripple-container, .tint)) {
+        display: none;
+      }
+    }
+
+    .content.selected {
+      color: var(--m3c-secondary);
+      > .icon {
+        color: var(--m3c-on-secondary-container);
+      }
+      > .icon::before {
+        opacity: 1;
+        width: 100%;
+        inset: 0;
+        transition:
+          width var(--m3-easing-fast-spatial),
+          inset var(--m3-easing-fast-spatial);
+      }
+    }
+  
     }
     &.medium {
-      height: 4rem;
-      padding-block: 0.75rem;
+      
+    height: 4rem;
+    padding-block: 0.75rem;
+  
+      
+    .content {
+      padding-inline: 1rem;
+      border-radius: var(--m3-shape-full);
+    }
+    .content.selected {
+      background-color: var(--m3c-secondary-container);
+      color: var(--m3c-on-secondary-container);
+    }
+  
     }
     &.large {
+      
+    height: 4rem;
+    .content {
+      padding-block: 0.375rem;
+    }
+  
+      
+    .content {
       flex-direction: column;
-      min-height: 4rem;
+      text-align: center;
+
+      &:hover {
+        > .icon {
+          background-color: oklab(from currentColor l a b / 0.08);
+        }
+      }
+
+      &:focus-visible,
+      &:active {
+        > .icon {
+          background-color: oklab(from currentColor l a b / 0.12);
+        }
+      }
+
+      > .icon {
+        width: 3.5rem;
+        height: 2rem;
+      }
+
+      > :global(:is(.ripple-container, .tint)) {
+        display: none;
+      }
     }
-    &.expanded {
-      height: 3.5rem;
-      padding-inline: 1.25rem;
-      font-size: var(--m3-font-label-large-size);
-      line-height: var(--m3-font-label-large-height);
-      letter-spacing: var(--m3-font-label-large-tracking);
-      font-weight: var(--m3-font-label-large-weight);
+
+    .content.selected {
+      color: var(--m3c-secondary);
+      > .icon {
+        color: var(--m3c-on-secondary-container);
+      }
+      > .icon::before {
+        opacity: 1;
+        width: 100%;
+        inset: 0;
+        transition:
+          width var(--m3-easing-fast-spatial),
+          inset var(--m3-easing-fast-spatial);
+      }
     }
-  }
+  
+    }
+    &.extra-large {
+      
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.006rem;
+  font-weight: 500;
 
+    height: 3.5rem;
+    padding-inline: 1.25rem;
+
+    .content {
+      gap: 0.75rem;
+    }
+  
+      
+    .content {
+      padding-inline: 1rem;
+      border-radius: var(--m3-shape-full);
+    }
+    .content.selected {
+      background-color: var(--m3c-secondary-container);
+      color: var(--m3c-on-secondary-container);
+    }
+  
+    }
+  }
   .m3-container.auto {
     @media (width < 37.5rem) {
       /* Compact */
+      
+    height: 4rem;
+    padding-block: 0.375rem;
+  
+      
+    .content {
       flex-direction: column;
-      height: 4rem;
-      padding-block: 0.375rem;
+      text-align: center;
 
-      .content {
-        flex-direction: column;
-        text-align: center;
-
-        &.selected {
-          color: rgb(var(--m3-scheme-secondary));
-          > .icon {
-            color: rgb(var(--m3-scheme-on-secondary-container));
-          }
-          > .icon::before {
-            opacity: 1;
-            width: 100%;
-            inset: 0;
-            transition:
-              width var(--m3-util-easing-fast-spatial),
-              inset var(--m3-util-easing-fast-spatial);
-          }
+      &:hover {
+        > .icon {
+          background-color: oklab(from currentColor l a b / 0.08);
         }
+      }
 
-        &:hover {
-          > .icon {
-            background-color: color-mix(in oklab, currentColor 8%, transparent);
-          }
+      &:focus-visible,
+      &:active {
+        > .icon {
+          background-color: oklab(from currentColor l a b / 0.12);
         }
+      }
 
-        &:focus-visible,
-        &:active {
-          > .icon {
-            background-color: color-mix(in oklab, currentColor 12%, transparent);
-          }
-        }
+      > .icon {
+        width: 3.5rem;
+        height: 2rem;
+      }
 
-        > .icon {
-          width: 3.5rem;
-          height: 2rem;
-        }
+      > :global(:is(.ripple-container, .tint)) {
+        display: none;
+      }
+    }
 
-        > :global(:is(.ripple-container, .tint)) {
-          display: none;
-        }
+    .content.selected {
+      color: var(--m3c-secondary);
+      > .icon {
+        color: var(--m3c-on-secondary-container);
+      }
+      > .icon::before {
+        opacity: 1;
+        width: 100%;
+        inset: 0;
+        transition:
+          width var(--m3-easing-fast-spatial),
+          inset var(--m3-easing-fast-spatial);
       }
     }
+  
+    }
     @media (37.5rem <= width < 52.5rem) {
       /* Medium */
-      height: 4rem;
-      padding-block: 0.75rem;
-
-      .content {
-        padding-inline: 1rem;
-        border-radius: var(--m3-util-rounding-full);
-
-        &.selected {
-          background-color: rgb(var(--m3-scheme-secondary-container));
-          color: rgb(var(--m3-scheme-on-secondary-container));
-        }
-      }
+      
+    height: 4rem;
+    padding-block: 0.75rem;
+  
+      
+    .content {
+      padding-inline: 1rem;
+      border-radius: var(--m3-shape-full);
+    }
+    .content.selected {
+      background-color: var(--m3c-secondary-container);
+      color: var(--m3c-on-secondary-container);
+    }
+  
     }
     @media (52.5rem <= width < 100rem) {
       /* Large */
+      
+    height: 4rem;
+    .content {
+      padding-block: 0.375rem;
+    }
+  
+      
+    .content {
       flex-direction: column;
       text-align: center;
-      min-height: 4rem;
-
-      .content {
-        flex-direction: column;
-        padding-block: 0.375rem;
-
-        &.selected {
-          color: rgb(var(--m3-scheme-secondary));
-          > .icon {
-            color: rgb(var(--m3-scheme-on-secondary-container));
-          }
-          > .icon::before {
-            opacity: 1;
-            width: 100%;
-            inset: 0;
-            transition:
-              width var(--m3-util-easing-fast-spatial),
-              inset var(--m3-util-easing-fast-spatial);
-          }
-        }
-
-        &:hover {
-          > .icon {
-            background-color: color-mix(in oklab, currentColor 8%, transparent);
-          }
-        }
 
-        &:focus-visible,
-        &:active {
-          > .icon {
-            background-color: color-mix(in oklab, currentColor 12%, transparent);
-          }
+      &:hover {
+        > .icon {
+          background-color: oklab(from currentColor l a b / 0.08);
         }
+      }
 
+      &:focus-visible,
+      &:active {
         > .icon {
-          width: 3.5rem;
-          height: 2rem;
+          background-color: oklab(from currentColor l a b / 0.12);
         }
+      }
 
-        > :global(:is(.ripple-container, .tint)) {
-          display: none;
-        }
+      > .icon {
+        width: 3.5rem;
+        height: 2rem;
+      }
+
+      > :global(:is(.ripple-container, .tint)) {
+        display: none;
       }
     }
-    @media (100rem <= width) {
-      /* Extra large: expanded */
-      height: 3.5rem;
-      padding-inline: 1.25rem;
-      font-size: var(--m3-font-label-large-size);
-      line-height: var(--m3-font-label-large-height);
-      letter-spacing: var(--m3-font-label-large-tracking);
-      font-weight: var(--m3-font-label-large-weight);
-
-      .content {
-        padding-inline: 1rem;
-        border-radius: var(--m3-util-rounding-full);
-        gap: 0.75rem;
-
-        &.selected {
-          background-color: rgb(var(--m3-scheme-secondary-container));
-          color: rgb(var(--m3-scheme-on-secondary-container));
-        }
+
+    .content.selected {
+      color: var(--m3c-secondary);
+      > .icon {
+        color: var(--m3c-on-secondary-container);
+      }
+      > .icon::before {
+        opacity: 1;
+        width: 100%;
+        inset: 0;
+        transition:
+          width var(--m3-easing-fast-spatial),
+          inset var(--m3-easing-fast-spatial);
       }
     }
+  
+    }
+    @media (100rem <= width) {
+      /* Extra large */
+      
+    
+  font-family: var(--m3-font);
+  font-size: 0.875rem;
+  line-height: 1.429;
+  letter-spacing: 0.006rem;
+  font-weight: 500;
+
+    height: 3.5rem;
+    padding-inline: 1.25rem;
+
+    .content {
+      gap: 0.75rem;
+    }
+  
+      
+    .content {
+      padding-inline: 1rem;
+      border-radius: var(--m3-shape-full);
+    }
+    .content.selected {
+      background-color: var(--m3c-secondary-container);
+      color: var(--m3c-on-secondary-container);
+    }
+  
+    }
   }
 </style>

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

@@ -1,12 +1,9 @@
 import type { IconifyIcon } from "@iconify/types";
-import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
-type ActionProps = ({
-    click?: () => void;
-} & HTMLButtonAttributes) | ({
-    href: string;
-} & HTMLAnchorAttributes);
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { AnchorAttrs } from "../misc/typing-utils";
+type ActionProps = AnchorAttrs | HTMLButtonAttributes;
 type $$ComponentProps = {
-    variant: "compact" | "medium" | "large" | "expanded" | "auto";
+    variant: "compact" | "medium" | "large" | "extra-large" | "auto";
     icon: IconifyIcon;
     text: string;
     selected: boolean;