vitrify 0.17.12 → 0.17.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -51,7 +51,7 @@ const shortcuts = [
51
51
  [
52
52
  /^q-checkbox__inner$/,
53
53
  ([, c], { theme }) => theme.quasar?.components?.['q-checkbox__inner'] ??
54
- `text-[40px] w-[1em] min-w-[1em] h-[1em] outline-[0] rounded-[50%] layer-dismiss:text-[rgba(0,_0,_0,_0.54)]`
54
+ `text-[40px] w-[1em] min-w-[1em] h-[1em] outline-[0] rounded-[50%] layer-components:text-[rgba(0,_0,_0,_0.54)]`
55
55
  ],
56
56
  [
57
57
  /^q-checkbox__inner--truthy$/,
@@ -68,10 +68,10 @@ const shortcuts = [
68
68
  [
69
69
  /^q-checkbox--dark$/,
70
70
  ([, c], { theme }) => theme.quasar?.components?.['q-checkbox--dark'] ??
71
- `[&_.q-checkbox\\_\\_inner]:(layer-dismiss:text-[rgba(255,_255,_255,_0.7)])
71
+ `[&_.q-checkbox\\_\\_inner]:(layer-components:text-[rgba(255,_255,_255,_0.7)])
72
72
  [&_.q-checkbox\\_\\_inner:before]:(!opacity-[0.32])
73
- [&_.q-checkbox\\_\\_inner--truthy]:(layer-dismiss:text-primary)
74
- [&_.q-checkbox\\_\\_inner--indet]:(layer-dismiss:text-primary)`
73
+ [&_.q-checkbox\\_\\_inner--truthy]:(layer-components:text-primary)
74
+ [&_.q-checkbox\\_\\_inner--indet]:(layer-components:text-primary)`
75
75
  ],
76
76
  [
77
77
  /^q-checkbox--dense$/,
@@ -171,16 +171,16 @@ const shortcuts = [
171
171
  [
172
172
  /^q-field--filled$/,
173
173
  ([, c], { theme }) => theme.quasar?.components?.['q-field--filled'] ??
174
- `[&_.q-field\\_\\_control]:(px-[12px] py-[0] layer-dismiss:bg-black/5 rounded-tl-[4px] rounded-br-[0] rounded-tr-[4px] rounded-bl-[0])
175
- [&_.q-field\\_\\_control:before]:(layer-dismiss: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)])
174
+ `[&_.q-field\\_\\_control]:(px-[12px] py-[0] layer-components:bg-black/5 rounded-tl-[4px] rounded-br-[0] rounded-tr-[4px] rounded-bl-[0])
175
+ [&_.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)])
176
176
  [&_.q-field\\_\\_control:hover:before]:(opacity-100)
177
177
  [&_.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)])
178
178
  [&.q-field--rounded_.q-field\\_\\_control]:(rounded-tl-[28px] rounded-br-[0] rounded-tr-[28px] rounded-bl-[0])
179
- [&.q-field--highlighted_.q-field\\_\\_control:before]:(opacity-100 layer-dismiss:bg-black/12)
179
+ [&.q-field--highlighted_.q-field\\_\\_control:before]:(opacity-100 layer-components:bg-black/12)
180
180
  [&.q-field--highlighted_.q-field\\_\\_control:after]:([transform:scale3d(1,_1,_1)])
181
- [&.q-field--dark_.q-field\\_\\_control]:(layer-dismiss:bg-white/7)
182
- [&.q-field--dark_.q-field\\_\\_control:before]:(layer-dismiss:bg-white/7)
183
- [&.q-field--dark.q-field--highlighted_.q-field\\_\\_control:before]:(layer-dismiss:bg-white/1)
181
+ [&.q-field--dark_.q-field\\_\\_control]:(layer-components:bg-white/7)
182
+ [&.q-field--dark_.q-field\\_\\_control:before]:(layer-components:bg-white/7)
183
+ [&.q-field--dark.q-field--highlighted_.q-field\\_\\_control:before]:(layer-components:bg-white/1)
184
184
  [&.q-field--readonly_.q-field\\_\\_control:before]:(opacity-100 bg-transparent [border-bottom-style:dashed])`
185
185
  ],
186
186
  [
@@ -188,7 +188,7 @@ const shortcuts = [
188
188
  ([, c], { theme }) => theme.quasar?.components?.['q-field--outlined'] ??
189
189
  `[&_.q-field\\_\\_control]:(rounded-[4px] px-[12px] py-[0])
190
190
  [&_.q-field\\_\\_control:before]:(border-[1px] border-solid border-black/24 [transition:border-color_0.36s_cubic-bezier(0.4,_0,_0.2,_1)])
191
- [&_.q-field\\_\\_control:hover:before]:(layer-dismiss:border-black)
191
+ [&_.q-field\\_\\_control:hover:before]:(layer-components:border-black)
192
192
  [&_.q-field\\_\\_control:after]:([height:inherit] [border-radius:inherit] border-[2px] border-solid border-transparent [transition:border-color_0.36s_cubic-bezier(0.4,_0,_0.2,_1)])
193
193
  [&_.q-field\\_\\_native:-webkit-autofill]:(mt-px mb-px)
194
194
  [&_.q-field\\_\\_input:-webkit-autofill]:(mt-px mb-px)
@@ -201,7 +201,7 @@ const shortcuts = [
201
201
  /^q-field--standard$/,
202
202
  ([, c], { theme }) => theme.quasar?.components?.['q-field--standard'] ??
203
203
  `[&_.q-field\\_\\_control:before]:([border-bottom:1px_solid_rgba(0,_0,_0,_0.24)] [transition:border-color_0.36s_cubic-bezier(0.4,_0,_0.2,_1)])
204
- [&_.q-field\\_\\_control:hover:before]:(layer-dismiss:border-black)
204
+ [&_.q-field\\_\\_control:hover:before]:(layer-components:border-black)
205
205
  [&_.q-field\\_\\_control:after]:(h-[2px] top-auto [border-bottom-left-radius:inherit] [border-bottom-right-radius:inherit] origin-[center_bottom] [transform:scale3d(0,_1,_1)] bg-current [transition:transform_0.36s_cubic-bezier(0.4,_0,_0.2,_1)])
206
206
  [&.q-field--highlighted_.q-field\\_\\_control:after]:([transform:scale3d(1,_1,_1)])
207
207
  [&.q-field--readonly_.q-field\\_\\_control:before]:([border-bottom-style:dashed])
@@ -224,11 +224,11 @@ const shortcuts = [
224
224
  [
225
225
  /^q-field--standout$/,
226
226
  ([, c], { theme }) => theme.quasar?.components?.['q-field--standout'] ??
227
- `[&_.q-field\\_\\_control]:(px-[12px] py-[0] layer-dismiss: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)])
228
- [&_.q-field\\_\\_control:before]:(layer-dismiss: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)])
227
+ `[&_.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)])
228
+ [&_.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)])
229
229
  [&_.q-field\\_\\_control:hover:before]:(opacity-100)
230
230
  [&.q-field--rounded_.q-field\\_\\_control]:(rounded-[28px])
231
- [&.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-dismiss:bg-white)
231
+ [&.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)
232
232
  [&.q-field--highlighted_.q-field\\_\\_native]:(text-white)
233
233
  [&.q-field--highlighted_.q-field\\_\\_prefix]:(text-white)
234
234
  [&.q-field--highlighted_.q-field\\_\\_suffix]:(text-white)
@@ -237,8 +237,8 @@ const shortcuts = [
237
237
  [&.q-field--highlighted_.q-field\\_\\_input]:(text-white)
238
238
  [&.q-field--readonly_.q-field\\_\\_control:before]:(opacity-100 bg-transparent border-[1px] border-dashed border-black/24)
239
239
  [&.q-field--dark_.q-field\\_\\_control]:(bg-[rgba(255,_255,_255,_0.07)])
240
- [&.q-field--dark_.q-field\\_\\_control:before]:(layer-dismiss:bg-white/7)
241
- [&.q-field--dark.q-field--highlighted_.q-field\\_\\_control]:(layer-dismiss:bg-white)
240
+ [&.q-field--dark_.q-field\\_\\_control:before]:(layer-components:bg-white/7)
241
+ [&.q-field--dark.q-field--highlighted_.q-field\\_\\_control]:(layer-components:bg-white)
242
242
  [&.q-field--dark.q-field--highlighted_.q-field\\_\\_native]:(text-black)
243
243
  [&.q-field--dark.q-field--highlighted_.q-field\\_\\_prefix]:(text-black)
244
244
  [&.q-field--dark.q-field--highlighted_.q-field\\_\\_suffix]:(text-black)
@@ -45,7 +45,7 @@ const shortcuts = [
45
45
  [
46
46
  /^q-tab__indicator$/,
47
47
  ([, c], { theme }) => theme.quasar?.components?.['q-tab__indicator'] ??
48
- `opacity-0 h-[2px] bg-current`
48
+ `!relative opacity-0 h-[2px] bg-current`
49
49
  ],
50
50
  [
51
51
  /^q-tab--active$/,
@@ -59,7 +59,7 @@ const shortcuts = [
59
59
  [
60
60
  /^q-tabs$/,
61
61
  ([, c], { theme }) => theme.quasar?.components?.['q-tabs'] ??
62
- `relative [transition:color_0.3s,_background-color_0.3s]`
62
+ `!flex-initial relative [transition:color_0.3s,_background-color_0.3s]`
63
63
  ],
64
64
  [
65
65
  /^q-tabs--scrollable$/,
@@ -69,7 +69,7 @@ const shortcuts = [
69
69
  [
70
70
  /^q-tabs--not-scrollable$/,
71
71
  ([, c], { theme }) => theme.quasar?.components?.['q-tabs--not-scrollable'] ??
72
- `[&.q-tabs__arrows--outside]:(pl-0 pr-0) [&_.q-tabs\\_\\_arrow]:(hidden) [&_.q-tabs\\_\\_content]:([border-radius:inherit])`
72
+ `[&.q-tabs__arrows--outside]:(pl-0 pr-0) [&_.q-tabs\\_\\_arrow]:(!hidden) [&_.q-tabs\\_\\_content]:([border-radius:inherit])`
73
73
  ],
74
74
  [
75
75
  /^q-tabs__arrow$/,
@@ -12,7 +12,7 @@ const shortcuts = [
12
12
  [
13
13
  /^q-time__header$/,
14
14
  ([, c], { theme }) => theme.quasar?.components?.['q-time__header'] ??
15
- `[border-top-left-radius:inherit] text-[#fff] p-[16px] font-light`
15
+ `[border-top-left-radius:inherit] text-[#fff] p-[16px] font-light bg-primary`
16
16
  ],
17
17
  [
18
18
  /^q-time__actions$/,
@@ -22,7 +22,7 @@ const shortcuts = [
22
22
  [
23
23
  /^q-time__header-label$/,
24
24
  ([, c], { theme }) => theme.quasar?.components?.['q-time__header-label'] ??
25
- `text-[28px] leading-none tracking-[-0.00833em] [&_>_div_+_div]:(ml-[4px])`
25
+ `text-[28px] leading-none tracking-[-0.00833em] [&_>_div_+_div]:(ml-[4px]) !flex-initial`
26
26
  ],
27
27
  [
28
28
  /^q-time__link$/,
@@ -36,7 +36,7 @@ const shortcuts = [
36
36
  [
37
37
  /^q-time__header-ampm$/,
38
38
  ([, c], { theme }) => theme.quasar?.components?.['q-time__header-ampm'] ??
39
- `text-[16px] tracking-widest`
39
+ `text-[16px] tracking-widest !flex-initial`
40
40
  ],
41
41
  [
42
42
  /^q-time__content$/,
@@ -55,7 +55,7 @@ const shortcuts = [
55
55
  [
56
56
  /^q-time__clock$/,
57
57
  ([, c], { theme }) => theme.quasar?.components?.['q-time__clock'] ??
58
- `p-[24px] w-full h-full max-w-full max-h-full text-[14px]`
58
+ `p-[24px] w-[calc(100%-48px)] h-[calc(100%-48px)] max-w-full max-h-full text-[14px]`
59
59
  ],
60
60
  [
61
61
  /^q-time__clock-circle$/,
@@ -41,7 +41,7 @@ const shortcuts = [
41
41
  [
42
42
  /^q-toggle__thumb$/,
43
43
  ([, c], { theme }) => theme.quasar?.components?.['q-toggle__thumb'] ??
44
- `top-[0.25em] left-[0.25em] w-[0.5em] h-[0.5em] [transition:left_0.22s_cubic-bezier(0.4,_0,_0.2,_1)] select-none z-0 [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] rounded-[50%] bg-[#fff] [box-shadow:0_3px_1px_-2px_rgba(0,_0,_0,_0.2),_0_2px_2px_0_rgba(0,_0,_0,_0.14),_0_1px_5px_0_rgba(0,_0,_0,_0.12)]) [&_.q-icon]:(text-[0.3em] min-w-[1em] text-[#000] opacity-[0.54])`
44
+ `top-[0.25em] left-[0.25em] w-[0.5em] h-[0.5em] [transition:left_0.22s_cubic-bezier(0.4,_0,_0.2,_1)] select-none z-0 [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] rounded-[50%] bg-[#fff] [box-shadow:0_3px_1px_-2px_rgba(0,_0,_0,_0.2),_0_2px_2px_0_rgba(0,_0,_0,_0.14),_0_1px_5px_0_rgba(0,_0,_0,_0.12)]) [&_.q-icon]:(layer-components:text-[0.3em] min-w-[1em] layer-components:text-[#000] opacity-[0.54])`
45
45
  ],
46
46
  [
47
47
  /^q-toggle__inner$/,
@@ -56,12 +56,13 @@ const shortcuts = [
56
56
  [
57
57
  /^q-toggle__inner--truthy$/,
58
58
  ([, c], { theme }) => theme.quasar?.components?.['q-toggle__inner--truthy'] ??
59
- ` [&_.q-toggle\\_\\_track]:(opacity-[0.54]) [&_.q-toggle\\_\\_thumb]:(left-[0.65em]) [&_.q-toggle\\_\\_thumb:after]:(bg-current) [&_.q-toggle\\_\\_thumb_.q-icon]:(text-[#fff] opacity-100)`
59
+ `layer-components:text-primary [&_.q-toggle\\_\\_track]:(opacity-[0.54]) [&_.q-toggle\\_\\_thumb]:(left-[0.65em]) [&_.q-toggle\\_\\_thumb:after]:(bg-current) [&_.q-toggle\\_\\_thumb_.q-icon]:(layer-components:text-[#fff] opacity-100)`
60
60
  ],
61
61
  [
62
62
  /^q-toggle--dark$/,
63
63
  ([, c], { theme }) => theme.quasar?.components?.['q-toggle--dark'] ??
64
- `[&_.q-toggle\\_\\_inner]:(text-[#fff]) [&_.q-toggle\\_\\_inner--truthy]:(text-primary) [&_.q-toggle\\_\\_thumb:after]:([box-shadow:none]) [&_.q-toggle\\_\\_thumb:before]:(!opacity-[0.32])`
64
+ `[&_.q-toggle\\_\\_inner--truthy]:() [&_.q-toggle\\_\\_thumb:after]:([box-shadow:none]) [&_.q-toggle\\_\\_thumb:before]:(!opacity-[0.32])`
65
+ // [&_.q-toggle\\_\\_inner]:(layer-components:text-[#fff])
65
66
  ],
66
67
  [
67
68
  /^q-toggle--dense$/,
@@ -17,13 +17,13 @@ const shortcuts = [
17
17
  [/^window-height$/, ([, c], { theme }) => `!mt-0 !mb-0 !h-screen`],
18
18
  [/^window-width$/, ([, c], { theme }) => `!ml-0 !mr-0 !w-screen`],
19
19
  [
20
- /^q-p(a|t|b|l|r)?(?:-)(none|xs|sm|md|lg|xl)$/,
20
+ /^q-p(a|t|b|l|r|x|y)?(?:-)(none|xs|sm|md|lg|xl)$/,
21
21
  ([, side, size], { theme }) => {
22
22
  return `p${side}-${theme.quasar?.spaces[size]}`;
23
23
  }
24
24
  ],
25
25
  [
26
- /^q-m(a|t|b|l|r)?(?:-)(none|xs|sm|md|lg|xl)$/,
26
+ /^q-m(a|t|b|l|r|x|y)?(?:-)(none|xs|sm|md|lg|xl)$/,
27
27
  ([, side, size], { theme }) => {
28
28
  return `m${side}-${theme.quasar?.spaces[size]}`;
29
29
  }
@@ -1779,9 +1779,11 @@ textarea {
1779
1779
  ].concat(QBreadcrumbsPreflights, QCheckboxPreflights, QChipPreflights, QCircularProgressPreflights, QDialogPreflights, QFieldPreflights, QLayoutPreflights, QLinearProgressPreflights, QRadioPreflights, QSelectPreflights, QSpinnerPreflights, QSkeletonPreflights, QTablePreflights, QTogglePreflights, QTreePreflights, ColorPreflights, DarkPreflights, HelperPreflights, MousePreflights, TypographyPreflights, VisibilityPreflights, TransitionPreflights, SizePreflights),
1780
1780
  rules: [].concat(MouseRules, HelperRules, ElevationRules, VisibilityRules),
1781
1781
  shortcuts: [].concat(QIconShortcuts, QAjaxBarShortcuts, QAvatarShortcuts, QBadgeShortcuts, QBreadcrumbsShortcuts, QBannerShortcuts, QBarShortcuts, QBtnShortcuts, QBtnDropdownShortcuts, QBtnGroupShortcuts, 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, DarkShortcuts, FlexShortcuts, HelperShortcuts, MouseShortcuts, OrientationShortcuts, PositionShortcuts, SizeShortcuts, TouchShortcuts, TransitionsShortcuts, TypographyShortcuts, VisibilityShortcuts, QHeaderShortcuts, QFooterShortcuts, QDrawerShortcuts, ElevationShortcuts),
1782
+ outputToCssLayers: true,
1782
1783
  layers: {
1783
- dismiss: -1,
1784
- default: 1
1784
+ components: -1,
1785
+ default: 1,
1786
+ utilities: 2
1785
1787
  },
1786
1788
  theme: defaultTheme,
1787
1789
  variants: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vitrify",
3
- "version": "0.17.12",
3
+ "version": "0.17.13",
4
4
  "license": "MIT",
5
5
  "author": "Stefan van Herwijnen",
6
6
  "description": "Vite as your Full Stack development tool",
@@ -68,7 +68,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
68
68
  /^q-checkbox__inner$/,
69
69
  ([, c], { theme }) =>
70
70
  theme.quasar?.components?.['q-checkbox__inner'] ??
71
- `text-[40px] w-[1em] min-w-[1em] h-[1em] outline-[0] rounded-[50%] layer-dismiss:text-[rgba(0,_0,_0,_0.54)]`
71
+ `text-[40px] w-[1em] min-w-[1em] h-[1em] outline-[0] rounded-[50%] layer-components:text-[rgba(0,_0,_0,_0.54)]`
72
72
  ],
73
73
 
74
74
  [
@@ -91,10 +91,10 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
91
91
  /^q-checkbox--dark$/,
92
92
  ([, c], { theme }) =>
93
93
  theme.quasar?.components?.['q-checkbox--dark'] ??
94
- `[&_.q-checkbox\\_\\_inner]:(layer-dismiss:text-[rgba(255,_255,_255,_0.7)])
94
+ `[&_.q-checkbox\\_\\_inner]:(layer-components:text-[rgba(255,_255,_255,_0.7)])
95
95
  [&_.q-checkbox\\_\\_inner:before]:(!opacity-[0.32])
96
- [&_.q-checkbox\\_\\_inner--truthy]:(layer-dismiss:text-primary)
97
- [&_.q-checkbox\\_\\_inner--indet]:(layer-dismiss:text-primary)`
96
+ [&_.q-checkbox\\_\\_inner--truthy]:(layer-components:text-primary)
97
+ [&_.q-checkbox\\_\\_inner--indet]:(layer-components:text-primary)`
98
98
  ],
99
99
 
100
100
  [
@@ -219,16 +219,16 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
219
219
  /^q-field--filled$/,
220
220
  ([, c], { theme }) =>
221
221
  theme.quasar?.components?.['q-field--filled'] ??
222
- `[&_.q-field\\_\\_control]:(px-[12px] py-[0] layer-dismiss:bg-black/5 rounded-tl-[4px] rounded-br-[0] rounded-tr-[4px] rounded-bl-[0])
223
- [&_.q-field\\_\\_control:before]:(layer-dismiss: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)])
222
+ `[&_.q-field\\_\\_control]:(px-[12px] py-[0] layer-components:bg-black/5 rounded-tl-[4px] rounded-br-[0] rounded-tr-[4px] rounded-bl-[0])
223
+ [&_.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)])
224
224
  [&_.q-field\\_\\_control:hover:before]:(opacity-100)
225
225
  [&_.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)])
226
226
  [&.q-field--rounded_.q-field\\_\\_control]:(rounded-tl-[28px] rounded-br-[0] rounded-tr-[28px] rounded-bl-[0])
227
- [&.q-field--highlighted_.q-field\\_\\_control:before]:(opacity-100 layer-dismiss:bg-black/12)
227
+ [&.q-field--highlighted_.q-field\\_\\_control:before]:(opacity-100 layer-components:bg-black/12)
228
228
  [&.q-field--highlighted_.q-field\\_\\_control:after]:([transform:scale3d(1,_1,_1)])
229
- [&.q-field--dark_.q-field\\_\\_control]:(layer-dismiss:bg-white/7)
230
- [&.q-field--dark_.q-field\\_\\_control:before]:(layer-dismiss:bg-white/7)
231
- [&.q-field--dark.q-field--highlighted_.q-field\\_\\_control:before]:(layer-dismiss:bg-white/1)
229
+ [&.q-field--dark_.q-field\\_\\_control]:(layer-components:bg-white/7)
230
+ [&.q-field--dark_.q-field\\_\\_control:before]:(layer-components:bg-white/7)
231
+ [&.q-field--dark.q-field--highlighted_.q-field\\_\\_control:before]:(layer-components:bg-white/1)
232
232
  [&.q-field--readonly_.q-field\\_\\_control:before]:(opacity-100 bg-transparent [border-bottom-style:dashed])`
233
233
  ],
234
234
 
@@ -238,7 +238,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
238
238
  theme.quasar?.components?.['q-field--outlined'] ??
239
239
  `[&_.q-field\\_\\_control]:(rounded-[4px] px-[12px] py-[0])
240
240
  [&_.q-field\\_\\_control:before]:(border-[1px] border-solid border-black/24 [transition:border-color_0.36s_cubic-bezier(0.4,_0,_0.2,_1)])
241
- [&_.q-field\\_\\_control:hover:before]:(layer-dismiss:border-black)
241
+ [&_.q-field\\_\\_control:hover:before]:(layer-components:border-black)
242
242
  [&_.q-field\\_\\_control:after]:([height:inherit] [border-radius:inherit] border-[2px] border-solid border-transparent [transition:border-color_0.36s_cubic-bezier(0.4,_0,_0.2,_1)])
243
243
  [&_.q-field\\_\\_native:-webkit-autofill]:(mt-px mb-px)
244
244
  [&_.q-field\\_\\_input:-webkit-autofill]:(mt-px mb-px)
@@ -253,7 +253,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
253
253
  ([, c], { theme }) =>
254
254
  theme.quasar?.components?.['q-field--standard'] ??
255
255
  `[&_.q-field\\_\\_control:before]:([border-bottom:1px_solid_rgba(0,_0,_0,_0.24)] [transition:border-color_0.36s_cubic-bezier(0.4,_0,_0.2,_1)])
256
- [&_.q-field\\_\\_control:hover:before]:(layer-dismiss:border-black)
256
+ [&_.q-field\\_\\_control:hover:before]:(layer-components:border-black)
257
257
  [&_.q-field\\_\\_control:after]:(h-[2px] top-auto [border-bottom-left-radius:inherit] [border-bottom-right-radius:inherit] origin-[center_bottom] [transform:scale3d(0,_1,_1)] bg-current [transition:transform_0.36s_cubic-bezier(0.4,_0,_0.2,_1)])
258
258
  [&.q-field--highlighted_.q-field\\_\\_control:after]:([transform:scale3d(1,_1,_1)])
259
259
  [&.q-field--readonly_.q-field\\_\\_control:before]:([border-bottom-style:dashed])
@@ -280,11 +280,11 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
280
280
  /^q-field--standout$/,
281
281
  ([, c], { theme }) =>
282
282
  theme.quasar?.components?.['q-field--standout'] ??
283
- `[&_.q-field\\_\\_control]:(px-[12px] py-[0] layer-dismiss: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)])
284
- [&_.q-field\\_\\_control:before]:(layer-dismiss: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)])
283
+ `[&_.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)])
284
+ [&_.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)])
285
285
  [&_.q-field\\_\\_control:hover:before]:(opacity-100)
286
286
  [&.q-field--rounded_.q-field\\_\\_control]:(rounded-[28px])
287
- [&.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-dismiss:bg-white)
287
+ [&.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)
288
288
  [&.q-field--highlighted_.q-field\\_\\_native]:(text-white)
289
289
  [&.q-field--highlighted_.q-field\\_\\_prefix]:(text-white)
290
290
  [&.q-field--highlighted_.q-field\\_\\_suffix]:(text-white)
@@ -293,8 +293,8 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
293
293
  [&.q-field--highlighted_.q-field\\_\\_input]:(text-white)
294
294
  [&.q-field--readonly_.q-field\\_\\_control:before]:(opacity-100 bg-transparent border-[1px] border-dashed border-black/24)
295
295
  [&.q-field--dark_.q-field\\_\\_control]:(bg-[rgba(255,_255,_255,_0.07)])
296
- [&.q-field--dark_.q-field\\_\\_control:before]:(layer-dismiss:bg-white/7)
297
- [&.q-field--dark.q-field--highlighted_.q-field\\_\\_control]:(layer-dismiss:bg-white)
296
+ [&.q-field--dark_.q-field\\_\\_control:before]:(layer-components:bg-white/7)
297
+ [&.q-field--dark.q-field--highlighted_.q-field\\_\\_control]:(layer-components:bg-white)
298
298
  [&.q-field--dark.q-field--highlighted_.q-field\\_\\_native]:(text-black)
299
299
  [&.q-field--dark.q-field--highlighted_.q-field\\_\\_prefix]:(text-black)
300
300
  [&.q-field--dark.q-field--highlighted_.q-field\\_\\_suffix]:(text-black)
@@ -67,7 +67,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
67
67
  /^q-tab__indicator$/,
68
68
  ([, c], { theme }) =>
69
69
  theme.quasar?.components?.['q-tab__indicator'] ??
70
- `opacity-0 h-[2px] bg-current`
70
+ `!relative opacity-0 h-[2px] bg-current`
71
71
  ],
72
72
 
73
73
  [
@@ -87,7 +87,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
87
87
  /^q-tabs$/,
88
88
  ([, c], { theme }) =>
89
89
  theme.quasar?.components?.['q-tabs'] ??
90
- `relative [transition:color_0.3s,_background-color_0.3s]`
90
+ `!flex-initial relative [transition:color_0.3s,_background-color_0.3s]`
91
91
  ],
92
92
 
93
93
  [
@@ -101,7 +101,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
101
101
  /^q-tabs--not-scrollable$/,
102
102
  ([, c], { theme }) =>
103
103
  theme.quasar?.components?.['q-tabs--not-scrollable'] ??
104
- `[&.q-tabs__arrows--outside]:(pl-0 pr-0) [&_.q-tabs\\_\\_arrow]:(hidden) [&_.q-tabs\\_\\_content]:([border-radius:inherit])`
104
+ `[&.q-tabs__arrows--outside]:(pl-0 pr-0) [&_.q-tabs\\_\\_arrow]:(!hidden) [&_.q-tabs\\_\\_content]:([border-radius:inherit])`
105
105
  ],
106
106
 
107
107
  [
@@ -20,7 +20,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
20
20
  /^q-time__header$/,
21
21
  ([, c], { theme }) =>
22
22
  theme.quasar?.components?.['q-time__header'] ??
23
- `[border-top-left-radius:inherit] text-[#fff] p-[16px] font-light`
23
+ `[border-top-left-radius:inherit] text-[#fff] p-[16px] font-light bg-primary`
24
24
  ],
25
25
 
26
26
  [
@@ -34,7 +34,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
34
34
  /^q-time__header-label$/,
35
35
  ([, c], { theme }) =>
36
36
  theme.quasar?.components?.['q-time__header-label'] ??
37
- `text-[28px] leading-none tracking-[-0.00833em] [&_>_div_+_div]:(ml-[4px])`
37
+ `text-[28px] leading-none tracking-[-0.00833em] [&_>_div_+_div]:(ml-[4px]) !flex-initial`
38
38
  ],
39
39
 
40
40
  [
@@ -54,7 +54,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
54
54
  /^q-time__header-ampm$/,
55
55
  ([, c], { theme }) =>
56
56
  theme.quasar?.components?.['q-time__header-ampm'] ??
57
- `text-[16px] tracking-widest`
57
+ `text-[16px] tracking-widest !flex-initial`
58
58
  ],
59
59
 
60
60
  [
@@ -81,7 +81,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
81
81
  /^q-time__clock$/,
82
82
  ([, c], { theme }) =>
83
83
  theme.quasar?.components?.['q-time__clock'] ??
84
- `p-[24px] w-full h-full max-w-full max-h-full text-[14px]`
84
+ `p-[24px] w-[calc(100%-48px)] h-[calc(100%-48px)] max-w-full max-h-full text-[14px]`
85
85
  ],
86
86
 
87
87
  [
@@ -51,7 +51,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
51
51
  /^q-toggle__thumb$/,
52
52
  ([, c], { theme }) =>
53
53
  theme.quasar?.components?.['q-toggle__thumb'] ??
54
- `top-[0.25em] left-[0.25em] w-[0.5em] h-[0.5em] [transition:left_0.22s_cubic-bezier(0.4,_0,_0.2,_1)] select-none z-0 [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] rounded-[50%] bg-[#fff] [box-shadow:0_3px_1px_-2px_rgba(0,_0,_0,_0.2),_0_2px_2px_0_rgba(0,_0,_0,_0.14),_0_1px_5px_0_rgba(0,_0,_0,_0.12)]) [&_.q-icon]:(text-[0.3em] min-w-[1em] text-[#000] opacity-[0.54])`
54
+ `top-[0.25em] left-[0.25em] w-[0.5em] h-[0.5em] [transition:left_0.22s_cubic-bezier(0.4,_0,_0.2,_1)] select-none z-0 [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] rounded-[50%] bg-[#fff] [box-shadow:0_3px_1px_-2px_rgba(0,_0,_0,_0.2),_0_2px_2px_0_rgba(0,_0,_0,_0.14),_0_1px_5px_0_rgba(0,_0,_0,_0.12)]) [&_.q-icon]:(layer-components:text-[0.3em] min-w-[1em] layer-components:text-[#000] opacity-[0.54])`
55
55
  ],
56
56
 
57
57
  [
@@ -72,14 +72,15 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
72
72
  /^q-toggle__inner--truthy$/,
73
73
  ([, c], { theme }) =>
74
74
  theme.quasar?.components?.['q-toggle__inner--truthy'] ??
75
- ` [&_.q-toggle\\_\\_track]:(opacity-[0.54]) [&_.q-toggle\\_\\_thumb]:(left-[0.65em]) [&_.q-toggle\\_\\_thumb:after]:(bg-current) [&_.q-toggle\\_\\_thumb_.q-icon]:(text-[#fff] opacity-100)`
75
+ `layer-components:text-primary [&_.q-toggle\\_\\_track]:(opacity-[0.54]) [&_.q-toggle\\_\\_thumb]:(left-[0.65em]) [&_.q-toggle\\_\\_thumb:after]:(bg-current) [&_.q-toggle\\_\\_thumb_.q-icon]:(layer-components:text-[#fff] opacity-100)`
76
76
  ],
77
77
 
78
78
  [
79
79
  /^q-toggle--dark$/,
80
80
  ([, c], { theme }) =>
81
81
  theme.quasar?.components?.['q-toggle--dark'] ??
82
- `[&_.q-toggle\\_\\_inner]:(text-[#fff]) [&_.q-toggle\\_\\_inner--truthy]:(text-primary) [&_.q-toggle\\_\\_thumb:after]:([box-shadow:none]) [&_.q-toggle\\_\\_thumb:before]:(!opacity-[0.32])`
82
+ `[&_.q-toggle\\_\\_inner--truthy]:() [&_.q-toggle\\_\\_thumb:after]:([box-shadow:none]) [&_.q-toggle\\_\\_thumb:before]:(!opacity-[0.32])`
83
+ // [&_.q-toggle\\_\\_inner]:(layer-components:text-[#fff])
83
84
  ],
84
85
 
85
86
  [
@@ -26,7 +26,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
26
26
  [/^window-width$/, ([, c], { theme }) => `!ml-0 !mr-0 !w-screen`],
27
27
 
28
28
  [
29
- /^q-p(a|t|b|l|r)?(?:-)(none|xs|sm|md|lg|xl)$/,
29
+ /^q-p(a|t|b|l|r|x|y)?(?:-)(none|xs|sm|md|lg|xl)$/,
30
30
  ([, side, size], { theme }) => {
31
31
  return `p${side}-${
32
32
  theme.quasar?.spaces[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']
@@ -35,7 +35,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
35
35
  ],
36
36
 
37
37
  [
38
- /^q-m(a|t|b|l|r)?(?:-)(none|xs|sm|md|lg|xl)$/,
38
+ /^q-m(a|t|b|l|r|x|y)?(?:-)(none|xs|sm|md|lg|xl)$/,
39
39
  ([, side, size], { theme }) => {
40
40
  return `m${side}-${
41
41
  theme.quasar?.spaces[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']
@@ -2010,9 +2010,11 @@ textarea {
2010
2010
  QDrawerShortcuts,
2011
2011
  ElevationShortcuts
2012
2012
  ),
2013
+ outputToCssLayers: true,
2013
2014
  layers: {
2014
- dismiss: -1,
2015
- default: 1
2015
+ components: -1,
2016
+ default: 1,
2017
+ utilities: 2
2016
2018
  },
2017
2019
  theme: defaultTheme,
2018
2020
  variants: [