unocss-preset-quasar 0.1.4 → 0.1.5

package/dist/core/index.js

@@ -284,6 +284,16 @@ font-family: inherit;
 margin: 0;
 }
 
+html, body, #q-app {
+  width: 100%;
+  direction: ltr;
+}
+
+body {
+  min-width: 100px;
+  min-height: 100%;
+}
+
 /* beasties:include end */`
     }
 ].concat(ColorPreflights, DarkPreflights, HelperPreflights, MousePreflights, TypographyPreflights, VisibilityPreflights, TransitionPreflights, SizePreflights);

package/dist/core/typography.unocss.js

@@ -2,8 +2,6 @@ const preflights = [
     {
         getCSS: ({ theme }) => `
 body {
-  min-width: 100px;
-  min-height: 100%;
   font-family: ${theme.typography.fontFamily};
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;

package/dist/index.js

@@ -1081,6 +1081,22 @@ const pluginSafelistMap = {
         'q-notification--bottom-right-leave-active'
     ]
 };
+const colorSafelist = [
+    'bg-primary',
+    'text-primary',
+    'bg-secondary',
+    'text-secondary',
+    'bg-accent',
+    'text-accent',
+    'bg-positive',
+    'text-positive',
+    'bg-negative',
+    'text-negative',
+    'bg-info',
+    'text-info',
+    'bg-warning',
+    'text-warning'
+];
 const baseSafelist = [
     'relative-position',
     'q-panel-parent',
@@ -1456,7 +1472,7 @@ const baseSafelist = [
     // 'q-dark'
 ];
 const generateSafelist = ({ plugins, iconSet }) => {
-    let safelist = baseSafelist;
+    let safelist = [...baseSafelist, ...colorSafelist];
     if (plugins) {
         for (const plugin of plugins) {
             const pluginSafelist = pluginSafelistMap[plugin];
@@ -1515,6 +1531,8 @@ export const QuasarPreset = definePreset((options) => {
                         const pascalMatch = code.matchAll(/Q([A-Z][a-z0-9]+)+/g);
                         const transitionMatch = code.matchAll(/(transition|transition-show|transition-hide|transition-prev|transition-next)="(\S*)"/g);
                         const colorMatch = code.matchAll(/color[=|:]"(.*?)"/g);
+                        const themeColorMatch = code.matchAll(new RegExp(`(${Object.keys(theme.colors).join('|')})`, 'g'));
+                        const iconMatch = code.matchAll(/(?:icon|name)[=|:]"(.*?)"/g);
                         const pascalComponentsMatch = [];
                         const matches = [];
                         for (const match of kebabMatch) {
@@ -1540,6 +1558,13 @@ export const QuasarPreset = definePreset((options) => {
                         for (const match of colorMatch) {
                             colorClasses.push(`text-${match[1]}`, `bg-${match[1]}`);
                         }
+                        for (const match of themeColorMatch) {
+                            colorClasses.push(`text-${match[1]}`, `bg-${match[1]}`);
+                        }
+                        const iconClasses = [];
+                        for (const match of iconMatch) {
+                            iconClasses.push(`i-mdi-${match[1]}`);
+                        }
                         // const classes = qClasses.filter((c) =>
                         //   matches.some((component) => {
                         //     component = component.replaceAll(
@@ -1563,7 +1588,7 @@ export const QuasarPreset = definePreset((options) => {
                                 return acc;
                             }, [])
                         ];
-                        classes.push(...transitionClasses, ...colorClasses, ...componentClasses);
+                        classes.push(...transitionClasses, ...colorClasses, ...componentClasses, ...iconClasses);
                         return classes;
                     }
                 }

package/dist/styles/md3/components/QBtn.unocss.js

@@ -2,7 +2,7 @@ const shortcuts = [
     [
         /^q-btn$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-btn'] ??
-            `layer-components:(bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary) inline-flex flex-col font-medium items-stretch relative outline-0 border-0 align-middle text-[14px] leading-[1.715em] no-underline font-medium text-center w-auto min-h-40px cursor-default px-[16px] py-[4px] min-h-[2.572em] [&_.q-icon]:(text-[1.715em]) [&_.q-spinner]:(text-[1.715em]) [&.disabled]:(!opacity-70) [&:before]:(content-empty block absolute left-[0] right-[0] top-[0] bottom-[0] [border-radius:inherit] elevation-2)`
+            `layer-components:bg-light-primary dark:bg-dark-primary layer-components:text-light-on-primary layer-components:dark:text-dark-on-primary inline-flex flex-col font-medium items-stretch relative outline-0 border-0 align-middle text-[14px] leading-[1.715em] no-underline font-medium text-center w-auto min-h-40px cursor-default px-[16px] py-[4px] min-h-[2.572em] [&_.q-icon]:(text-[1.715em]) [&_.q-spinner]:(text-[1.715em]) [&.disabled]:(!opacity-70) [&:before]:(content-empty block absolute left-[0] right-[0] top-[0] bottom-[0] [border-radius:inherit] elevation-2)`
     ],
     [
         /^q-btn--actionable$/,
@@ -14,7 +14,9 @@ const shortcuts = [
     [
         /^q-btn--outline$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-btn--outline'] ??
-            `!bg-transparent [&:before]:(border-[1px] border-solid border-[currentColor]) [&:before]:([box-shadow:none]) [&_.q-btn\\_\\_progress-indicator]:(opacity-20 bg-current)`
+            `!bg-transparent layer-components:text-light-primary layer-components:dark:text-dark-primary
+       [&:before]:(border-[1px] border-solid border-[currentColor] [box-shadow:none]]) 
+       [&_.q-btn\\_\\_progress-indicator]:(opacity-20 bg-current)`
     ],
     [
         /^q-btn--push$/,
@@ -31,7 +33,9 @@ const shortcuts = [
     [
         /^q-btn--flat$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-btn--flat'] ??
-            `!bg-transparent [&:before]:([box-shadow:none]) [&_.q-btn\\_\\_progress-indicator]:(opacity-20 bg-current)`
+            `!bg-transparent layer-components:text-light-primary layer-components:dark:text-dark-primary
+      [&:before]:([box-shadow:none]) 
+      [&_.q-btn\\_\\_progress-indicator]:(opacity-20 bg-current)`
     ],
     [
         /^q-btn--unelevated$/,
@@ -47,15 +51,18 @@ const shortcuts = [
     [
         /^q-btn--fab$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-btn--fab'] ??
-            `bg-light-primary-container dark:bg-dark-primary-container text-light-on-surface dark:text-dark-on-surface
+            `layer-components:bg-light-primary-container layer-components:dark:bg-dark-primary-container layer-components:text-light-on-surface layer-components:dark:text-dark-on-surface
        w-56px h-56px !rounded-16px
+       z-${theme.quasar.z.fab}
        [&_.q-icon]:(text-[24px]) [&_.q-icon]:(m-auto)`
         // min-h-[56px] min-w-[56px] p-[16px] pb-0
     ],
     [
         /^q-btn--fab-mini$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-btn--fab-mini'] ??
-            `[&_.q-icon]:(text-[24px]) p-[8px] pb-0`
+            `layer-components:bg-light-primary-container layer-components:dark:bg-dark-primary-container layer-components:text-light-on-surface layer-components:dark:text-dark-on-surface
+      w-40px h-40px !rounded-16px
+      [&_.q-icon]:(text-[24px])`
         // min-h-[40px] min-w-[40px]
     ],
     [

package/dist/styles/md3/components/QCard.unocss.js

@@ -2,7 +2,7 @@ const shortcuts = [
     [
         /^q-card$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-card'] ??
-            `rounded-[12px] align-top bg-[#fff] relative bg-light-surface-container dark:bg-dark-surface-container
+            `p-16px rounded-[12px] align-top bg-[#fff] relative bg-light-surface-container dark:bg-dark-surface-container
       [&_>_div:not(.q--avoid-card-border)]:(rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none)
       [&_>_img:not(.q--avoid-card-border)]:(rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none)
       [&_>_div:nth-child(1_of_:not(.q--avoid-card-border))]:([border-top:0] [border-top-left-radius:inherit] [border-top-right-radius:inherit])
@@ -35,7 +35,7 @@ const shortcuts = [
     [
         /^q-card__actions$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-card__actions'] ??
-            `p-[8px] items-center [&_.q-btn--rectangle]:(px-[8px] py-[0])`
+            `p-[8px] items-center [&_.q-btn--rectangle:not(.q-btn--rounded)]:(px-[8px] py-[0])`
     ],
     [
         /^q-card__actions--horiz$/,

package/dist/styles/md3/components/QDate.unocss.js

@@ -88,22 +88,26 @@ const shortcuts = [
     [
         /^q-date__edit-range$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-date__edit-range'] ??
-            `[&:after]:(border-[currentColor_transparent]) [&:nth-child(7n-6):after]:(rounded-tl-none rounded-bl-none) [&:nth-child(7n):after]:(rounded-tr-none rounded-br-none)`
+            `[&:after]:(border-light-primary dark:border-dark-primary border-l-transparent border-r-transparent) 
+      [&:nth-child(7n-6):after]:(rounded-tl-none rounded-bl-none) 
+      [&:nth-child(7n):after]:(rounded-tr-none rounded-br-none)`
     ],
     [
         /^q-date__edit-range-from$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-date__edit-range-from'] ??
-            `[&:after]:(left-[4px] [border-left-color:currentColor] [border-top-color:currentColor] [border-bottom-color:currentColor] rounded-tl-[28px] rounded-bl-[28px])`
+            `[&:after]:(left-[4px] 
+      border-r-0 border-light-primary dark:border-dark-primary rounded-tl-[28px] rounded-bl-[28px])`
     ],
     [
         /^q-date__edit-range-from-to$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-date__edit-range-from-to'] ??
-            `[&:after]:(left-[4px] [border-left-color:currentColor] [border-top-color:currentColor] [border-bottom-color:currentColor] rounded-tl-[28px] rounded-bl-[28px]) [&:after]:(right-[4px] [border-right-color:currentColor] [border-top-color:currentColor] [border-bottom-color:currentColor] rounded-tr-[28px] rounded-br-[28px])`
+            `[&:after]:(left-[4px] border-light-primary dark:border-dark-primary border-r-transparent rounded-tl-[28px] rounded-bl-[28px]) 
+      [&:after]:(right-[4px] [border-light-primary dark:border-dark-primary border-l-transparent rounded-tr-[28px] rounded-br-[28px])`
     ],
     [
         /^q-date__edit-range-to$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-date__edit-range-to'] ??
-            `[&:after]:(right-[4px] [border-right-color:currentColor] [border-top-color:currentColor] [border-bottom-color:currentColor] rounded-tr-[28px] rounded-br-[28px])`
+            `[&:after]:(right-[4px] border-l-transparent border-light-primary dark:border-dark-primary rounded-tr-[28px] rounded-br-[28px])`
     ],
     [
         /^q-date__calendar-days-container$/,

package/dist/styles/md3/components/QDrawer.unocss.js

@@ -2,7 +2,7 @@ const shortcuts = [
     [
         /^q-drawer$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-drawer'] ??
-            `absolute top-[0] bottom-[0] bg-[#fff] z-${theme.quasar.z['side']}`
+            `absolute top-[0] bottom-[0] bg-light-surface-container-low dark:bg-dark-surface-container-low z-${theme.quasar.z['side']}`
     ],
     [
         /^q-drawer--on-top$/,
@@ -22,12 +22,21 @@ const shortcuts = [
     [
         /^q-drawer-container$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-drawer-container'] ??
-            `[&:not(.q-drawer--mini-animate)_.q-drawer--mini]:(!p-0) [&:not(.q-drawer--mini-animate)_.q-drawer--mini_.q-item]:(text-center justify-center pl-0 pr-0 min-w-[0]) [&:not(.q-drawer--mini-animate)__.q-drawer--mini__.q-item\\_\\_section]:(text-center justify-center pl-0 pr-0 min-w-[0]) [&:not(.q-drawer--mini-animate)_.q-drawer--mini_.q-item\\_\\_label]:(hidden) [&:not(.q-drawer--mini-animate)__.q-drawer--mini__.q-item\\_\\_section--main]:(hidden) [&:not(.q-drawer--mini-animate)__.q-drawer--mini__.q-item\\_\\_section--side__~_.q-item\\_\\_section--side]:(hidden)`
+            `[&:not(.q-drawer--mini-animate)_.q-drawer--mini]:(!p-0)
+      [&:not(.q-drawer--mini-animate)_.q-drawer--mini_.q-item]:(text-center justify-center pl-0 pr-0 min-w-[0])
+      [&:not(.q-drawer--mini-animate)_.q-drawer--mini_.q-item\\_\\_section]:(text-center justify-center pl-0 pr-0 min-w-[0])
+      [&:not(.q-drawer--mini-animate)_.q-drawer--mini_.q-item\\_\\_label]:(hidden)
+      [&:not(.q-drawer--mini-animate)__.q-drawer--mini__.q-item\\_\\_section--main]:(hidden)
+      [&:not(.q-drawer--mini-animate)__.q-drawer--mini__.q-item\\_\\_section--side__~_.q-item\\_\\_section--side]:(hidden)`
     ],
     [
         /^q-drawer--mini$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-drawer--mini'] ??
-            `[&_.q-mini-drawer-hide]:(hidden) [&_.q-expansion-item\\_\\_content]:(hidden)`
+            `[&_>_.q-drawer\\_\\_content]:(!py-9px)
+      [&_>_.q-drawer\\_\\_content_>_*]:(!px-4px)
+      [&_.q-mini-drawer-hide]:(hidden) [&_.q-expansion-item\\_\\_content]:(hidden)
+      [&_.q-tab\\_\\_label]:(text-12px)
+      [&_.q-tabs--vertical_.q-tab]:(px-0px)`
     ],
     [
         /^q-drawer--mini-animate$/,
@@ -57,8 +66,11 @@ const shortcuts = [
     [
         /^q-drawer__content$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-drawer__content'] ??
-            `[&_>_.q-list]:(px-28px)
-      [&_>_.q-list_>_.q-item]:(border-rd-16px)
+            `py-14px 
+      [&_>_*]:(px-28px)
+      [&_>_.q-scrollarea]:(px-0)
+      [&_>_.q-list]:(px-12px)
+      [&_.q-list_.q-item]:(border-rd-32px)
       [&_.q-list_>_.q-router-link--active]:(text-light-primary dark:text-dark-primary)
       [&_.q-list_.q-router-link--exact-active]:(bg-light-secondary-container dark:bg-dark-secondary-container
       )`

package/dist/styles/md3/components/QField.unocss.js

@@ -29,7 +29,7 @@ const shortcuts = [
 	[&_::-ms-clear]:(hidden) 
 	[&_::-ms-reveal]:(hidden)`
     ],
-    [/^q-field--with-bottom$/, ([, c], { theme }) => `pb-[20px]`],
+    [/^q-field--with-bottom$/, ([, c], { theme }) => ``],
     [
         /^q-field__marginal$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-field__marginal'] ??
@@ -55,12 +55,12 @@ const shortcuts = [
     [
         /^q-field__bottom$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-field__bottom'] ??
-            `text-[12px] min-h-[20px] leading-none text-black/54 mt--12px px-[12px] pb-[0] [backface-visibility:hidden]`
+            `text-[12px] min-h-[20px] leading-none bg-transparent text-black/54 mt-4px px-[12px] pb-[0] [backface-visibility:hidden]`
     ],
     [
         /^q-field__bottom--animated$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-field__bottom--animated'] ??
-            `translate-y-full left-[0] right-[0] bottom-[0]`
+            `left-[0] right-[0] bottom-[0]`
     ],
     [
         /^q-field__messages$/,
@@ -174,19 +174,19 @@ const shortcuts = [
     [
         /^q-field--filled$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-field--filled'] ??
-            `bg-light-surface-container text-light-on-surface-variant
-       dark:bg-dark-surface-container dark:text-dark-on-surface-variant
+            `[&_.q-field\\_\\_control]:(bg-light-surface-container text-light-on-surface-variant
+       dark:bg-dark-surface-container dark:text-dark-on-surface-variant)
       [&_.q-field\\_\\_control]:(px-[16px] py-[0] layer-components:bg-black/5 rounded-tl-[4px] rounded-br-[0] rounded-tr-[4px] rounded-bl-[0]) 
-	[&_.q-field\\_\\_control:before]:(layer-components:bg-black/5 [border-bottom:1px_solid_rgba(0,_0,_0,_0.42)] opacity-0 [transition:opacity_0.36s_cubic-bezier(0.4,_0,_0.2,_1),_background_0.36s_cubic-bezier(0.4,_0,_0.2,_1)]) 
-	[&_.q-field\\_\\_control:hover:before]:(opacity-100) 
-	[&_.q-field\\_\\_control:after]:(h-[2px] top-auto origin-[center_bottom] [transform:scale3d(0,_1,_1)] bg-current [transition:transform_0.36s_cubic-bezier(0.4,_0,_0.2,_1)]) 
-	[&.q-field--rounded_.q-field\\_\\_control]:(rounded-tl-[28px] rounded-br-[0] rounded-tr-[28px] rounded-bl-[0]) 
-	[&.q-field--highlighted_.q-field\\_\\_control:before]:(opacity-100 layer-components:bg-black/12) 
-	[&.q-field--highlighted_.q-field\\_\\_control:after]:([transform:scale3d(1,_1,_1)]) 
-	[&.q-field--dark_.q-field\\_\\_control]:(layer-components:bg-white/7) 
-	[&.q-field--dark_.q-field\\_\\_control:before]:(layer-components:bg-white/7) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_control:before]:(layer-components:bg-white/1) 
-	[&.q-field--readonly_.q-field\\_\\_control:before]:(opacity-100 bg-transparent [border-bottom-style:dashed])`
+      [&_.q-field\\_\\_control:before]:(layer-components:bg-black/5 [border-bottom:1px_solid_rgba(0,_0,_0,_0.42)] opacity-0 [transition:opacity_0.36s_cubic-bezier(0.4,_0,_0.2,_1),_background_0.36s_cubic-bezier(0.4,_0,_0.2,_1)]) 
+      [&_.q-field\\_\\_control:hover:before]:(opacity-100) 
+      [&_.q-field\\_\\_control:after]:(h-[2px] top-auto origin-[center_bottom] [transform:scale3d(0,_1,_1)] bg-current [transition:transform_0.36s_cubic-bezier(0.4,_0,_0.2,_1)]) 
+      [&.q-field--rounded_.q-field\\_\\_control]:(rounded-tl-[28px] rounded-br-[0] rounded-tr-[28px] rounded-bl-[0]) 
+      [&.q-field--highlighted_.q-field\\_\\_control:before]:(opacity-100 layer-components:bg-black/12) 
+      [&.q-field--highlighted_.q-field\\_\\_control:after]:([transform:scale3d(1,_1,_1)]) 
+      [&.q-field--dark_.q-field\\_\\_control]:(layer-components:bg-white/7) 
+      [&.q-field--dark_.q-field\\_\\_control:before]:(layer-components:bg-white/7) 
+      [&.q-field--dark.q-field--highlighted_.q-field\\_\\_control:before]:(layer-components:bg-white/1) 
+      [&.q-field--readonly_.q-field\\_\\_control:before]:(opacity-100 bg-transparent [border-bottom-style:dashed])`
     ],
     [
         /^q-field--outlined$/,
@@ -273,7 +273,7 @@ const shortcuts = [
             `[&_.q-field--with-bottom]:(pb-[19px]) 
 	[&_.q-field\\_\\_shadow]:(top-[0]) 
 	[&_.q-field\\_\\_control]:(h-[40px]) 
-	[&_.q-field\\_\\_marginal]:(h-[40px]) 
+	[&_.q-field\\_\\_marginal]:() 
 	[&_.q-field\\_\\_bottom]:(text-[11px]) 
 	[&_.q-field\\_\\_label]:(text-[14px] top-[10px]) 
 	[&_.q-field\\_\\_before]:() 

package/dist/styles/md3/components/QFooter.unocss.js

@@ -8,7 +8,7 @@ const shortcuts = [
     [
         /^q-footer$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-footer'] ??
-            `[&_.q-layout\\_\\_shadow]:(-top-[10px]) [&_.q-layout\\_\\_shadow:after]:(top-[10px])  relative z-${theme.quasar.z['marginals']}`
+            `[&_.q-layout\\_\\_shadow]:(-top-[10px]) [&_.q-layout\\_\\_shadow:after]:(top-[10px])  z-${theme.quasar.z['marginals']}`
     ]
 ];
 export { shortcuts };

package/dist/styles/md3/components/QHeader.unocss.js

@@ -8,7 +8,8 @@ const shortcuts = [
     [
         /^q-header$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-header'] ??
-            `z-2000 [&_.q-layout\\_\\_shadow]:(-bottom-10px) [&_.q-layout\\_\\_shadow:after]:(bottom-10px)`
+            `z-2000 [&_.q-layout\\_\\_shadow]:(-bottom-10px) [&_.q-layout\\_\\_shadow:after]:(bottom-10px)
+      [&_.q-toolbar\\_\\_title]:(flex-grow-1000)`
         // relative
     ]
 ];

package/dist/styles/md3/components/QIcon.unocss.js

@@ -7,7 +7,7 @@ const shortcuts = [
   [&>img]:(h-full w-full)
   [&:before]:(w-full h-full flex! items-center justify-center)
   [&:after]:(w-full h-full flex! items-center justify-center)
-  select-none cursor-inherit layer-components:(text-light-on-surface dark:text-dark-on-surface) inline-flex items-center justify-center v-middle
+  select-none cursor-inherit layer-components:text-light-on-surface layer-components:dark:text-dark-on-surface inline-flex items-center justify-center v-middle
   `
     ],
     // [

package/dist/styles/md3/components/QItem.unocss.js

@@ -2,7 +2,7 @@ const shortcuts = [
     [
         /^q-item$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-item'] ??
-            `min-h-[40px] px-[16px] py-[8px] [color:inherit] [transition:color_0.3s,_background-color_0.3s] [&_>_.q-item\\_\\_section--thumbnail:first-child]:(-ml-[16px]) [&_>_.q-focus-helper_+_.q-item\\_\\_section--thumbnail]:(-ml-[16px]) [&_>_.q-item\\_\\_section--thumbnail:last-of-type]:(-mr-[16px]) relative
+            `min-h-[28px] px-[16px] py-[8px] [color:inherit] [transition:color_0.3s,_background-color_0.3s] [&_>_.q-item\\_\\_section--thumbnail:first-child]:(-ml-[16px]) [&_>_.q-focus-helper_+_.q-item\\_\\_section--thumbnail]:(-ml-[16px]) [&_>_.q-item\\_\\_section--thumbnail:last-of-type]:(-mr-[16px]) relative
     [&.q-router-link--active]:(text-primary)`
     ],
     [
@@ -55,8 +55,8 @@ const shortcuts = [
         /^q-item__section--main$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-item__section--main'] ??
             `w-auto min-w-[0] max-w-full flex-[10000_1_0%]
-      [&:has(>:last-child:nth-child(2))]:(min-h-72px)
-      [&:has(>:last-child:nth-child(3))]:(min-h-88px)
+      [&:has(>:last-child:nth-child(2))]:(min-h-36px)
+      [&:has(>:last-child:nth-child(3))]:(min-h-44px)
       [&_+_.q-item\\_\\_section--main]:(ml-[8px]) 
       [&_~_.q-item\\_\\_section--side]:(items-end pr-0 pl-[16px])`
     ],
@@ -73,9 +73,9 @@ const shortcuts = [
     [
         /^q-list--dense$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-list--dense'] ??
-            `[&_>_.q-item]:(min-h-[32px] px-[16px] py-[2px])`
+            `[&_>_.q-item]:(min-h-[28px] px-[16px] py-[2px])`
     ],
-    [/^q-item--dense$/, ([, c], { theme }) => `min-h-[32px] px-[16px] py-[2px]`],
+    [/^q-item--dense$/, ([, c], { theme }) => `min-h-[28px] px-[16px] py-[2px]`],
     [
         /^q-list--dark$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-list--dark'] ??

package/dist/styles/md3/components/QLayout.unocss.js

@@ -78,7 +78,7 @@ const shortcuts = [
     [
         /^q-layout__section--marginal$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-layout__section--marginal'] ??
-            `text-[#fff] bg-light-surface dark:bg-dark-surface-container text-light-on-surface dark:text-dark-on-surface`
+            `text-[#fff] bg-light-surface-container-low dark:bg-dark-surface-container-low text-light-on-surface dark:text-dark-on-surface`
     ]
 ];
 export { preflights, shortcuts };

package/dist/styles/md3/components/QPageSticky.unocss.js

@@ -1,4 +1,8 @@
 const shortcuts = [
+    [
+        /^q-page-sticky$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-page-sticky'] ?? ``
+    ],
     [
         /^q-page-sticky--shrink$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-page-sticky--shrink'] ??

package/dist/styles/md3/components/QTabs.unocss.js

@@ -2,7 +2,7 @@ const shortcuts = [
     [
         /^q-tab$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tab'] ??
-            `px-[16px] py-[0] min-h-[48px] [transition:color_0.3s,_background-color_0.3s] uppercase whitespace-nowrap [color:inherit] no-underline [&_.q-badge]:(top-[3px] -right-[12px])`
+            `px-[16px] py-[0] min-h-[48px] [transition:color_0.3s,_background-color_0.3s] whitespace-nowrap [color:inherit] no-underline [&_.q-badge]:(top-[3px] -right-[12px])`
     ],
     [
         /^q-tab--full$/,
@@ -15,7 +15,7 @@ const shortcuts = [
     [
         /^q-tab__content$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tab__content'] ??
-            `[height:inherit] px-[0] py-[4px] min-w-[40px] [&_.q-chip--floating]:(top-[0] -right-[16px])`
+            `[height:inherit] z-2 px-[0] py-[4px] min-w-[40px] [&_.q-chip--floating]:(top-[0] -right-[16px])`
     ],
     [
         /^q-tab__content--inline$/,
@@ -45,7 +45,7 @@ const shortcuts = [
     [
         /^q-tab__indicator$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tab__indicator'] ??
-            `!relative opacity-0 h-[2px] bg-current`
+            `absolute h-32px w-52px top-0 left-10px border-rd-16px bg-light-secondary-container dark:bg-dark-secondary-container opacity-0`
     ],
     [
         /^q-tab--active$/,
@@ -108,7 +108,8 @@ const shortcuts = [
     [
         /^q-tabs--vertical$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tabs--vertical'] ??
-            `!block h-full [&_.q-tabs\\_\\_content]:(!block h-full) [&_.q-tabs\\_\\_arrow]:(w-full h-[36px] text-center) [&_.q-tabs\\_\\_arrow--left]:(top-[0] left-[0] right-[0]) [&_.q-tabs\\_\\_arrow--right]:(left-[0] right-[0] bottom-[0]) [&_.q-tab]:(px-[8px] py-[0]) [&_.q-tab\\_\\_indicator]:(h-[unset] w-[2px]) [&.q-tabs--not-scrollable_.q-tabs\\_\\_content]:(h-full) [&.q-tabs--dense_.q-tab\\_\\_content]:(min-w-[24px])`
+            `!block h-full [&_.q-tabs\\_\\_content]:(!block h-full) [&_.q-tabs\\_\\_arrow]:(w-full h-[36px] text-center) [&_.q-tabs\\_\\_arrow--left]:(top-[0] left-[0] right-[0]) [&_.q-tabs\\_\\_arrow--right]:(left-[0] right-[0] bottom-[0]) [&_.q-tab]:(px-[8px] py-[0]) 
+      [&.q-tabs--not-scrollable_.q-tabs\\_\\_content]:(h-full) [&.q-tabs--dense_.q-tab\\_\\_content]:(min-w-[24px])`
     ],
     [
         /^q-tabs--dense$/,

package/dist/styles/md3/components/QToggle.unocss.js

@@ -47,9 +47,7 @@ const shortcuts = [
             `[&_.q-toggle\\_\\_track]:(bg-light-primary dark:bg-dark-primary) 
       [&_.q-toggle\\_\\_thumb]:(text-light-on-primary-container dark:text-light-on-primary-container left-[0.95em] top-[0.0625em] w-[0.875em] h-[0.875em])
       [&_.q-toggle\\_\\_thumb:after]:(layer-components:!bg-light-on-primary dark:!bg-dark-on-primary)
-      [&_.q-toggle\\_\\_thumb_.q-icon]:(layer-components:text-[#fff] opacity-100)
-      [&:not(.disabled):focus_.q-toggle\\_\\_thumb:before]:(scale-200)
-      [&:not(.disabled):hover_.q-toggle\\_\\_thumb:before]:(scale-200)`
+      [&_.q-toggle\\_\\_thumb_.q-icon]:(layer-components:text-[#fff] opacity-100)`
     ],
     [
         /^q-toggle--dark$/,

package/dist/styles/md3/components/QToolbar.unocss.js

@@ -10,7 +10,7 @@ const shortcuts = [
     [
         /^q-toolbar__title$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-toolbar__title'] ??
-            `flex-1 min-w-[1px] max-w-full text-[21px] font-normal tracking-[0.01em] px-[12px] py-[0] [&:first-child]:(pl-0) [&:last-child]:(pr-0)`
+            `flex-initial min-w-[1px] max-w-full text-[21px] font-normal tracking-[0.01em] px-[12px] py-[0] [&:first-child]:(pl-0) [&:last-child]:(pr-0)`
     ]
 ];
 export { shortcuts };

package/dist/styles/md3/index.js

@@ -80,7 +80,7 @@ const style = {
     rules: [].concat(),
     shortcuts: [].concat(QIconShortcuts, QAjaxBarShortcuts, QAvatarShortcuts, QBadgeShortcuts, QBreadcrumbsShortcuts, QBannerShortcuts, QBarShortcuts, QBtnShortcuts, QBtnDropdownShortcuts, QBtnToggleShortcuts, QCardShortcuts, QCarouselShortcuts, QChatMessageShortcuts, QCheckboxShortcuts, QChipShortcuts, QCircularProgressShortcuts, QColorPickerShortcuts, QDateShortcuts, QDialogShortcuts, QEditorShortcuts, QExpansionItemShortcuts, QFabShortcuts, QFieldShortcuts, QFileShortcuts, QFormShortcuts, QImgShortcuts, QInnerLoadingShortcuts, QInputShortcuts, QIntersectionShortcuts, QItemShortcuts, QKnobShortcuts, QLayoutShortcuts, QLinearProgressShortcuts, QMenuShortcuts, QOptionGroupShortcuts, QPageShortcuts, QPageStickyShortcuts, QPaginationShortcuts, QParallaxShortcuts, QPopupEditShortcuts, QPullToRefreshShortcuts, QRadioShortcuts, QRatingShortcuts, QResponsiveShortcuts, QScrollareaShortcuts, QSelectShortcuts, QSeparatorShortcuts, QSkeletonShortcuts, QSlideItemShortcuts, QSliderShortcuts, QSpaceShortcuts, QSpinnerShortcuts, QSplitterShortcuts, QStepperShortcuts, QTabPanelShortcuts, QTableShortcuts, QTabsShortcuts, QTimeShortcuts, QTimelineShortcuts, QToggleShortcuts, QToolbarShortcuts, QTooltipShortcuts, QTreeShortcuts, QUploaderShortcuts, QVideoShortcuts, QVirtualScrollShortcuts, PanelShortcuts, QMorphShortcuts, QRippleShortcuts, QBottomSheetShortcuts, QDialogPluginShortcuts, QLoadingShortcuts, QNotifyShortcuts, QHeaderShortcuts, QFooterShortcuts, QDrawerShortcuts)
 };
-export const setDefaultProps = ({ QBtn, QBtnDropdown, QInput, QBtnToggle }) => {
+export const setDefaultProps = ({ QBtn, QBtnDropdown, QInput, QBtnToggle, QSelect, QField }) => {
     QBtn.props.rounded = {
         type: QBtn.props.rounded,
         default: true
@@ -97,5 +97,13 @@ export const setDefaultProps = ({ QBtn, QBtnDropdown, QInput, QBtnToggle }) => {
         type: QBtnToggle.props.rounded,
         default: true
     };
+    QSelect.props.filled = {
+        type: QSelect.props.filled,
+        default: true
+    };
+    QField.props.filled = {
+        type: QField.props.filled,
+        default: true
+    };
 };
 export default style;

package/dist/types/styles/md3/index.d.ts

@@ -1,9 +1,11 @@
 import { QuasarStyle } from '../index.js';
 declare const style: QuasarStyle;
-export declare const setDefaultProps: ({ QBtn, QBtnDropdown, QInput, QBtnToggle }: {
+export declare const setDefaultProps: ({ QBtn, QBtnDropdown, QInput, QBtnToggle, QSelect, QField }: {
     QBtn: any;
     QBtnDropdown: any;
     QInput: any;
     QBtnToggle: any;
+    QSelect: any;
+    QField: any;
 }) => void;
 export default style;

package/dist/types/theme.d.ts

@@ -712,6 +712,7 @@ export interface QuasarTheme {
             'q-drawer__backdrop'?: string;
             'q-drawer__opener'?: string;
             'q-page'?: string;
+            'q-page-sticky'?: string;
             'q-page-sticky--shrink'?: string;
             'q-body--layout-animate'?: string;
             'q-body--drawer-toggle'?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unocss-preset-quasar",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "UnoCSS preset for Quasar Framework",

package/src/core/index.ts

@@ -315,6 +315,16 @@ font-family: inherit;
 margin: 0;
 }
 
+html, body, #q-app {
+  width: 100%;
+  direction: ltr;
+}
+
+body {
+  min-width: 100px;
+  min-height: 100%;
+}
+
 /* beasties:include end */`
     }
   ] as Preflight<QuasarTheme>[]

package/src/core/typography.unocss.ts

@@ -5,8 +5,6 @@ const preflights: Preflight<QuasarTheme>[] = [
   {
     getCSS: ({ theme }) => `
 body {
-  min-width: 100px;
-  min-height: 100%;
   font-family: ${theme.typography.fontFamily};
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;

package/src/index.ts

@@ -1119,6 +1119,23 @@ const pluginSafelistMap: Partial<Record<keyof QuasarPlugins, string[]>> = {
   ]
 }
 
+const colorSafelist = [
+  'bg-primary',
+  'text-primary',
+  'bg-secondary',
+  'text-secondary',
+  'bg-accent',
+  'text-accent',
+  'bg-positive',
+  'text-positive',
+  'bg-negative',
+  'text-negative',
+  'bg-info',
+  'text-info',
+  'bg-warning',
+  'text-warning'
+]
+
 const baseSafelist = [
   'relative-position',
   'q-panel-parent',
@@ -1501,7 +1518,7 @@ const generateSafelist = ({
   plugins?: (keyof QuasarPlugins)[]
   iconSet?: QuasarIconSet
 }) => {
-  let safelist = baseSafelist
+  let safelist = [...baseSafelist, ...colorSafelist]
   if (plugins) {
     for (const plugin of plugins) {
       const pluginSafelist = pluginSafelistMap[plugin]
@@ -1566,6 +1583,11 @@ export const QuasarPreset = definePreset((options: QuasarPresetOptions) => {
             )
             const colorMatch = code.matchAll(/color[=|:]"(.*?)"/g)
 
+            const themeColorMatch = code.matchAll(
+              new RegExp(`(${Object.keys(theme.colors).join('|')})`, 'g')
+            )
+            const iconMatch = code.matchAll(/(?:icon|name)[=|:]"(.*?)"/g)
+
             const pascalComponentsMatch: string[] = []
             const matches: string[] = []
 
@@ -1594,6 +1616,14 @@ export const QuasarPreset = definePreset((options: QuasarPresetOptions) => {
             for (const match of colorMatch) {
               colorClasses.push(`text-${match[1]}`, `bg-${match[1]}`)
             }
+            for (const match of themeColorMatch) {
+              colorClasses.push(`text-${match[1]}`, `bg-${match[1]}`)
+            }
+
+            const iconClasses = []
+            for (const match of iconMatch) {
+              iconClasses.push(`i-mdi-${match[1]}`)
+            }
 
             // const classes = qClasses.filter((c) =>
             //   matches.some((component) => {
@@ -1625,7 +1655,8 @@ export const QuasarPreset = definePreset((options: QuasarPresetOptions) => {
             classes.push(
               ...transitionClasses,
               ...colorClasses,
-              ...componentClasses
+              ...componentClasses,
+              ...iconClasses
             )
             return classes
           }

package/src/styles/md3/components/QBtn.unocss.ts

@@ -6,7 +6,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-btn$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-btn'] ??
-      `layer-components:(bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary) inline-flex flex-col font-medium items-stretch relative outline-0 border-0 align-middle text-[14px] leading-[1.715em] no-underline font-medium text-center w-auto min-h-40px cursor-default px-[16px] py-[4px] min-h-[2.572em] [&_.q-icon]:(text-[1.715em]) [&_.q-spinner]:(text-[1.715em]) [&.disabled]:(!opacity-70) [&:before]:(content-empty block absolute left-[0] right-[0] top-[0] bottom-[0] [border-radius:inherit] elevation-2)`
+      `layer-components:bg-light-primary dark:bg-dark-primary layer-components:text-light-on-primary layer-components:dark:text-dark-on-primary inline-flex flex-col font-medium items-stretch relative outline-0 border-0 align-middle text-[14px] leading-[1.715em] no-underline font-medium text-center w-auto min-h-40px cursor-default px-[16px] py-[4px] min-h-[2.572em] [&_.q-icon]:(text-[1.715em]) [&_.q-spinner]:(text-[1.715em]) [&.disabled]:(!opacity-70) [&:before]:(content-empty block absolute left-[0] right-[0] top-[0] bottom-[0] [border-radius:inherit] elevation-2)`
   ],
   [
     /^q-btn--actionable$/,
@@ -23,7 +23,9 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-btn--outline$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-btn--outline'] ??
-      `!bg-transparent [&:before]:(border-[1px] border-solid border-[currentColor]) [&:before]:([box-shadow:none]) [&_.q-btn\\_\\_progress-indicator]:(opacity-20 bg-current)`
+      `!bg-transparent layer-components:text-light-primary layer-components:dark:text-dark-primary
+       [&:before]:(border-[1px] border-solid border-[currentColor] [box-shadow:none]]) 
+       [&_.q-btn\\_\\_progress-indicator]:(opacity-20 bg-current)`
   ],
 
   [
@@ -48,7 +50,9 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-btn--flat$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-btn--flat'] ??
-      `!bg-transparent [&:before]:([box-shadow:none]) [&_.q-btn\\_\\_progress-indicator]:(opacity-20 bg-current)`
+      `!bg-transparent layer-components:text-light-primary layer-components:dark:text-dark-primary
+      [&:before]:([box-shadow:none]) 
+      [&_.q-btn\\_\\_progress-indicator]:(opacity-20 bg-current)`
   ],
 
   [
@@ -70,8 +74,9 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-btn--fab$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-btn--fab'] ??
-      `bg-light-primary-container dark:bg-dark-primary-container text-light-on-surface dark:text-dark-on-surface
+      `layer-components:bg-light-primary-container layer-components:dark:bg-dark-primary-container layer-components:text-light-on-surface layer-components:dark:text-dark-on-surface
        w-56px h-56px !rounded-16px
+       z-${theme.quasar.z.fab}
        [&_.q-icon]:(text-[24px]) [&_.q-icon]:(m-auto)`
     // min-h-[56px] min-w-[56px] p-[16px] pb-0
   ],
@@ -80,7 +85,9 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-btn--fab-mini$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-btn--fab-mini'] ??
-      `[&_.q-icon]:(text-[24px]) p-[8px] pb-0`
+      `layer-components:bg-light-primary-container layer-components:dark:bg-dark-primary-container layer-components:text-light-on-surface layer-components:dark:text-dark-on-surface
+      w-40px h-40px !rounded-16px
+      [&_.q-icon]:(text-[24px])`
     // min-h-[40px] min-w-[40px]
   ],
 

package/src/styles/md3/components/QCard.unocss.ts

@@ -6,7 +6,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-card$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-card'] ??
-      `rounded-[12px] align-top bg-[#fff] relative bg-light-surface-container dark:bg-dark-surface-container
+      `p-16px rounded-[12px] align-top bg-[#fff] relative bg-light-surface-container dark:bg-dark-surface-container
       [&_>_div:not(.q--avoid-card-border)]:(rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none)
       [&_>_img:not(.q--avoid-card-border)]:(rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none)
       [&_>_div:nth-child(1_of_:not(.q--avoid-card-border))]:([border-top:0] [border-top-left-radius:inherit] [border-top-right-radius:inherit])
@@ -49,7 +49,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-card__actions$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-card__actions'] ??
-      `p-[8px] items-center [&_.q-btn--rectangle]:(px-[8px] py-[0])`
+      `p-[8px] items-center [&_.q-btn--rectangle:not(.q-btn--rounded)]:(px-[8px] py-[0])`
   ],
 
   [

package/src/styles/md3/components/QDate.unocss.ts

@@ -127,28 +127,32 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-date__edit-range$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-date__edit-range'] ??
-      `[&:after]:(border-[currentColor_transparent]) [&:nth-child(7n-6):after]:(rounded-tl-none rounded-bl-none) [&:nth-child(7n):after]:(rounded-tr-none rounded-br-none)`
+      `[&:after]:(border-light-primary dark:border-dark-primary border-l-transparent border-r-transparent) 
+      [&:nth-child(7n-6):after]:(rounded-tl-none rounded-bl-none) 
+      [&:nth-child(7n):after]:(rounded-tr-none rounded-br-none)`
   ],
 
   [
     /^q-date__edit-range-from$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-date__edit-range-from'] ??
-      `[&:after]:(left-[4px] [border-left-color:currentColor] [border-top-color:currentColor] [border-bottom-color:currentColor] rounded-tl-[28px] rounded-bl-[28px])`
+      `[&:after]:(left-[4px] 
+      border-r-0 border-light-primary dark:border-dark-primary rounded-tl-[28px] rounded-bl-[28px])`
   ],
 
   [
     /^q-date__edit-range-from-to$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-date__edit-range-from-to'] ??
-      `[&:after]:(left-[4px] [border-left-color:currentColor] [border-top-color:currentColor] [border-bottom-color:currentColor] rounded-tl-[28px] rounded-bl-[28px]) [&:after]:(right-[4px] [border-right-color:currentColor] [border-top-color:currentColor] [border-bottom-color:currentColor] rounded-tr-[28px] rounded-br-[28px])`
+      `[&:after]:(left-[4px] border-light-primary dark:border-dark-primary border-r-transparent rounded-tl-[28px] rounded-bl-[28px]) 
+      [&:after]:(right-[4px] [border-light-primary dark:border-dark-primary border-l-transparent rounded-tr-[28px] rounded-br-[28px])`
   ],
 
   [
     /^q-date__edit-range-to$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-date__edit-range-to'] ??
-      `[&:after]:(right-[4px] [border-right-color:currentColor] [border-top-color:currentColor] [border-bottom-color:currentColor] rounded-tr-[28px] rounded-br-[28px])`
+      `[&:after]:(right-[4px] border-l-transparent border-light-primary dark:border-dark-primary rounded-tr-[28px] rounded-br-[28px])`
   ],
 
   [

package/src/styles/md3/components/QDrawer.unocss.ts

@@ -6,7 +6,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-drawer$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-drawer'] ??
-      `absolute top-[0] bottom-[0] bg-[#fff] z-${theme.quasar.z['side']}`
+      `absolute top-[0] bottom-[0] bg-light-surface-container-low dark:bg-dark-surface-container-low z-${theme.quasar.z['side']}`
   ],
 
   [
@@ -34,14 +34,23 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-drawer-container$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-drawer-container'] ??
-      `[&:not(.q-drawer--mini-animate)_.q-drawer--mini]:(!p-0) [&:not(.q-drawer--mini-animate)_.q-drawer--mini_.q-item]:(text-center justify-center pl-0 pr-0 min-w-[0]) [&:not(.q-drawer--mini-animate)__.q-drawer--mini__.q-item\\_\\_section]:(text-center justify-center pl-0 pr-0 min-w-[0]) [&:not(.q-drawer--mini-animate)_.q-drawer--mini_.q-item\\_\\_label]:(hidden) [&:not(.q-drawer--mini-animate)__.q-drawer--mini__.q-item\\_\\_section--main]:(hidden) [&:not(.q-drawer--mini-animate)__.q-drawer--mini__.q-item\\_\\_section--side__~_.q-item\\_\\_section--side]:(hidden)`
+      `[&:not(.q-drawer--mini-animate)_.q-drawer--mini]:(!p-0)
+      [&:not(.q-drawer--mini-animate)_.q-drawer--mini_.q-item]:(text-center justify-center pl-0 pr-0 min-w-[0])
+      [&:not(.q-drawer--mini-animate)_.q-drawer--mini_.q-item\\_\\_section]:(text-center justify-center pl-0 pr-0 min-w-[0])
+      [&:not(.q-drawer--mini-animate)_.q-drawer--mini_.q-item\\_\\_label]:(hidden)
+      [&:not(.q-drawer--mini-animate)__.q-drawer--mini__.q-item\\_\\_section--main]:(hidden)
+      [&:not(.q-drawer--mini-animate)__.q-drawer--mini__.q-item\\_\\_section--side__~_.q-item\\_\\_section--side]:(hidden)`
   ],
 
   [
     /^q-drawer--mini$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-drawer--mini'] ??
-      `[&_.q-mini-drawer-hide]:(hidden) [&_.q-expansion-item\\_\\_content]:(hidden)`
+      `[&_>_.q-drawer\\_\\_content]:(!py-9px)
+      [&_>_.q-drawer\\_\\_content_>_*]:(!px-4px)
+      [&_.q-mini-drawer-hide]:(hidden) [&_.q-expansion-item\\_\\_content]:(hidden)
+      [&_.q-tab\\_\\_label]:(text-12px)
+      [&_.q-tabs--vertical_.q-tab]:(px-0px)`
   ],
 
   [
@@ -83,8 +92,11 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-drawer__content$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-drawer__content'] ??
-      `[&_>_.q-list]:(px-28px)
-      [&_>_.q-list_>_.q-item]:(border-rd-16px)
+      `py-14px 
+      [&_>_*]:(px-28px)
+      [&_>_.q-scrollarea]:(px-0)
+      [&_>_.q-list]:(px-12px)
+      [&_.q-list_.q-item]:(border-rd-32px)
       [&_.q-list_>_.q-router-link--active]:(text-light-primary dark:text-dark-primary)
       [&_.q-list_.q-router-link--exact-active]:(bg-light-secondary-container dark:bg-dark-secondary-container
       )`

package/src/styles/md3/components/QField.unocss.ts

@@ -35,7 +35,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
 	[&_::-ms-reveal]:(hidden)`
   ],
 
-  [/^q-field--with-bottom$/, ([, c], { theme }) => `pb-[20px]`],
+  [/^q-field--with-bottom$/, ([, c], { theme }) => ``],
 
   [
     /^q-field__marginal$/,
@@ -71,14 +71,14 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-field__bottom$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-field__bottom'] ??
-      `text-[12px] min-h-[20px] leading-none text-black/54 mt--12px px-[12px] pb-[0] [backface-visibility:hidden]`
+      `text-[12px] min-h-[20px] leading-none bg-transparent text-black/54 mt-4px px-[12px] pb-[0] [backface-visibility:hidden]`
   ],
 
   [
     /^q-field__bottom--animated$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-field__bottom--animated'] ??
-      `translate-y-full left-[0] right-[0] bottom-[0]`
+      `left-[0] right-[0] bottom-[0]`
   ],
 
   [
@@ -222,19 +222,19 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-field--filled$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-field--filled'] ??
-      `bg-light-surface-container text-light-on-surface-variant
-       dark:bg-dark-surface-container dark:text-dark-on-surface-variant
+      `[&_.q-field\\_\\_control]:(bg-light-surface-container text-light-on-surface-variant
+       dark:bg-dark-surface-container dark:text-dark-on-surface-variant)
       [&_.q-field\\_\\_control]:(px-[16px] py-[0] layer-components:bg-black/5 rounded-tl-[4px] rounded-br-[0] rounded-tr-[4px] rounded-bl-[0]) 
-	[&_.q-field\\_\\_control:before]:(layer-components:bg-black/5 [border-bottom:1px_solid_rgba(0,_0,_0,_0.42)] opacity-0 [transition:opacity_0.36s_cubic-bezier(0.4,_0,_0.2,_1),_background_0.36s_cubic-bezier(0.4,_0,_0.2,_1)]) 
-	[&_.q-field\\_\\_control:hover:before]:(opacity-100) 
-	[&_.q-field\\_\\_control:after]:(h-[2px] top-auto origin-[center_bottom] [transform:scale3d(0,_1,_1)] bg-current [transition:transform_0.36s_cubic-bezier(0.4,_0,_0.2,_1)]) 
-	[&.q-field--rounded_.q-field\\_\\_control]:(rounded-tl-[28px] rounded-br-[0] rounded-tr-[28px] rounded-bl-[0]) 
-	[&.q-field--highlighted_.q-field\\_\\_control:before]:(opacity-100 layer-components:bg-black/12) 
-	[&.q-field--highlighted_.q-field\\_\\_control:after]:([transform:scale3d(1,_1,_1)]) 
-	[&.q-field--dark_.q-field\\_\\_control]:(layer-components:bg-white/7) 
-	[&.q-field--dark_.q-field\\_\\_control:before]:(layer-components:bg-white/7) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_control:before]:(layer-components:bg-white/1) 
-	[&.q-field--readonly_.q-field\\_\\_control:before]:(opacity-100 bg-transparent [border-bottom-style:dashed])`
+      [&_.q-field\\_\\_control:before]:(layer-components:bg-black/5 [border-bottom:1px_solid_rgba(0,_0,_0,_0.42)] opacity-0 [transition:opacity_0.36s_cubic-bezier(0.4,_0,_0.2,_1),_background_0.36s_cubic-bezier(0.4,_0,_0.2,_1)]) 
+      [&_.q-field\\_\\_control:hover:before]:(opacity-100) 
+      [&_.q-field\\_\\_control:after]:(h-[2px] top-auto origin-[center_bottom] [transform:scale3d(0,_1,_1)] bg-current [transition:transform_0.36s_cubic-bezier(0.4,_0,_0.2,_1)]) 
+      [&.q-field--rounded_.q-field\\_\\_control]:(rounded-tl-[28px] rounded-br-[0] rounded-tr-[28px] rounded-bl-[0]) 
+      [&.q-field--highlighted_.q-field\\_\\_control:before]:(opacity-100 layer-components:bg-black/12) 
+      [&.q-field--highlighted_.q-field\\_\\_control:after]:([transform:scale3d(1,_1,_1)]) 
+      [&.q-field--dark_.q-field\\_\\_control]:(layer-components:bg-white/7) 
+      [&.q-field--dark_.q-field\\_\\_control:before]:(layer-components:bg-white/7) 
+      [&.q-field--dark.q-field--highlighted_.q-field\\_\\_control:before]:(layer-components:bg-white/1) 
+      [&.q-field--readonly_.q-field\\_\\_control:before]:(opacity-100 bg-transparent [border-bottom-style:dashed])`
   ],
 
   [
@@ -333,7 +333,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
       `[&_.q-field--with-bottom]:(pb-[19px]) 
 	[&_.q-field\\_\\_shadow]:(top-[0]) 
 	[&_.q-field\\_\\_control]:(h-[40px]) 
-	[&_.q-field\\_\\_marginal]:(h-[40px]) 
+	[&_.q-field\\_\\_marginal]:() 
 	[&_.q-field\\_\\_bottom]:(text-[11px]) 
 	[&_.q-field\\_\\_label]:(text-[14px] top-[10px]) 
 	[&_.q-field\\_\\_before]:() 

package/src/styles/md3/components/QFooter.unocss.ts

@@ -15,7 +15,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-footer$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-footer'] ??
-      `[&_.q-layout\\_\\_shadow]:(-top-[10px]) [&_.q-layout\\_\\_shadow:after]:(top-[10px])  relative z-${theme.quasar.z['marginals']}`
+      `[&_.q-layout\\_\\_shadow]:(-top-[10px]) [&_.q-layout\\_\\_shadow:after]:(top-[10px])  z-${theme.quasar.z['marginals']}`
   ]
 ]
 

package/src/styles/md3/components/QHeader.unocss.ts

@@ -15,7 +15,8 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-header$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-header'] ??
-      `z-2000 [&_.q-layout\\_\\_shadow]:(-bottom-10px) [&_.q-layout\\_\\_shadow:after]:(bottom-10px)`
+      `z-2000 [&_.q-layout\\_\\_shadow]:(-bottom-10px) [&_.q-layout\\_\\_shadow:after]:(bottom-10px)
+      [&_.q-toolbar\\_\\_title]:(flex-grow-1000)`
     // relative
   ]
 ]

package/src/styles/md3/components/QIcon.unocss.ts

@@ -13,7 +13,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [&>img]:(h-full w-full)
   [&:before]:(w-full h-full flex! items-center justify-center)
   [&:after]:(w-full h-full flex! items-center justify-center)
-  select-none cursor-inherit layer-components:(text-light-on-surface dark:text-dark-on-surface) inline-flex items-center justify-center v-middle
+  select-none cursor-inherit layer-components:text-light-on-surface layer-components:dark:text-dark-on-surface inline-flex items-center justify-center v-middle
   `
   ],
   // [

package/src/styles/md3/components/QItem.unocss.ts

@@ -6,7 +6,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-item$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-item'] ??
-      `min-h-[40px] px-[16px] py-[8px] [color:inherit] [transition:color_0.3s,_background-color_0.3s] [&_>_.q-item\\_\\_section--thumbnail:first-child]:(-ml-[16px]) [&_>_.q-focus-helper_+_.q-item\\_\\_section--thumbnail]:(-ml-[16px]) [&_>_.q-item\\_\\_section--thumbnail:last-of-type]:(-mr-[16px]) relative
+      `min-h-[28px] px-[16px] py-[8px] [color:inherit] [transition:color_0.3s,_background-color_0.3s] [&_>_.q-item\\_\\_section--thumbnail:first-child]:(-ml-[16px]) [&_>_.q-focus-helper_+_.q-item\\_\\_section--thumbnail]:(-ml-[16px]) [&_>_.q-item\\_\\_section--thumbnail:last-of-type]:(-mr-[16px]) relative
     [&.q-router-link--active]:(text-primary)`
   ],
 
@@ -80,8 +80,8 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-item__section--main'] ??
       `w-auto min-w-[0] max-w-full flex-[10000_1_0%]
-      [&:has(>:last-child:nth-child(2))]:(min-h-72px)
-      [&:has(>:last-child:nth-child(3))]:(min-h-88px)
+      [&:has(>:last-child:nth-child(2))]:(min-h-36px)
+      [&:has(>:last-child:nth-child(3))]:(min-h-44px)
       [&_+_.q-item\\_\\_section--main]:(ml-[8px]) 
       [&_~_.q-item\\_\\_section--side]:(items-end pr-0 pl-[16px])`
   ],
@@ -104,10 +104,10 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-list--dense$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-list--dense'] ??
-      `[&_>_.q-item]:(min-h-[32px] px-[16px] py-[2px])`
+      `[&_>_.q-item]:(min-h-[28px] px-[16px] py-[2px])`
   ],
 
-  [/^q-item--dense$/, ([, c], { theme }) => `min-h-[32px] px-[16px] py-[2px]`],
+  [/^q-item--dense$/, ([, c], { theme }) => `min-h-[28px] px-[16px] py-[2px]`],
 
   [
     /^q-list--dark$/,

package/src/styles/md3/components/QLayout.unocss.ts

@@ -88,7 +88,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-layout__section--marginal$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-layout__section--marginal'] ??
-      `text-[#fff] bg-light-surface dark:bg-dark-surface-container text-light-on-surface dark:text-dark-on-surface`
+      `text-[#fff] bg-light-surface-container-low dark:bg-dark-surface-container-low text-light-on-surface dark:text-dark-on-surface`
   ]
 ]
 

package/src/styles/md3/components/QPageSticky.unocss.ts

@@ -2,6 +2,10 @@ import type { Rule, UserShortcuts } from '@unocss/core'
 import type { QuasarTheme } from '../../../theme.js'
 
 const shortcuts: UserShortcuts<QuasarTheme> = [
+  [
+    /^q-page-sticky$/,
+    ([, c], { theme }) => theme.quasar?.components?.['q-page-sticky'] ?? ``
+  ],
   [
     /^q-page-sticky--shrink$/,
     ([, c], { theme }) =>

package/src/styles/md3/components/QTabs.unocss.ts

@@ -6,7 +6,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-tab$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tab'] ??
-      `px-[16px] py-[0] min-h-[48px] [transition:color_0.3s,_background-color_0.3s] uppercase whitespace-nowrap [color:inherit] no-underline [&_.q-badge]:(top-[3px] -right-[12px])`
+      `px-[16px] py-[0] min-h-[48px] [transition:color_0.3s,_background-color_0.3s] whitespace-nowrap [color:inherit] no-underline [&_.q-badge]:(top-[3px] -right-[12px])`
   ],
 
   [
@@ -25,7 +25,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-tab__content$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tab__content'] ??
-      `[height:inherit] px-[0] py-[4px] min-w-[40px] [&_.q-chip--floating]:(top-[0] -right-[16px])`
+      `[height:inherit] z-2 px-[0] py-[4px] min-w-[40px] [&_.q-chip--floating]:(top-[0] -right-[16px])`
   ],
 
   [
@@ -67,7 +67,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-tab__indicator$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tab__indicator'] ??
-      `!relative opacity-0 h-[2px] bg-current`
+      `absolute h-32px w-52px top-0 left-10px border-rd-16px bg-light-secondary-container dark:bg-dark-secondary-container opacity-0`
   ],
 
   [
@@ -156,7 +156,8 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-tabs--vertical$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tabs--vertical'] ??
-      `!block h-full [&_.q-tabs\\_\\_content]:(!block h-full) [&_.q-tabs\\_\\_arrow]:(w-full h-[36px] text-center) [&_.q-tabs\\_\\_arrow--left]:(top-[0] left-[0] right-[0]) [&_.q-tabs\\_\\_arrow--right]:(left-[0] right-[0] bottom-[0]) [&_.q-tab]:(px-[8px] py-[0]) [&_.q-tab\\_\\_indicator]:(h-[unset] w-[2px]) [&.q-tabs--not-scrollable_.q-tabs\\_\\_content]:(h-full) [&.q-tabs--dense_.q-tab\\_\\_content]:(min-w-[24px])`
+      `!block h-full [&_.q-tabs\\_\\_content]:(!block h-full) [&_.q-tabs\\_\\_arrow]:(w-full h-[36px] text-center) [&_.q-tabs\\_\\_arrow--left]:(top-[0] left-[0] right-[0]) [&_.q-tabs\\_\\_arrow--right]:(left-[0] right-[0] bottom-[0]) [&_.q-tab]:(px-[8px] py-[0]) 
+      [&.q-tabs--not-scrollable_.q-tabs\\_\\_content]:(h-full) [&.q-tabs--dense_.q-tab\\_\\_content]:(min-w-[24px])`
   ],
 
   [

package/src/styles/md3/components/QToggle.unocss.ts

@@ -63,9 +63,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
       `[&_.q-toggle\\_\\_track]:(bg-light-primary dark:bg-dark-primary) 
       [&_.q-toggle\\_\\_thumb]:(text-light-on-primary-container dark:text-light-on-primary-container left-[0.95em] top-[0.0625em] w-[0.875em] h-[0.875em])
       [&_.q-toggle\\_\\_thumb:after]:(layer-components:!bg-light-on-primary dark:!bg-dark-on-primary)
-      [&_.q-toggle\\_\\_thumb_.q-icon]:(layer-components:text-[#fff] opacity-100)
-      [&:not(.disabled):focus_.q-toggle\\_\\_thumb:before]:(scale-200)
-      [&:not(.disabled):hover_.q-toggle\\_\\_thumb:before]:(scale-200)`
+      [&_.q-toggle\\_\\_thumb_.q-icon]:(layer-components:text-[#fff] opacity-100)`
   ],
 
   [

package/src/styles/md3/components/QToolbar.unocss.ts

@@ -17,7 +17,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-toolbar__title$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-toolbar__title'] ??
-      `flex-1 min-w-[1px] max-w-full text-[21px] font-normal tracking-[0.01em] px-[12px] py-[0] [&:first-child]:(pl-0) [&:last-child]:(pr-0)`
+      `flex-initial min-w-[1px] max-w-full text-[21px] font-normal tracking-[0.01em] px-[12px] py-[0] [&:first-child]:(pl-0) [&:last-child]:(pr-0)`
   ]
 ]
 

package/src/styles/md3/index.ts

@@ -232,12 +232,16 @@ export const setDefaultProps = ({
   QBtn,
   QBtnDropdown,
   QInput,
-  QBtnToggle
+  QBtnToggle,
+  QSelect,
+  QField
 }: {
   QBtn: any
   QBtnDropdown: any
   QInput: any
   QBtnToggle: any
+  QSelect: any
+  QField: any
 }) => {
   QBtn.props.rounded = {
     type: QBtn.props.rounded,
@@ -255,6 +259,14 @@ export const setDefaultProps = ({
     type: QBtnToggle.props.rounded,
     default: true
   }
+  QSelect.props.filled = {
+    type: QSelect.props.filled,
+    default: true
+  }
+  QField.props.filled = {
+    type: QField.props.filled,
+    default: true
+  }
 }
 
 export default style

package/src/theme.ts

@@ -730,6 +730,7 @@ export interface QuasarTheme {
       'q-drawer__backdrop'?: string
       'q-drawer__opener'?: string
       'q-page'?: string
+      'q-page-sticky'?: string
       'q-page-sticky--shrink'?: string
       'q-body--layout-animate'?: string
       'q-body--drawer-toggle'?: string