unocss-preset-quasar 0.1.4 → 0.1.6

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$/,
@@ -229,27 +229,28 @@ const shortcuts = [
     [
         /^q-field--standout$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-field--standout'] ??
-            `[&_.q-field\\_\\_control]:(px-[12px] py-[0] layer-components:bg-black/5 rounded-[4px] [transition:box-shadow_0.36s_cubic-bezier(0.4,_0,_0.2,_1),_background-color_0.36s_cubic-bezier(0.4,_0,_0.2,_1)]) 
+            `[&_.q-field\\_\\_control]:(px-[12px] py-[0] layer-components:bg-light-surface-container-high
+       rounded-[4px] [transition:box-shadow_0.36s_cubic-bezier(0.4,_0,_0.2,_1),_background-color_0.36s_cubic-bezier(0.4,_0,_0.2,_1)]) 
 	[&_.q-field\\_\\_control:before]:(layer-components:bg-black/7 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--rounded_.q-field\\_\\_control]:(rounded-[28px]) 
-	[&.q-field--highlighted_.q-field\\_\\_control]:([box-shadow:0_1px_5px_rgba(0,_0,_0,_0.2),_0_2px_2px_rgba(0,_0,_0,_0.14),_0_3px_1px_-2px_rgba(0,_0,_0,_0.12)] layer-components:bg-white) 
-	[&.q-field--highlighted_.q-field\\_\\_native]:(text-white) 
-	[&.q-field--highlighted_.q-field\\_\\_prefix]:(text-white) 
-	[&.q-field--highlighted_.q-field\\_\\_suffix]:(text-white) 
-	[&.q-field--highlighted_.q-field\\_\\_prepend]:(text-white) 
-	[&.q-field--highlighted_.q-field\\_\\_append]:(text-white) 
-	[&.q-field--highlighted_.q-field\\_\\_input]:(text-white) 
+	[&.q-field--highlighted_.q-field\\_\\_control]:([box-shadow:0_1px_5px_rgba(0,_0,_0,_0.2),_0_2px_2px_rgba(0,_0,_0,_0.14),_0_3px_1px_-2px_rgba(0,_0,_0,_0.12)]) 
+	[&.q-field--highlighted_.q-field\\_\\_native]:(text-light-primary) 
+	[&.q-field--highlighted_.q-field\\_\\_prefix]:(text-light-primary) 
+	[&.q-field--highlighted_.q-field\\_\\_suffix]:(text-light-primary) 
+	[&.q-field--highlighted_.q-field\\_\\_prepend]:(text-light-primary) 
+	[&.q-field--highlighted_.q-field\\_\\_append]:(text-light-primary) 
+	[&.q-field--highlighted_.q-field\\_\\_input]:(text-light-on-surface) 
 	[&.q-field--readonly_.q-field\\_\\_control:before]:(opacity-100 bg-transparent border-[1px] border-dashed border-black/24) 
-	[&.q-field--dark_.q-field\\_\\_control]:(bg-[rgba(255,_255,_255,_0.07)]) 
+	[&.q-field--dark_.q-field\\_\\_control]:(bg-dark-surface-container-high) 
 	[&.q-field--dark_.q-field\\_\\_control:before]:(layer-components:bg-white/7) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_control]:(layer-components:bg-white) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_native]:(text-black) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_prefix]:(text-black) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_suffix]:(text-black) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_prepend]:(text-black) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_append]:(text-black) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_input]:(text-black) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_control]:(layer-components:bg-dark-surface-container-highest) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_native]:(text-dark-primary) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_prefix]:(text-dark-primary) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_suffix]:(text-dark-primary) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_prepend]:(text-dark-primary) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_append]:(text-dark-primary) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_input]:(!text-dark-on-surface) 
 	[&.q-field--dark.q-field--readonly_.q-field\\_\\_control:before]:(border-white/24)`
     ],
     [
@@ -273,7 +274,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,18 +2,18 @@ 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
-    [&.q-router-link--active]:(text-primary)`
+            `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-light-primary dark:text-dark-primary)`
     ],
     [
         /^q-item__section--side$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-item__section--side'] ??
-            `!flex-initial text-[#757575] items-start pr-[16px] w-auto min-w-[0] max-w-full [&_>_.q-icon]:(text-[24px]) [&_>_.q-avatar]:(text-[40px])`
+            `!flex-initial text-[#757575] items-start pr-[16px] w-auto max-w-full [&_>_.q-icon]:(text-[24px]) [&_>_.q-avatar]:(text-[40px])`
     ],
     [
         /^q-item__section--avatar$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-item__section--avatar'] ??
-            `!flex-initial [color:inherit] min-w-[56px]`
+            `!flex-initial [color:inherit] min-w-[40px]`
     ],
     [
         /^q-item__section--thumbnail$/,
@@ -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,19 +73,24 @@ 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'] ??
-            `text-[#fff] border-[rgba(255,_255,_255,_0.28)] [&_.q-item\\_\\_section--side:not(.q-item\\_\\_section--avatar)]:(text-[rgba(255,_255,_255,_0.7)]) [&_.q-item\\_\\_label--header]:(text-[rgba(255,_255,_255,_0.64)]) [&_.q-item\\_\\_label--overline]:(text-[rgba(255,_255,_255,_0.8)]) [&_.q-item\\_\\_label--caption]:(text-[rgba(255,_255,_255,_0.8)])`
+            `text-[#fff] border-[rgba(255,_255,_255,_0.28)] 
+      [&_.q-item\\_\\_section--side:not(.q-item\\_\\_section--avatar)]:(text-[rgba(255,_255,_255,_0.7)]) 
+      [&_.q-item\\_\\_label--header]:(text-[rgba(255,_255,_255,_0.64)]) [&_.q-item\\_\\_label--overline]:(text-[rgba(255,_255,_255,_0.8)]) [&_.q-item\\_\\_label--caption]:(text-[rgba(255,_255,_255,_0.8)])`
     ],
     [
         /^q-item--dark$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-item--dark'] ??
             `text-[#fff] border-[rgba(255,_255,_255,_0.28)] [&_.q-item\\_\\_section--side:not(.q-item\\_\\_section--avatar)]:(text-[rgba(255,_255,_255,_0.7)]) [&_.q-item\\_\\_label--header]:(text-[rgba(255,_255,_255,_0.64)]) [&_.q-item\\_\\_label--overline]:(text-[rgba(255,_255,_255,_0.8)]) [&_.q-item\\_\\_label--caption]:(text-[rgba(255,_255,_255,_0.8)])`
     ],
-    [/^q-item--active$/, ([, c], { theme }) => `text-primary`]
+    [
+        /^q-item--active$/,
+        ([, c], { theme }) => `text-light-primary dark:text-dark-primary`
+    ]
 ];
 export { shortcuts };

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/QScrollarea.unocss.js

@@ -1,5 +1,5 @@
 const shortcuts = [
-    [/^q-scrollarea$/, ([, c], { theme }) => `relative`],
+    [/^q-scrollarea$/, ([, c], { theme }) => `relative [contain:strict]`],
     [
         /^q-scrollarea__bar$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-scrollarea__bar'] ??
@@ -26,10 +26,7 @@ const shortcuts = [
     ],
     [/^q-scrollarea__thumb:hover$/, ([, c], { theme }) => `hover:opacity-30`],
     [/^q-scrollarea__thumb:active$/, ([, c], { theme }) => `active:opacity-50`],
-    [
-        /^q-scrollarea__content$/,
-        ([, c], { theme }) => `!relative min-h-full min-w-full`
-    ],
+    [/^q-scrollarea__content$/, ([, c], { theme }) => `min-h-full w-full`],
     [
         /^q-scrollarea--dark$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-scrollarea--dark'] ??

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

@@ -2,7 +2,14 @@ const shortcuts = [
     [
         /^q-stepper$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-stepper'] ??
-            `[box-shadow:0_1px_5px_rgba(0,_0,_0,_0.2),_0_2px_2px_rgba(0,_0,_0,_0.14),_0_3px_1px_-2px_rgba(0,_0,_0,_0.12)] rounded-[4px] bg-[#fff]`
+            `[box-shadow:0_1px_5px_rgba(0,_0,_0,_0.2),_0_2px_2px_rgba(0,_0,_0,_0.14),_0_3px_1px_-2px_rgba(0,_0,_0,_0.12)] rounded-[4px]
+      bg-light-surface dark:bg-dark-surface
+      `
+    ],
+    [
+        /^q-stepper__label$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-stepper__label'] ??
+            `bg-light-surface dark:bg-dark-surface`
     ],
     [
         /^q-stepper__title$/,
@@ -27,7 +34,16 @@ const shortcuts = [
     [
         /^q-stepper--dark$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-stepper--dark'] ??
-            `[box-shadow:0_1px_5px_rgba(255,_255,_255,_0.2),_0_2px_2px_rgba(255,_255,_255,_0.14),_0_3px_1px_-2px_rgba(255,_255,_255,_0.12)] [&_.q-stepper\\_\\_dot_span]:(text-[#000]) [&.q-stepper--bordered]:(border-[rgba(255,_255,_255,_0.28)]) [&_.q-stepper\\_\\_header--border]:(border-[rgba(255,_255,_255,_0.28)]) [&.q-stepper--horizontal_.q-stepper\\_\\_line:before]:(bg-[rgba(255,_255,_255,_0.28)]) [&.q-stepper--horizontal_.q-stepper\\_\\_line:after]:(bg-[rgba(255,_255,_255,_0.28)]) [&.q-stepper--vertical_.q-stepper\\_\\_dot:before]:(bg-[rgba(255,_255,_255,_0.28)]) [&.q-stepper--vertical_.q-stepper\\_\\_dot:after]:(bg-[rgba(255,_255,_255,_0.28)]) [&_.q-stepper\\_\\_tab--disabled]:(text-[rgba(255,_255,_255,_0.28)]) [&_.q-stepper\\_\\_tab--disabled_.q-stepper\\_\\_dot]:(bg-[rgba(255,_255,_255,_0.28)]) [&_.q-stepper\\_\\_tab--disabled_.q-stepper\\_\\_label]:(text-[rgba(255,_255,_255,_0.54)])`
+            `[box-shadow:0_1px_5px_rgba(255,_255,_255,_0.2),_0_2px_2px_rgba(255,_255,_255,_0.14),_0_3px_1px_-2px_rgba(255,_255,_255,_0.12)] 
+      [&_.q-stepper\\_\\_dot_span]:(text-[#000]) [&.q-stepper--bordered]:(border-[rgba(255,_255,_255,_0.28)]) 
+      [&_.q-stepper\\_\\_header--border]:(border-[rgba(255,_255,_255,_0.28)]) 
+      [&.q-stepper--horizontal_.q-stepper\\_\\_line:before]:(bg-[rgba(255,_255,_255,_0.28)])
+      [&.q-stepper--horizontal_.q-stepper\\_\\_line:after]:(bg-[rgba(255,_255,_255,_0.28)]) 
+      [&.q-stepper--vertical_.q-stepper\\_\\_dot:before]:(bg-[rgba(255,_255,_255,_0.28)]) 
+      [&.q-stepper--vertical_.q-stepper\\_\\_dot:after]:(bg-[rgba(255,_255,_255,_0.28)]) 
+      [&_.q-stepper\\_\\_tab--disabled]:(text-[rgba(255,_255,_255,_0.28)]) 
+      [&_.q-stepper\\_\\_tab--disabled_.q-stepper\\_\\_dot]:(bg-[rgba(255,_255,_255,_0.28)]) 
+      [&_.q-stepper\\_\\_tab--disabled_.q-stepper\\_\\_label]:(text-[rgba(255,_255,_255,_0.54)])`
     ],
     [
         /^q-stepper__tab--navigation$/,
@@ -37,7 +53,8 @@ const shortcuts = [
     [
         /^q-stepper__tab--active$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-stepper__tab--active'] ??
-            ` [&_.q-stepper\\_\\_dot]:([text-shadow:0_0_0_currentColor]) [&_.q-stepper\\_\\_label]:([text-shadow:0_0_0_currentColor])`
+            `text-light-primary dark:text-dark-primary [&_.q-stepper\\_\\_dot]:([text-shadow:0_0_0_currentColor]) 
+      [&_.q-stepper\\_\\_label]:([text-shadow:0_0_0_currentColor])`
     ],
     [
         /^q-stepper__tab--done$/,
@@ -107,7 +124,16 @@ __.q-stepper\\_\\_tab:last-child]:(items-end) [&_.q-stepper\\_\\_tab]:(px-[0] py
     [
         /^q-stepper--horizontal$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-stepper--horizontal'] ??
-            `[&_.q-stepper\\_\\_step-inner]:(p-[24px]) [&_.q-stepper\\_\\_tab:first-child]:([border-top-left-radius:inherit]) [&_.q-stepper\\_\\_tab:last-child]:([border-top-right-radius:inherit]) [&_.q-stepper\\_\\_tab:first-child_.q-stepper\\_\\_dot:before]:(hidden) [&_.q-stepper\\_\\_tab:last-child_.q-stepper\\_\\_label:after]:(hidden) [&_.q-stepper\\_\\_tab:last-child_.q-stepper\\_\\_dot:after]:(hidden) [&_.q-stepper\\_\\_tab]:(overflow-hidden) [&_.q-stepper\\_\\_line]:(contain-layout) [&_.q-stepper\\_\\_line:before]:(absolute top-2/4 h-px w-screen bg-[rgba(0,_0,_0,_0.12)]) [&_.q-stepper\\_\\_line:after]:(absolute top-2/4 h-px w-screen bg-[rgba(0,_0,_0,_0.12)]) [&_.q-stepper\\_\\_label:after]:(content-[''] left-full ml-[8px]) [&_.q-stepper\\_\\_dot:after]:(content-[''] left-full ml-[8px]) [&_.q-stepper\\_\\_dot:before]:(content-[''] right-full mr-[8px]) [&_>_.q-stepper\\_\\_nav]:(pt-[0] px-[24px] pb-[24px])`
+            `[&_.q-stepper\\_\\_step-inner]:(p-[24px]) 
+      [&_.q-stepper\\_\\_tab:first-child]:([border-top-left-radius:inherit]) 
+      [&_.q-stepper\\_\\_tab:last-child]:([border-top-right-radius:inherit]) 
+      [&_.q-stepper\\_\\_tab:first-child_.q-stepper\\_\\_dot:before]:(hidden) 
+      [&_.q-stepper\\_\\_tab:last-child_.q-stepper\\_\\_label:after]:(hidden) 
+      [&_.q-stepper\\_\\_tab:last-child_.q-stepper\\_\\_dot:after]:(hidden) 
+      [&_.q-stepper\\_\\_tab]:(overflow-hidden) 
+      [&_.q-stepper\\_\\_line]:(contain-layout) 
+      [&_.q-stepper\\_\\_line:before]:(absolute top-2/4 h-px w-screen bg-[rgba(0,_0,_0,_0.12)]) 
+      [&_.q-stepper\\_\\_line:after]:(absolute top-2/4 h-px w-screen bg-[rgba(0,_0,_0,_0.12)]) [&_.q-stepper\\_\\_label:after]:(content-[''] left-full ml-[8px]) [&_.q-stepper\\_\\_dot:after]:(content-[''] left-full ml-[8px]) [&_.q-stepper\\_\\_dot:before]:(content-[''] right-full mr-[8px]) [&_>_.q-stepper\\_\\_nav]:(pt-[0] px-[24px] pb-[24px])`
     ],
     [
         /^q-stepper--vertical$/,

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

@@ -2,11 +2,14 @@ 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-focus-helper]:(!absolute !h-32px !w-52px !top-[calc(50%-23px)] !left-[calc(50%-26px)] !border-rd-16px)
+      `
     ],
     [
         /^q-tab--full$/,
-        ([, c], { theme }) => theme.quasar?.components?.['q-tab--full'] ?? `min-h-[72px]`
+        ([, c], { theme }) => theme.quasar?.components?.['q-tab--full'] ?? `min-h-72px h-72px`
     ],
     [
         /^q-tab--no-caps$/,
@@ -15,7 +18,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,12 +48,12 @@ const shortcuts = [
     [
         /^q-tab__indicator$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tab__indicator'] ??
-            `!relative opacity-0 h-[2px] bg-current`
+            `opacity-0 h-[2px] bg-current`
     ],
     [
         /^q-tab--active$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tab--active'] ??
-            `[&_.q-tab\\_\\_indicator]:(opacity-100 origin-left)`
+            `text-light-primary dark:text-dark-primary [&_.q-tab\\_\\_indicator]:(opacity-100 origin-left)`
     ],
     [
         /^q-tab--inactive$/,
@@ -108,7 +111,14 @@ 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-tab\\_\\_indicator]:(h-[unset] w-2px min-h-100%)
+      [&_.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, QBtnGroup, QInput, QBtnToggle, QSelect, QField, QChip }) => {
     QBtn.props.rounded = {
         type: QBtn.props.rounded,
         default: true
@@ -89,6 +89,10 @@ export const setDefaultProps = ({ QBtn, QBtnDropdown, QInput, QBtnToggle }) => {
         type: QBtnDropdown.props.rounded,
         default: true
     };
+    QBtnGroup.props.rounded = {
+        type: QBtnGroup.props.rounded,
+        default: true
+    };
     QInput.props.filled = {
         type: QInput.props.filled,
         default: true
@@ -97,5 +101,17 @@ 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
+    };
+    QChip.props.square = {
+        type: QChip.props.square,
+        default: true
+    };
 };
 export default style;

package/dist/theme.js

@@ -494,7 +494,7 @@ export const generateTheme = (sourceColor) => {
             primary: hexFromArgb(materialTheme.schemes.light.primary),
             secondary: hexFromArgb(materialTheme.schemes.light.secondary),
             accent: hexFromArgb(materialTheme.schemes.light.tertiary),
-            'dark-page': hexFromArgb(materialTheme.palettes.neutral.tone(6))
+            'dark-page': hexFromArgb(materialTheme.schemes.dark.surface)
         }
     };
 };

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

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

package/dist/types/theme.d.ts

@@ -365,6 +365,7 @@ export interface QuasarTheme {
             'q-badge--outline'?: string;
             'q-badge--rounded'?: string;
             'q-banner'?: string;
+            'q-banner__content'?: string;
             'q-banner--top-padding'?: string;
             'q-banner__avatar'?: string;
             'q-banner__actions'?: string;
@@ -411,6 +412,7 @@ export interface QuasarTheme {
             'q-btn-group--spread'?: string;
             'q-btn-toggle'?: string;
             'q-card'?: string;
+            'q-card--filled'?: string;
             'q-card--bordered'?: string;
             'q-card--dark'?: string;
             'q-card__section'?: string;
@@ -456,6 +458,7 @@ export interface QuasarTheme {
             'q-message-text-content--sent'?: string;
             'q-message-text'?: string;
             'q-checkbox'?: string;
+            'q-checkbox__label'?: string;
             'q-checkbox__native'?: string;
             'q-checkbox__bg'?: string;
             'q-checkbox__icon-container'?: string;
@@ -712,6 +715,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;
@@ -887,6 +891,7 @@ export interface QuasarTheme {
             'q-splitter__before'?: string;
             'q-splitter__after'?: string;
             'q-stepper'?: string;
+            'q-stepper__label'?: string;
             'q-stepper__title'?: string;
             'q-stepper__caption'?: string;
             'q-stepper__dot'?: string;

package/package.json

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

package/src/core/dark.unocss.ts

@@ -12,7 +12,10 @@ body.body--dark {
 ]
 
 const shortcuts: UserShortcuts<QuasarTheme> = [
-  [/^q-dark$/, ([, c], { theme }) => `text-white bg-dark`]
+  [
+    /^q-dark$/,
+    ([, c], { theme }) => `dark:text-dark-on-surface bg-dark-surface`
+  ]
 ]
 
 export { preflights, shortcuts }

package/src/core/flex.unocss.ts

@@ -13,6 +13,8 @@ const colGutter = {
   xl: 12
 } as const
 
+const sizes = ['none', 'xs', 'sm', 'md', 'lg', 'xl']
+
 const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^row$/,
@@ -25,18 +27,26 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
       `flex flex-col flex-wrap flex-auto [&.reverse]:(flex-col-reverse)`
   ],
   [
-    /^col(?:-)?(none|xs|sm|md|lg|xl)?(?:-)?([2-9]|1[0-2]?)?$/,
+    /^col(?:-)?(none|xs|sm|md|lg|xl|all|auto|grow)?(?:-)?([2-9]|1[0-2]?)?$/,
     ([, size, nr], { theme }) => {
+      const classes = ['w-auto max-w-full']
       if (size && nr) {
-        return `${size}:basis-${nr}/12)`
+        classes.push(`${size}:basis-${nr}/12)`)
       } else if (nr) {
-        return `basis-${nr}/12`
-      } else if (size) {
-        return `${size}:basis-auto ${size}:grow`
+        classes.push(`basis-${nr}/12`)
+      } else if (size === 'all') {
+        classes.push('basis-12/12')
+      } else if (size === 'auto') {
+        classes.push('basis-auto')
+      } else if (sizes.includes(size)) {
+        classes.push(`${size}:basis-auto ${size}:grow`)
+      } else if (size === 'grow' || size === void 0) {
+        classes.push('grow')
       }
-      return `grow`
+      return classes.join(' ')
     }
   ],
+
   [
     /^q-col-gutter-(none|xs|sm|md|lg|xl)$/,
     ([, size], { theme }) =>

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%;