m3-svelte 5.15.5 → 6.0.1

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,90 @@
 {/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 {
+    @apply --m3-label-medium;
     display: flex;
 
     &:is(button) {
@@ -65,239 +140,75 @@
       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 {
-      flex-direction: column;
-      height: 4rem;
-      padding-block: 0.375rem;
+      @apply --cmlxi-compact;
+      @apply --cmlxi-vertical;
     }
     &.medium {
-      height: 4rem;
-      padding-block: 0.75rem;
+      @apply --cmlxi-medium;
+      @apply --cmlxi-horizontal;
     }
     &.large {
-      flex-direction: column;
-      min-height: 4rem;
+      @apply --cmlxi-large;
+      @apply --cmlxi-vertical;
     }
-    &.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);
+    &.extra-large {
+      @apply --cmlxi-extra-large;
+      @apply --cmlxi-horizontal;
     }
   }
-
   .m3-container.auto {
     @media (width < 37.5rem) {
       /* Compact */
-      flex-direction: column;
-      height: 4rem;
-      padding-block: 0.375rem;
-
-      .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;
-        }
-      }
+      @apply --cmlxi-compact;
+      @apply --cmlxi-vertical;
     }
     @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));
-        }
-      }
+      @apply --cmlxi-medium;
+      @apply --cmlxi-horizontal;
     }
     @media (52.5rem <= width < 100rem) {
       /* Large */
-      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);
-          }
-        }
-
-        > .icon {
-          width: 3.5rem;
-          height: 2rem;
-        }
-
-        > :global(:is(.ripple-container, .tint)) {
-          display: none;
-        }
-      }
+      @apply --cmlxi-large;
+      @apply --cmlxi-vertical;
     }
     @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));
-        }
-      }
+      /* Extra large */
+      @apply --cmlxi-extra-large;
+      @apply --cmlxi-horizontal;
     }
   }
 </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;

package/package/nav/Tabs.svelte

@@ -31,7 +31,7 @@
       {#if item.icon}
         <Icon icon={item.icon} />
       {/if}
-      <span class="m3-font-title-small">{item.name}</span>
+      <span>{item.name}</span>
     </label>
   {/each}
   <div class="bar"></div>
@@ -41,7 +41,7 @@
   .m3-container {
     display: flex;
     position: relative;
-    background-color: rgb(var(--m3-scheme-surface));
+    background-color: var(--m3c-surface);
   }
   input {
     position: absolute;
@@ -52,7 +52,7 @@
     position: absolute;
     inset: auto 0 0 0;
     height: 1px;
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
+    background-color: var(--m3c-surface-container-highest);
   }
   label {
     flex: 1 0;
@@ -67,35 +67,38 @@
     align-items: center;
     justify-content: center;
 
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
     user-select: none;
     cursor: pointer;
-    transition: color var(--m3-util-easing-fast);
+    transition: color var(--m3-easing-fast);
   }
   label > :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
   }
+  label > span {
+    @apply --m3-title-small;
+  }
 
   @media (hover: hover) {
     label:hover {
-      color: rgb(var(--m3-scheme-on-surface));
+      color: var(--m3c-on-surface);
     }
   }
   input:focus-visible + label,
   input:active + label,
   input:checked + label {
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
   }
 
   .bar {
     position: absolute;
-    background-color: rgb(var(--m3-scheme-primary));
+    background-color: var(--m3c-primary);
     width: calc(100% / var(--items));
     height: 0;
     bottom: 0;
     pointer-events: none;
-    transition: var(--m3-util-easing-fast-spatial);
+    transition: var(--m3-easing-fast-spatial);
   }
   input:checked:nth-of-type(1) ~ .bar {
     inset-inline-start: 0;
@@ -128,7 +131,7 @@
     height: 1.5rem;
   }
   .primary > input:checked + label {
-    color: rgb(var(--m3-scheme-primary));
+    color: var(--m3c-primary);
   }
   .primary > .bar {
     width: 3rem;

package/package/nav/TabsLink.svelte

@@ -34,7 +34,7 @@
       {#if item.icon}
         <Icon icon={item.icon} />
       {/if}
-      <span class="m3-font-title-small">{item.name}</span>
+      <span>{item.name}</span>
     </a>
   {/each}
   <div class="bar"></div>
@@ -44,13 +44,13 @@
   .m3-container {
     display: flex;
     position: relative;
-    background-color: rgb(var(--m3-scheme-surface));
+    background-color: var(--m3c-surface);
   }
   .divider {
     position: absolute;
     inset: auto 0 0 0;
     height: 1px;
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
+    background-color: var(--m3c-surface-container-highest);
   }
   a {
     flex: 1 0;
@@ -65,36 +65,39 @@
     align-items: center;
     justify-content: center;
 
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
     user-select: none;
     cursor: pointer;
-    transition: color var(--m3-util-easing-fast);
+    transition: color var(--m3-easing-fast);
   }
   a > :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
   }
+  a > span {
+    @apply --m3-title-small;
+  }
 
   @media (hover: hover) {
     a:hover {
-      color: rgb(var(--m3-scheme-on-surface));
+      color: var(--m3c-on-surface);
     }
   }
   a:focus-visible,
   a:active,
   a.selected {
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
   }
 
   .bar {
     position: absolute;
-    background-color: rgb(var(--m3-scheme-primary));
+    background-color: var(--m3c-primary);
     width: calc(100% / var(--items));
     height: 0.125rem;
     left: calc(100% / var(--items) * var(--i));
     bottom: 0;
     pointer-events: none;
-    transition: var(--m3-util-easing-fast-spatial);
+    transition: var(--m3-easing-fast-spatial);
   }
 
   .primary > a {
@@ -109,7 +112,7 @@
     height: 1.5rem;
   }
   .primary > a.selected {
-    color: rgb(var(--m3-scheme-primary));
+    color: var(--m3c-primary);
   }
   .primary > .bar {
     width: 3rem;

package/package/nav/VariableTabs.svelte

@@ -90,7 +90,7 @@
       {#if item.icon}
         <Icon icon={item.icon} />
       {/if}
-      <span class="m3-font-title-small">{item.name}</span>
+      <span>{item.name}</span>
     </label>
   {/each}
   <div class="bar"></div>
@@ -100,7 +100,7 @@
   .m3-container {
     display: grid;
     position: relative;
-    background-color: rgb(var(--m3-scheme-surface));
+    background-color: var(--m3c-surface);
     grid-template-columns: repeat(var(--items), auto);
     padding-inline: 1rem;
     justify-content: start;
@@ -115,7 +115,7 @@
     position: absolute;
     inset: auto 0 0 0;
     height: 1px;
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
+    background-color: var(--m3c-surface-container-highest);
   }
   label {
     height: 3rem;
@@ -128,25 +128,28 @@
     align-items: center;
     justify-content: center;
 
-    color: rgb(var(--m3-scheme-on-surface-variant));
+    color: var(--m3c-on-surface-variant);
     user-select: none;
     cursor: pointer;
-    transition: color var(--m3-util-easing-fast);
+    transition: color var(--m3-easing-fast);
   }
   label > :global(svg) {
     width: 1.5rem;
     height: 1.5rem;
   }
+  label > span {
+    @apply --m3-title-small;
+  }
 
   @media (hover: hover) {
     label:hover {
-      color: rgb(var(--m3-scheme-on-surface));
+      color: var(--m3c-on-surface);
     }
   }
   input:focus-visible + label,
   input:active + label,
   input:checked + label {
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
   }
 
   label,
@@ -154,7 +157,7 @@
     grid-row: 1;
   }
   .bar {
-    background-color: rgb(var(--m3-scheme-primary));
+    background-color: var(--m3c-primary);
     height: 0.125rem;
     z-index: 1;
     align-self: end;
@@ -203,7 +206,7 @@
     height: 1.5rem;
   }
   .primary > input:checked + label {
-    color: rgb(var(--m3-scheme-primary));
+    color: var(--m3c-primary);
   }
   .primary > .bar {
     width: 3rem;