unocss-preset-quasar 0.1.5 → 0.1.6

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, QSelect, QField }) => {
+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, QSelec
         type: QBtnDropdown.props.rounded,
         default: true
     };
+    QBtnGroup.props.rounded = {
+        type: QBtnGroup.props.rounded,
+        default: true
+    };
     QInput.props.filled = {
         type: QInput.props.filled,
         default: true
@@ -105,5 +109,9 @@ export const setDefaultProps = ({ QBtn, QBtnDropdown, QInput, QBtnToggle, QSelec
         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,11 +1,13 @@
 import { QuasarStyle } from '../index.js';
 declare const style: QuasarStyle;
-export declare const setDefaultProps: ({ QBtn, QBtnDropdown, QInput, QBtnToggle, QSelect, QField }: {
+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;
@@ -888,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.5",
+  "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/index.ts

@@ -3,6 +3,7 @@ import {
   type Preset,
   presetIcons,
   presetWebFonts,
+  transformerDirectives,
   transformerVariantGroup
 } from 'unocss'
 import presetWind3 from '@unocss/preset-wind3'
@@ -155,6 +156,20 @@ const QSliderSafelist = [
   'q-slider--dense'
 ]
 
+const QChipSafelist = [
+  'q-chip',
+  'q-chip--colored',
+  'q-chip--dark',
+  'q-chip--outline',
+  'q-chip--selected',
+  'q-chip__icon',
+  'q-chip__icon--left',
+  'q-chip__icon--right',
+  'q-chip__icon--remove',
+  'q-chip__content',
+  'q-chip--dense',
+  'q-chip--square'
+]
 const componentsSafelistMap: Partial<Record<keyof QuasarComponents, string[]>> =
   {
     QIcon: ['q-icon'],
@@ -171,6 +186,7 @@ const componentsSafelistMap: Partial<Record<keyof QuasarComponents, string[]>> =
     ],
     QBanner: [
       'q-banner',
+      'q-banner__content',
       'q-banner--top-padding',
       'q-banner__avatar',
       'q-banner__actions',
@@ -291,20 +307,7 @@ const componentsSafelistMap: Partial<Record<keyof QuasarComponents, string[]>> =
       'q-checkbox--dark',
       'q-checkbox--dense'
     ],
-    QChip: [
-      'q-chip',
-      'q-chip--colored',
-      'q-chip--dark',
-      'q-chip--outline',
-      'q-chip--selected',
-      'q-chip__icon',
-      'q-chip__icon--left',
-      'q-chip__icon--right',
-      'q-chip__icon--remove',
-      'q-chip__content',
-      'q-chip--dense',
-      'q-chip--square'
-    ],
+    QChip: QChipSafelist,
     QCircularProgress: [
       'q-circular-progress',
       'q-circular-progress__svg',
@@ -647,9 +650,11 @@ const componentsSafelistMap: Partial<Record<keyof QuasarComponents, string[]>> =
       'q-scrollarea__bar--invisible',
       'q-scrollarea__thumb--invisible',
       'q-scrollarea__content',
-      'q-scrollarea--dark'
+      'q-scrollarea--dark',
+      'relative-position'
     ],
     QSelect: [
+      ...QChipSafelist,
       'q-list',
       'q-item',
       'q-virtual-scroll',
@@ -712,6 +717,7 @@ const componentsSafelistMap: Partial<Record<keyof QuasarComponents, string[]>> =
     ],
     QStepper: [
       'q-stepper',
+      'q-stepper__label',
       'q-stepper__title',
       'q-stepper__caption',
       'q-stepper__dot',
@@ -733,7 +739,8 @@ const componentsSafelistMap: Partial<Record<keyof QuasarComponents, string[]>> =
       'q-stepper--flat',
       'q-stepper--bordered',
       'q-stepper--horizontal',
-      'q-stepper--vertical'
+      'q-stepper--vertical',
+      'col-grow'
     ],
     QTabPanels: ['q-tab-panels', 'q-tab-panel'],
     QMarkupTable: ['q-markup-table'],
@@ -1040,7 +1047,12 @@ const pluginSafelistMap: Partial<Record<keyof QuasarPlugins, string[]>> = {
     'q-loading-bar--right',
     'q-loading-bar--left'
   ],
-
+  Loading: [
+    'q-loading',
+    'q-loading__backdrop',
+    'q-loading__box',
+    'q-loading__message'
+  ],
   Notify: [
     'q-avatar',
     'q-avatar__content',
@@ -1663,7 +1675,8 @@ export const QuasarPreset = definePreset((options: QuasarPresetOptions) => {
         }
       ],
       transformers: [
-        transformerVariantGroup()
+        transformerVariantGroup(),
+        transformerDirectives()
         // {
         //   name: 'find-classes-in-quasar-src',
         //   enforce: 'pre', // enforce before other transformers

package/src/styles/md2/components/QBanner.unocss.ts

@@ -18,6 +18,13 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
       `!flex-initial !min-w-[1px] [&_>_.q-avatar]:(text-[46px]) [&_>_.q-icon]:(text-[40px]) [&:not(:empty)_+_.q-banner\\_\\_content]:(pl-[16px])`
   ],
 
+  [
+    /^q-banner__content$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-banner__content'] ??
+      `max-w-[calc(100%-56px)]`
+  ],
+
   [
     /^q-banner__actions$/,
     ([, c], { theme }) =>

package/src/styles/md2/components/QCheckbox.unocss.ts

@@ -68,7 +68,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-checkbox__inner$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-checkbox__inner'] ??
-      `text-[40px] w-[1em] min-w-[1em] h-[1em] outline-[0] rounded-[50%] layer-components:text-[rgba(0,_0,_0,_0.54)]`
+      `mr-2px text-[40px] w-[1em] min-w-[1em] h-[1em] outline-[0] rounded-[50%] layer-components:text-[rgba(0,_0,_0,_0.54)]`
   ],
 
   [

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

@@ -14,14 +14,14 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^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]`
   ],
 
   [

package/src/styles/md2/components/QScrollarea.unocss.ts

@@ -2,7 +2,7 @@ import type { Rule, UserShortcuts } from '@unocss/core'
 import type { QuasarTheme } from '../../../theme.js'
 
 const shortcuts: UserShortcuts<QuasarTheme> = [
-  [/^q-scrollarea$/, ([, c], { theme }) => `relative`],
+  [/^q-scrollarea$/, ([, c], { theme }) => `relative [contain:strict]`],
 
   [
     /^q-scrollarea__bar$/,
@@ -44,10 +44,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
 
   [/^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$/,

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

@@ -6,13 +6,15 @@ 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])
+      `
   ],
 
   [
     /^q-tab--full$/,
     ([, c], { theme }) =>
-      theme.quasar?.components?.['q-tab--full'] ?? `min-h-[72px]`
+      theme.quasar?.components?.['q-tab--full'] ?? `min-h-72px h-72px`
   ],
 
   [
@@ -25,7 +27,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 +69,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-tab__indicator$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-tab__indicator'] ??
-      `!relative opacity-0 h-[2px] bg-current`
+      `opacity-0 h-[2px] bg-current`
   ],
 
   [
@@ -156,7 +158,14 @@ 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-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])`
   ],
 
   [

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

@@ -6,7 +6,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-banner$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-banner'] ??
-      `min-h-[54px] px-[16px] py-[8px] bg-[#fff]`
+      `min-h-[54px] px-[16px] py-[8px] bg-transparent`
   ],
 
   [/^q-banner--top-padding$/, ([, c], { theme }) => `pt-[14px]`],
@@ -15,7 +15,14 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-banner__avatar$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-banner__avatar'] ??
-      `!flex-initial !min-w-[1px] [&_>_.q-avatar]:(text-[46px]) [&_>_.q-icon]:(text-[40px]) [&:not(:empty)_+_.q-banner\\_\\_content]:(pl-[16px])`
+      `!self-auto !flex-initial !min-w-[1px] [&_>_.q-avatar]:(text-[46px]) [&_>_.q-icon]:(text-[40px]) [&:not(:empty)_+_.q-banner\\_\\_content]:(pl-[16px])`
+  ],
+
+  [
+    /^q-banner__content$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-banner__content'] ??
+      `max-w-[calc(100%-56px)]`
   ],
 
   [

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

@@ -24,7 +24,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-btn--outline'] ??
       `!bg-transparent layer-components:text-light-primary layer-components:dark:text-dark-primary
-       [&:before]:(border-[1px] border-solid border-[currentColor] [box-shadow:none]]) 
+       [&:before]:(shadow-none border-[1px] border-solid border-[currentColor]) 
        [&_.q-btn\\_\\_progress-indicator]:(opacity-20 bg-current)`
   ],
 

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

@@ -12,6 +12,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
       rounded-[3px] 
       [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)] 
       align-middle 
+      [&_>_.q-btn]:(layer-components:bg-light-surface-container layer-components:dark:bg-dark-surface-container) 
       [&_>_.q-btn-item]:(text-light-on-surface dark:text-dark-on-surface self-stretch) 
       [&_>_.q-btn-item.bg-primary]:(!bg-light-primary !text-light-on-primary dark:!bg-dark-primary dark:!text-dark-on-primary)
       [&_>_.q-btn-item:before]:([box-shadow:none]) 

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'] ??
-      `p-16px rounded-[12px] align-top bg-[#fff] relative bg-light-surface-container dark:bg-dark-surface-container
+      `p-16px rounded-[12px] align-top relative bg-light-surface-container-low dark:bg-dark-surface-container-low
       [&_>_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])
@@ -20,6 +20,13 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
       [&.disabled]:(op-38)`
   ],
 
+  [
+    /^q-card--filled$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-card--filled'] ??
+      `bg-light-surface-container-highest dark:bg-dark-surface-container-highest`
+  ],
+
   [
     /^q-card--bordered$/,
     ([, c], { theme }) =>

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

@@ -15,17 +15,23 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-checkbox'] ??
       `align-middle [&.disabled]:(!opacity-75)
-      [&:not(.disabled):hover_.q-checkbox\\_\\_inner:before]:(content-[''] absolute top-[12.5%] left-[12.5%] bottom-0 right-0 border-rd-50 bg-current op-12 scale-x-120 scale-y-120 scale-z-100)
+      [&:not(.disabled):hover_.q-checkbox\\_\\_inner:before]:(content-[''] absolute top-0 left-0 bottom-0 right-0 border-rd-50 bg-current op-12 scale-x-120 scale-y-120 scale-z-100)
       [&:not(.disabled):focus_.q-checkbox\\_\\_inner:before]:(scale-z-100)`
   ],
 
   [/^q-checkbox__native$/, ([, c], { theme }) => `w-px h-px`],
 
+  [
+    /^q-checkbox__label$/,
+    ([, c], { theme }) =>
+      theme.quasar?.components?.['q-checkbox__label'] ?? `pl-0.25em`
+  ],
+
   [
     /^q-checkbox__bg$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-checkbox__bg'] ??
-      `select-none top-1/4 left-1/4 w-1/2 h-1/2 border-[2px] border-solid border-[currentColor] rounded-[2px] [transition:background_0.22s_cubic-bezier(0,_0,_0.2,_1)_0ms]`
+      `ml--2px mt--2px select-none top-1/4 left-1/4 w-1/2 h-1/2 border-[2px] border-solid border-[currentColor] rounded-[2px] [transition:background_0.22s_cubic-bezier(0,_0,_0.2,_1)_0ms]`
   ],
 
   [/^q-checkbox__icon-container$/, ([, c], { theme }) => `select-none`],
@@ -52,7 +58,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-checkbox__inner$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-checkbox__inner'] ??
-      `text-[40px] w-[1em] min-w-[1em] h-[1em] outline-[0] rounded-[50%] layer-components:text-[rgba(0,_0,_0,_0.54)]`
+      `mr-2px text-[40px] w-[1em] min-w-[1em] h-[1em] outline-[0] rounded-[50%] layer-components:text-[rgba(0,_0,_0,_0.54)]`
   ],
 
   [

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

@@ -20,8 +20,9 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-chip'] ??
       `!flex-initial align-middle rounded-[0.5em] outline-[0] relative h-[2em] max-w-full m-[4px] 
-      bg-light-surface-container dark:bg-dark-surface-container
-      text-light-on-surface dark:text-dark-on-surface
+      outline-solid outline-1px outline-light-outline-variant dark:outline-dark-outline-variant
+      bg-light-surface-container-low dark:bg-dark-secondary-container
+      text-light-on-surface-variant dark:text-dark-on-secondary-container
       text-[14px] px-[1em] py-[0.375em] 
       [&_.q-avatar]:(text-[2em] -ml-[0.45em] mr-[0.2em] rounded-[16px])`
   ],
@@ -97,7 +98,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-chip--square$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-chip--square'] ??
-      `rounded-[4px] [&_.q-avatar]:(rounded-tl-[3px] rounded-br-[0] rounded-tr-[0] rounded-bl-[3px])`
+      `rounded-[8px] [&_.q-avatar]:(rounded-tl-[3px] rounded-br-[0] rounded-tr-[0] rounded-bl-[3px])`
   ]
 ]
 

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-light-surface-container-low dark:bg-dark-surface-container-low z-${theme.quasar.z['side']}`
+      `border-rd-16px absolute top-[0] bottom-[0] bg-light-surface-container-low dark:bg-dark-surface-container-low z-${theme.quasar.z['side']}`
   ],
 
   [
@@ -97,9 +97,10 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
       [&_>_.q-scrollarea]:(px-0)
       [&_>_.q-list]:(px-12px)
       [&_.q-list_.q-item]:(border-rd-32px)
+      [&_.q-list_.q-item:hover]:(bg-light-on-secondary-container/8 dark:bg-dark-on-secondary-container/8)
       [&_.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
-      )`
+      [&_.q-list_.q-router-link--active]:(bg-light-secondary-container dark:bg-dark-secondary-container)
+      `
   ]
 ]
 

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

@@ -285,27 +285,28 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^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)`
   ],
 

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

@@ -7,21 +7,21 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-item'] ??
       `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)`
+    [&.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]`
   ],
 
   [
@@ -113,7 +113,9 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^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)])`
   ],
 
   [
@@ -123,7 +125,10 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
       `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/src/styles/md3/components/QScrollarea.unocss.ts

@@ -2,7 +2,7 @@ import type { Rule, UserShortcuts } from '@unocss/core'
 import type { QuasarTheme } from '../../../theme.js'
 
 const shortcuts: UserShortcuts<QuasarTheme> = [
-  [/^q-scrollarea$/, ([, c], { theme }) => `relative`],
+  [/^q-scrollarea$/, ([, c], { theme }) => `relative [contain:strict]`],
 
   [
     /^q-scrollarea__bar$/,
@@ -44,10 +44,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
 
   [/^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$/,