m3-svelte 6.0.0 → 6.0.1

package/package/nav/NavCMLX.svelte

@@ -41,65 +41,35 @@
   .m3-container {
     display: flex;
     &.compact {
-      
-    background-color: var(--m3c-surface-container);
-    justify-content: space-evenly;
-  
+      @apply --cmlx-compact;
     }
     &.medium {
-      
-    background-color: var(--m3c-surface-container);
-    justify-content: center;
-  
+      @apply --cmlx-medium;
     }
     &.large {
-      
-    flex-direction: column;
-    gap: 0.25rem;
-    width: 6rem;
-  
+      @apply --cmlx-large;
     }
     &.extra-large {
-      
-    flex-direction: column;
-    padding-block: 1.25rem;
-    min-width: 13.75rem;
-    max-width: 22.5rem;
-  
+      @apply --cmlx-extra-large;
     }
   }
 
   .m3-container.auto {
     @media (width < 37.5rem) {
       /* Compact */
-      
-    background-color: var(--m3c-surface-container);
-    justify-content: space-evenly;
-  
+      @apply --cmlx-compact;
     }
     @media (37.5rem <= width < 52.5rem) {
       /* Medium */
-      
-    background-color: var(--m3c-surface-container);
-    justify-content: center;
-  
+      @apply --cmlx-medium;
     }
     @media (52.5rem <= width < 100rem) {
       /* Large */
-      
-    flex-direction: column;
-    gap: 0.25rem;
-    width: 6rem;
-  
+      @apply --cmlx-large;
     }
     @media (100rem <= width) {
       /* Extra large */
-      
-    flex-direction: column;
-    padding-block: 1.25rem;
-    min-width: 13.75rem;
-    max-width: 22.5rem;
-  
+      @apply --cmlx-extra-large;
     }
   }
 </style>

package/package/nav/NavCMLXItem.svelte

@@ -126,13 +126,7 @@
   }
 
   .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) {
@@ -179,296 +173,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) {

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) {

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) {

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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -59,7 +59,7 @@
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.48.1",
     "vite": "^7.2.6",
-    "vite-plugin-functions-mixins": "^0.1.0",
+    "vite-plugin-functions-mixins": "^0.1.1",
     "vite-plugin-token-shaker": "^0.0.3"
   },
   "peerDependencies": {