m3-svelte 6.0.0 → 6.0.2

package/package/nav/NavCMLXItem.svelte

@@ -60,6 +60,7 @@
   }
 
   @mixin --cmlxi-vertical {
+    flex-direction: column;
     .content {
       flex-direction: column;
       text-align: center;
@@ -126,18 +127,13 @@
   }
 
   .m3-container {
-    
-  font-family: var(--m3-font);
-  font-size: 0.75rem;
-  line-height: 1.333;
-  letter-spacing: 0.031rem;
-  font-weight: 500;
-
+    @apply --m3-label-medium;
     display: flex;
 
     &:is(button) {
       background: none;
       border: none;
+      padding: 0;
       cursor: pointer;
     }
 
@@ -179,296 +175,42 @@
     }
 
     &.compact {
-      
-    height: 4rem;
-    padding-block: 0.375rem;
-  
-      
-    .content {
-      flex-direction: column;
-      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);
-      }
-    }
-  
+      @apply --cmlxi-compact;
+      @apply --cmlxi-vertical;
     }
     &.medium {
-      
-    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);
-    }
-  
+      @apply --cmlxi-medium;
+      @apply --cmlxi-horizontal;
     }
     &.large {
-      
-    height: 4rem;
-    .content {
-      padding-block: 0.375rem;
-    }
-  
-      
-    .content {
-      flex-direction: column;
-      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);
-      }
-    }
-  
+      @apply --cmlxi-large;
+      @apply --cmlxi-vertical;
     }
     &.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);
-    }
-  
+      @apply --cmlxi-extra-large;
+      @apply --cmlxi-horizontal;
     }
   }
   .m3-container.auto {
     @media (width < 37.5rem) {
       /* Compact */
-      
-    height: 4rem;
-    padding-block: 0.375rem;
-  
-      
-    .content {
-      flex-direction: column;
-      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);
-      }
-    }
-  
+      @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-shape-full);
-    }
-    .content.selected {
-      background-color: var(--m3c-secondary-container);
-      color: var(--m3c-on-secondary-container);
-    }
-  
+      @apply --cmlxi-medium;
+      @apply --cmlxi-horizontal;
     }
     @media (52.5rem <= width < 100rem) {
       /* Large */
-      
-    height: 4rem;
-    .content {
-      padding-block: 0.375rem;
-    }
-  
-      
-    .content {
-      flex-direction: column;
-      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);
-      }
-    }
-  
+      @apply --cmlxi-large;
+      @apply --cmlxi-vertical;
     }
     @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);
-    }
-  
+      @apply --cmlxi-extra-large;
+      @apply --cmlxi-horizontal;
     }
   }
 </style>

package/package/nav/Tabs.svelte

@@ -77,13 +77,7 @@
     height: 1.5rem;
   }
   label > span {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+    @apply --m3-title-small;
   }
 
   @media (hover: hover) {
@@ -152,7 +146,6 @@
 
   .bar {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     .bar {

package/package/nav/TabsLink.svelte

@@ -75,13 +75,7 @@
     height: 1.5rem;
   }
   a > span {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+    @apply --m3-title-small;
   }
 
   @media (hover: hover) {
@@ -130,7 +124,6 @@
 
   .bar {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     .bar {

package/package/nav/VariableTabs.svelte

@@ -138,13 +138,7 @@
     height: 1.5rem;
   }
   label > span {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+    @apply --m3-title-small;
   }
 
   @media (hover: hover) {
@@ -223,7 +217,6 @@
 
   .bar {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     .bar {

package/package/nav/VariableTabsLink.svelte

@@ -136,13 +136,7 @@
     height: 1.5rem;
   }
   a > span {
-    
-  font-family: var(--m3-font);
-  font-size: 0.875rem;
-  line-height: 1.429;
-  letter-spacing: 0.006rem;
-  font-weight: 500;
-
+    @apply --m3-title-small;
   }
 
   @media (hover: hover) {
@@ -191,7 +185,6 @@
 
   .bar {
     print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
   }
   @media screen and (forced-colors: active) {
     .bar {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "6.0.0",
+  "version": "6.0.2",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -44,22 +44,24 @@
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/flubber": "^0.4.0",
+    "@types/node": "^24.10.1",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.13.1",
-    "fast-glob": "^3.3.3",
     "flubber": "^0.4.2",
     "globals": "^16.5.0",
+    "m3-svelte": "link:",
     "prettier": "^3.7.4",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.15",
     "svelte": "^5.45.6",
     "svelte-check": "^4.3.4",
     "svelte-highlight": "^7.9.0",
+    "tinyglobby": "^0.2.15",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.1",
-    "vite": "^7.2.6",
-    "vite-plugin-functions-mixins": "^0.1.0",
+    "typescript-eslint": "^8.49.0",
+    "vite": "^7.2.7",
+    "vite-plugin-functions-mixins": "^0.4.0",
     "vite-plugin-token-shaker": "^0.0.3"
   },
   "peerDependencies": {