unocss-preset-quasar 0.1.0 → 0.1.2

package/LICENCE

@@ -1,4 +1,4 @@
-Copyright 2022-present Stefan van Herwijnen
+Copyright 2025-present Stefan van Herwijnen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/dist/core/flex.unocss.js

@@ -52,17 +52,17 @@ const shortcuts = [
         /^q-gutter-(none|xs|sm|md|lg|xl)$/,
         ([, size], { theme }) => `ml--${colGutter[size]}
       mt--${colGutter[size]}
-      [&_>_*]:(mr-${colGutter[size]} mb-${colGutter[size]})`
+      [&_>_*]:(ml-${colGutter[size]} mt-${colGutter[size]})`
     ],
     [
         /^q-gutter-x-(none|xs|sm|md|lg|xl)$/,
         ([, size], { theme }) => `ml--${colGutter[size]}
-        [&_>_*]:(mr-${colGutter[size]})`
+        [&_>_*]:(ml-${colGutter[size]})`
     ],
     [
         /^q-gutter-y-(none|xs|sm|md|lg|xl)$/,
         ([, size], { theme }) => `mt--${colGutter[size]}
-        [&_>_*]:(mb-${colGutter[size]})`
+        [&_>_*]:(mt-${colGutter[size]})`
     ],
     [/^wrap$/, ([, size], { theme }) => `flex-wrap`],
     [/^no-wrap$/, ([, size], { theme }) => `flex-nowrap`],

package/dist/index.js

@@ -1,5 +1,5 @@
 import { definePreset, presetIcons, presetWebFonts, transformerVariantGroup } from 'unocss';
-import presetUno from '@unocss/preset-uno';
+import presetWind3 from '@unocss/preset-wind3';
 import { generateTheme } from './theme.js';
 import { animatedUno } from 'animated-unocss';
 import { preflights as corePreflights, rules as coreRules, shortcuts as coreShortcuts } from './core/index.js';
@@ -54,6 +54,77 @@ const QPageStickySafelist = [
     'vertical-bottom'
 ];
 const QMenuSafelist = ['q-menu', 'q-menu--square', 'q-menu--dark'];
+const QTabSafelist = [
+    'q-tab',
+    'q-tab--full',
+    'q-tab--no-caps',
+    'q-tab__content',
+    'q-tab__content--inline',
+    'q-tab__icon',
+    'q-tab__label',
+    'q-tab__alert',
+    'q-tab__alert-icon',
+    'q-tab__indicator',
+    'q-tab--active',
+    'q-tab--inactive'
+];
+const QSliderSafelist = [
+    'q-slider',
+    'q-slider--h',
+    'q-slider--v',
+    'q-slider--editable',
+    'q-slider__track-container',
+    'q-slider__track-container--h',
+    'q-slider__track-container--v',
+    'q-slider__track',
+    'q-slider__inner',
+    'q-slider__selection',
+    'q-slider__markers',
+    'q-slider__markers--h',
+    'q-slider__markers--v',
+    'q-slider__marker-labels-container',
+    'q-slider__marker-labels',
+    'q-slider__marker-labels--h-standard',
+    'q-slider__marker-labels--h-switched',
+    'q-slider__marker-labels--h-ltr',
+    'q-slider__marker-labels--h-rtl',
+    'q-slider__marker-labels--v-standard',
+    'q-slider__marker-labels--v-switched',
+    'q-slider__marker-labels--v-ltr',
+    'q-slider__marker-labels--v-rtl',
+    'q-slider__thumb',
+    'q-slider__thumb--h',
+    'q-slider__thumb--h-ltr',
+    'q-slider__thumb--h-rtl',
+    'q-slider__thumb--v',
+    'q-slider__thumb--v-ltr',
+    'q-slider__thumb--v-rtl',
+    'q-slider__thumb-shape',
+    'q-slider__focus-ring',
+    'q-slider__pin',
+    'q-slider__pin--h',
+    'q-slider__pin--h-standard',
+    'q-slider__pin--h-switched',
+    'q-slider__pin--v',
+    'q-slider__pin--v-standard',
+    'q-slider__pin--v-switched',
+    'q-slider__label',
+    'q-slider__label--h',
+    'q-slider__label--h-standard',
+    'q-slider__label--h-switched',
+    'q-slider__label--v',
+    'q-slider__label--v-standard',
+    'q-slider__label--v-switched',
+    'q-slider__text-container',
+    'q-slider__text',
+    'q-slider--no-value',
+    'q-slider--focus',
+    'q-slider--inactive',
+    'q-slider--active',
+    'q-slider--label',
+    'q-slider--dark',
+    'q-slider--dense'
+];
 const componentsSafelistMap = {
     QIcon: ['q-icon'],
     QTabPanel: ['q-panel', 'q-panel-parent'],
@@ -108,7 +179,8 @@ const componentsSafelistMap = {
         'q-btn-dropdown__arrow',
         'q-btn-dropdown--current'
     ],
-    QBtnGroup: [
+    QBtnToggle: [
+        'q-btn-toggle',
         'q-btn-group',
         'q-btn-group--push',
         'q-btn-group--push',
@@ -122,7 +194,6 @@ const componentsSafelistMap = {
         'q-btn-group--spread',
         'q-btn-group--spread'
     ],
-    QBtnToggle: ['q-btn-toggle'],
     QCard: [
         'q-card',
         'q-card--bordered',
@@ -518,6 +589,7 @@ const componentsSafelistMap = {
         'q-radio--dark',
         'q-radio--dense'
     ],
+    QRange: QSliderSafelist,
     QRating: [
         'q-rating',
         'q-rating__icon-container',
@@ -594,63 +666,7 @@ const componentsSafelistMap = {
         'q-slide-item__bottom',
         'q-slide-item__content'
     ],
-    QSlider: [
-        'q-slider',
-        'q-slider--h',
-        'q-slider--v',
-        'q-slider--editable',
-        'q-slider__track-container',
-        'q-slider__track-container--h',
-        'q-slider__track-container--v',
-        'q-slider__track',
-        'q-slider__inner',
-        'q-slider__selection',
-        'q-slider__markers',
-        'q-slider__markers--h',
-        'q-slider__markers--v',
-        'q-slider__marker-labels-container',
-        'q-slider__marker-labels',
-        'q-slider__marker-labels--h-standard',
-        'q-slider__marker-labels--h-switched',
-        'q-slider__marker-labels--h-ltr',
-        'q-slider__marker-labels--h-rtl',
-        'q-slider__marker-labels--v-standard',
-        'q-slider__marker-labels--v-switched',
-        'q-slider__marker-labels--v-ltr',
-        'q-slider__marker-labels--v-rtl',
-        'q-slider__thumb',
-        'q-slider__thumb--h',
-        'q-slider__thumb--h-ltr',
-        'q-slider__thumb--h-rtl',
-        'q-slider__thumb--v',
-        'q-slider__thumb--v-ltr',
-        'q-slider__thumb--v-rtl',
-        'q-slider__thumb-shape',
-        'q-slider__focus-ring',
-        'q-slider__pin',
-        'q-slider__pin--h',
-        'q-slider__pin--h-standard',
-        'q-slider__pin--h-switched',
-        'q-slider__pin--v',
-        'q-slider__pin--v-standard',
-        'q-slider__pin--v-switched',
-        'q-slider__label',
-        'q-slider__label--h',
-        'q-slider__label--h-standard',
-        'q-slider__label--h-switched',
-        'q-slider__label--v',
-        'q-slider__label--v-standard',
-        'q-slider__label--v-switched',
-        'q-slider__text-container',
-        'q-slider__text',
-        'q-slider--no-value',
-        'q-slider--focus',
-        'q-slider--inactive',
-        'q-slider--active',
-        'q-slider--label',
-        'q-slider--dark',
-        'q-slider--dense'
-    ],
+    QSlider: QSliderSafelist,
     QSpace: ['q-space'],
     QSpinner: ['q-spinner', 'q-spinner-mat'],
     QSplitter: [
@@ -727,20 +743,8 @@ const componentsSafelistMap = {
         'q-table--vertical-separator',
         'q-table--dense'
     ],
-    QTab: [
-        'q-tab',
-        'q-tab--full',
-        'q-tab--no-caps',
-        'q-tab__content',
-        'q-tab__content--inline',
-        'q-tab__icon',
-        'q-tab__label',
-        'q-tab__alert',
-        'q-tab__alert-icon',
-        'q-tab__indicator',
-        'q-tab--active',
-        'q-tab--inactive'
-    ],
+    QTab: QTabSafelist,
+    QRouteTab: QTabSafelist,
     QTabs: [
         'q-tabs',
         'q-tabs--scrollable',
@@ -1475,14 +1479,17 @@ export const QuasarPreset = definePreset(async (options) => {
     if (!options)
         options = {
             style: 'md2',
-            primaryColor: '#CEB8F1'
+            sourceColor: '#806cb0'
         };
     if (!Object.keys(QuasarStyles).includes(options.style))
         throw new Error('Unsupported Quasar style');
+    if (!options.sourceColor) {
+        options.sourceColor = '#806cb0';
+    }
     const style = (await QuasarStyles[options.style]).default;
-    const theme = await generateTheme(options.primaryColor);
+    const theme = await generateTheme(options.sourceColor);
     return [
-        presetUno({
+        presetWind3({
             dark: {
                 light: '.body--light',
                 dark: '.body--dark'

package/dist/styles/md2/components/QBtnToggle.unocss.js

@@ -1,4 +1,36 @@
 const shortcuts = [
-    [/^q-btn-toggle$/, ([, c], { theme }) => `relative`]
+    [/^q-btn-toggle$/, ([, c], { theme }) => `relative`],
+    [
+        /^q-btn-group$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-btn-group'] ??
+            `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-item]:([border-radius:inherit] self-stretch) [&_>_.q-btn-item:before]:([box-shadow:none]) [&_>_.q-btn-item_.q-badge--floating]:(right-0) [&_>_.q-btn-group]:([box-shadow:none]) [&_>_.q-btn-group:first-child_>_.q-btn:first-child]:([border-top-left-radius:inherit] [border-bottom-left-radius:inherit]) [&_>_.q-btn-group:last-child_>_.q-btn:last-child]:([border-top-right-radius:inherit] [border-bottom-right-radius:inherit]) [&_>_.q-btn-group:not(:first-child)_>_.q-btn:first-child:before]:([border-left:0]) [&_>_.q-btn-group:not(:last-child)_>_.q-btn:last-child:before]:([border-right:0]) [&_>_.q-btn-item:not(:last-child)]:(rounded-tr-none rounded-br-none) [&_>_.q-btn-item:not(:first-child)]:(rounded-tl-none rounded-bl-none) [&_>_.q-btn-item.q-btn--standard:before]:(z--1)`
+    ],
+    [
+        /^q-btn-group--push$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-btn-group--push'] ??
+            `rounded-[7px] [&_>_.q-btn--push.q-btn--actionable]:(transform-none) [&_>_.q-btn--push.q-btn--actionable_.q-btn\\_\\_content]:([transition:margin-top_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1),_margin-bottom_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&_>_.q-btn--push.q-btn--actionable:active_.q-btn\\_\\_content]:(mt-[2px] -mb-[2px])
+    [&__>_.q-btn--push.q-btn--actionable.q-btn--active__.q-btn\\_\\_content]:(mt-[2px] -mb-[2px])`
+    ],
+    [/^q-btn-group--rounded$/, ([, c], { theme }) => `rounded-[28px]`],
+    [/^q-btn-group--square$/, ([, c], { theme }) => `rounded-none`],
+    [/^q-btn-group--flat$/, ([, c], { theme }) => `[box-shadow:none]`],
+    [
+        /^q-btn-group--outline$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-btn-group--outline'] ??
+            `[box-shadow:none] [&_>_.q-separator]:(hidden) [&_>_.q-btn-item_+_.q-btn-item:before]:([border-left:0]) [&_>_.q-btn-item:not(:last-child):before]:([border-right:0])`
+    ],
+    [/^q-btn-group--unelevated$/, ([, c], { theme }) => `[box-shadow:none]`],
+    [/^q-btn-group--stretch$/, ([, c], { theme }) => `self-stretch rounded-none`],
+    [
+        /^q-btn-group--glossy$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-btn-group--glossy'] ??
+            `[&_>_.q-btn-item]:(!bg-[linear-gradient(_to_bottom,_rgba(255,_255,_255,_0.3),_rgba(255,_255,_255,_0)_50%,_rgba(0,_0,_0,_0.12)_51%,_rgba(0,_0,_0,_0.04)_)])`
+    ],
+    [
+        /^q-btn-group--spread$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-btn-group--spread'] ??
+            `[&_>_.q-btn-group]:(!flex) [&_>_.q-btn-item]:(w-auto min-w-[0] max-w-full flex-[10000_1_0%])
+    [&__>_.q-btn-group_>_.q-btn-item:not(.q-btn-dropdown\\_\\_arrow-container)]:(w-auto min-w-[0] max-w-full flex-[10000_1_0%])`
+    ]
 ];
 export { shortcuts };

package/dist/styles/md2/components/QSkeleton.unocss.js

@@ -57,122 +57,122 @@ const preflights = [
 ];
 const shortcuts = [
     [
-        /^q-skeleton$/,
+        /^q-skeleton\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton'] ??
-            `bg-[rgba(0,_0,_0,_0.12)] rounded-[4px] box-border [&:before]:(content-['_'])`
+            `bg-gray-200 rounded box-border`
     ],
     [
-        /^q-skeleton--anim$/,
+        /^q-skeleton--anim\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim'] ?? `cursor-wait`
     ],
     [
-        /^q-skeleton--type-text$/,
+        /^q-skeleton--type-text\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-text'] ??
-            `scale-x-100 scale-y-[0.5]`
+            `transform scale-y-50`
     ],
     [
-        /^q-skeleton--type-circle$/,
+        /^q-skeleton--type-circle\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-circle'] ??
-            `h-[48px] w-[48px] rounded-[50%]`
+            `h-12 w-12 rounded-full`
     ],
     [
-        /^q-skeleton--type-QAvatar$/,
+        /^q-skeleton--type-QAvatar\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QAvatar'] ??
-            `h-[48px] w-[48px] rounded-[50%]`
+            `h-12 w-12 rounded-full`
     ],
     [
-        /^q-skeleton--type-QBtn$/,
-        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QBtn'] ?? `w-[90px] h-[36px]`
+        /^q-skeleton--type-QBtn\$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QBtn'] ?? `w-24 h-9`
     ],
     [
-        /^q-skeleton--type-QBadge$/,
-        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QBadge'] ??
-            `w-[70px] h-[16px]`
+        /^q-skeleton--type-QBadge\$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QBadge'] ?? `w-18 h-4`
     ],
     [
-        /^q-skeleton--type-QChip$/,
+        /^q-skeleton--type-QChip\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QChip'] ??
-            `w-[90px] h-[28px] rounded-[16px]`
+            `w-24 h-7 rounded-full`
     ],
     [
-        /^q-skeleton--type-QToolbar$/,
-        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QToolbar'] ?? `h-[50px]`
+        /^q-skeleton--type-QToolbar\$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QToolbar'] ?? `h-12`
     ],
     [
-        /^q-skeleton--type-QCheckbox$/,
+        /^q-skeleton--type-QCheckbox\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QCheckbox'] ??
-            `w-[40px] h-[40px] rounded-[50%]`
+            `h-10 w-10 rounded-full`
     ],
     [
-        /^q-skeleton--type-QRadio$/,
+        /^q-skeleton--type-QRadio\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QRadio'] ??
-            `w-[40px] h-[40px] rounded-[50%]`
+            `h-10 w-10 rounded-full`
     ],
     [
-        /^q-skeleton--type-QToggle$/,
+        /^q-skeleton--type-QToggle\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QToggle'] ??
-            `w-[56px] h-[40px] rounded-[7px]`
+            `w-14 h-10 rounded-md`
     ],
     [
-        /^q-skeleton--type-QSlider$/,
-        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QSlider'] ?? `h-[40px]`
+        /^q-skeleton--type-QSlider\$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QSlider'] ?? `h-10`
     ],
     [
-        /^q-skeleton--type-QRange$/,
-        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QRange'] ?? `h-[40px]`
+        /^q-skeleton--type-QRange\$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QRange'] ?? `h-10`
     ],
     [
-        /^q-skeleton--type-QInput$/,
-        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QInput'] ?? `h-[56px]`
+        /^q-skeleton--type-QInput\$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QInput'] ?? `h-14`
     ],
     [
-        /^q-skeleton--bordered$/,
+        /^q-skeleton--bordered\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--bordered'] ??
-            `border-[1px] border-solid border-[rgba(0,0,0,0.05)]`
+            `border border-gray-200`
     ],
     [
-        /^q-skeleton--square$/,
+        /^q-skeleton--square\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--square'] ?? `rounded-none`
     ],
     [
-        /^q-skeleton--anim-fade$/,
-        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-fade'] ??
-            `animate-[q-skeleton--fade_var(--q-skeleton-speed)_linear_0.5s_infinite]`
+        /^q-skeleton--anim-fade\$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-fade'] ?? `animate-fade`
     ],
     [
-        /^q-skeleton--anim-pulse$/,
-        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-pulse'] ??
-            `animate-[q-skeleton--pulse_var(--q-skeleton-speed)_ease-in-out_0.5s_infinite]`
+        /^q-skeleton--anim-pulse\$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-pulse'] ?? `animate-pulse`
     ],
     [
-        /^q-skeleton--anim-pulse-x$/,
+        /^q-skeleton--anim-pulse-x\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-pulse-x'] ??
-            `animate-[q-skeleton--pulse-x_var(--q-skeleton-speed)_ease-in-out_0.5s_infinite]`
+            `animate-pulse-x`
     ],
     [
-        /^q-skeleton--anim-pulse-y$/,
+        /^q-skeleton--anim-pulse-y\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-pulse-y'] ??
-            `animate-[q-skeleton--pulse-y_var(--q-skeleton-speed)_ease-in-out_0.5s_infinite]`
+            `animate-pulse-y`
     ],
     [
-        /^q-skeleton--anim-wave$/,
+        /^q-skeleton--anim-wave\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-wave'] ??
-            `relative overflow-hidden [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] z-0) [&:after]:(bg-[linear-gradient(_90deg,_rgba(255,_255,_255,_0),_rgba(255,_255,_255,_0.5),_rgba(255,_255,_255,_0)_)] animate-[q-skeleton--wave_var(--q-skeleton-speed)_linear_0.5s_infinite])`
+            `relative overflow-hidden z-10 before:content-['\\00a0'] before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0 after:content-[''] after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:z-0 after:bg-gradient-to-r after:from-transparent after:via-white/50 after:to-transparent after:animate-wave`
     ],
     [
-        /^q-skeleton--anim-blink$/,
+        /^q-skeleton--anim-blink\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-blink'] ??
-            `relative overflow-hidden [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] z-0) [&:after]:(bg-[rgba(255,_255,_255,_0.7)] animate-[q-skeleton--fade_var(--q-skeleton-speed)_linear_0.5s_infinite])`
+            `relative overflow-hidden z-10 before:content-['\\00a0'] before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0 after:content-[''] after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:z-0 after:bg-white/70 after:animate-fade`
     ],
     [
-        /^q-skeleton--anim-pop$/,
+        /^q-skeleton--anim-pop\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-pop'] ??
-            `relative overflow-hidden [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] z-0)`
+            `relative overflow-hidden z-10 before:content-['\\00a0'] before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0 after:content-[''] after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:z-0`
     ],
     [
-        /^q-skeleton--dark$/,
+        /^q-skeleton--dark\$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--dark'] ??
-            `bg-[rgba(255,_255,_255,_0.05)] [&.q-skeleton--bordered]:(border-[1px] border-solid border-[rgba(255,255,255,0.25)]) [&.q-skeleton--anim-wave:after]:(bg-[linear-gradient(_90deg,_rgba(255,_255,_255,_0),_rgba(255,_255,_255,_0.1),_rgba(255,_255,_255,_0)_)]) [&.q-skeleton--anim-blink:after]:(bg-[rgba(255,_255,_255,_0.2)])`
+            `bg-white/5
+[&.q-skeleton--bordered]:(border border-white/25)
+[&.q-skeleton--anim-wave]:(after:bg-gradient-to-r after:from-transparent after:via-white/10 after:to-transparent)
+[&.q-skeleton--anim-blink]:(after:bg-white/20)`
     ]
 ];
 export { preflights, shortcuts };

package/dist/styles/md2/components/QTree.unocss.js

@@ -14,22 +14,22 @@ const shortcuts = [
     [
         /^q-tree$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tree'] ??
-            `relative text-[#9e9e9e] [&_>_.q-tree\\_\\_node]:(p-0) [&_>_.q-tree\\_\\_node:after]:(hidden) [&_>_.q-tree\\_\\_node_>_.q-tree\\_\\_node-header:before]:(hidden) [&_>_.q-tree\\_\\_node--child_>_.q-tree\\_\\_node-header]:(pl-[24px])`
+            `relative text-[#9e9e9e] [&_>_.q-tree\\_\\_node]:(p-0) [&_>_.q-tree\\_\\_node:after]:(hidden) [&_>_.q-tree\\_\\_node>_.q-tree\\_\\_node-header:before]:(hidden) [&_>_.q-tree\\_\\_node--child>_.q-tree\\_\\_node-header]:(pl-[24px])`
     ],
     [
         /^q-tree__node$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tree__node'] ??
-            `pt-[0] pr-[0] pb-[3px] pl-[22px] [&:after]:(content-empty absolute -top-[3px] bottom-[0] w-[2px] right-auto -left-[13px] [border-left:1px_solid_currentColor]) [&:last-child:after]:(hidden)`
+            `pt-[0] pr-[0] pb-[3px] pl-[22px] [&:after]:(content-empty absolute -top-[3px] bottom-[0] w-[2px] right-auto -left-[13px] border-left-current) [&:last-child:after]:(hidden)`
     ],
     [
         /^q-tree__node--disabled$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tree__node--disabled'] ??
-            `pointer-events-none [&_.disabled]:(!opacity-100) [&_>_div]:(!opacity-60) [&_>_i]:(!opacity-60) [&_>_.disabled]:(!opacity-60) [&_>_div_.q-tree\\_\\_node--disabled_>_div]:(!opacity-100) [&_>_div_.q-tree\\_\\_node--disabled_>_i]:(!opacity-100) [&_>_div_.q-tree\\_\\_node--disabled_>_.disabled]:(!opacity-100) [&_>_i_.q-tree\\_\\_node--disabled_>_div]:(!opacity-100) [&_>_i_.q-tree\\_\\_node--disabled_>_i]:(!opacity-100) [&_>_i_.q-tree\\_\\_node--disabled_>_.disabled]:(!opacity-100) [&_>_.disabled_.q-tree\\_\\_node--disabled_>_div]:(!opacity-100) [&_>_.disabled_.q-tree\\_\\_node--disabled_>_i]:(!opacity-100) [&_>_.disabled_.q-tree\\_\\_node--disabled_>_.disabled]:(!opacity-100)`
+            `pointer-events-none [&_.disabled]:(!opacity-100) [&>div]:(!opacity-60) [&>i]:(!opacity-60) [&>_.disabled]:(!opacity-60) [&>div_.q-tree\\_\\_node--disabled>div]:(!opacity-100) [&>div_.q-tree\\_\\_node--disabled>i]:(!opacity-100) [&>div_.q-tree\\_\\_node--disabled>_.disabled]:(!opacity-100) [&>i_.q-tree\\_\\_node--disabled>div]:(!opacity-100) [&>i_.q-tree\\_\\_node--disabled>i]:(!opacity-100) [&>i_.q-tree\\_\\_node--disabled>_.disabled]:(!opacity-100) [&>_.disabled_.q-tree\\_\\_node--disabled>div]:(!opacity-100) [&>_.disabled_.q-tree\\_\\_node--disabled>i]:(!opacity-100) [&>_.disabled_.q-tree\\_\\_node--disabled>_.disabled]:(!opacity-100)`
     ],
     [
         /^q-tree__node-header$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tree__node-header'] ??
-            `[&:before]:(content-empty absolute -top-[3px] bottom-2/4 w-[31px] -left-[35px] [border-left:1px_solid_currentColor] [border-bottom:1px_solid_currentColor]) p-[4px] mt-[3px] rounded-[4px] outline-[0]`
+            `[&:before]:(content-empty absolute -top-[3px] bottom-2/4 w-[31px] -left-[35px] border-left-current border-bottom-current) p-[4px] mt-[3px] rounded-[4px] outline-[0]`
     ],
     [
         /^q-tree__children$/,
@@ -43,7 +43,7 @@ const shortcuts = [
     [
         /^q-tree__node--parent$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tree__node--parent'] ??
-            `pl-[2px] [&_>_.q-tree\\_\\_node-header:before]:(w-[15px] -left-[15px]) [&_>_.q-tree\\_\\_node-collapsible_>_.q-tree\\_\\_node-body]:(pt-[5px] pr-[0] pb-[8px] pl-[27px]) [&_>_.q-tree\\_\\_node-collapsible_>_.q-tree\\_\\_node-body:after]:(content-empty absolute top-[0] w-[2px] h-full right-auto left-[12px] [border-left:1px_solid_currentColor] bottom-[50px])`
+            `pl-[2px] [&>_.q-tree__node-header:before]:(w-[15px] -left-[15px]) [&>_.q-tree__node-collapsible>_.q-tree__node-body]:(pt-[5px] pr-[0] pb-[8px] pl-[27px]) [&>_.q-tree__node-collapsible>_.q-tree__node-body:after]:(content-empty absolute top-[0] w-[2px] h-full right-auto left-[12px] border-left-current bottom-[50px])`
     ],
     [
         /^q-tree__node--link$/,
@@ -52,16 +52,16 @@ const shortcuts = [
     [
         /^q-tree__node-header-content$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tree__node-header-content'] ??
-            `text-[#000] [transition:color_0.3s] [&_.q-icon]:(text-[21px]) [&_.q-avatar]:(text-[28px] rounded-[50%] w-[28px] h-[28px])`
+            `text-[#000] [transition:color_0.3s] [&_.q-icon]:(text-21px) [&_.q-avatar]:(text-[28px] rounded-[50%] w-[28px] h-[28px])`
     ],
     [
         /^q-tree__node--selected$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tree__node--selected'] ??
-            `[&_.q-tree\\_\\_node-header-content]:(text-[#9e9e9e])`
+            `[&_.q-tree\\_\\_node--selected_.q-tree__node-header-content]:(text-[#9e9e9e])`
     ],
     [
         /^q-tree__icon$/,
-        ([, c], { theme }) => theme.quasar?.components?.['q-tree__icon'] ?? `text-[21px]`
+        ([, c], { theme }) => theme.quasar?.components?.['q-tree__icon'] ?? `text-21px`
     ],
     [
         /^q-tree__img$/,
@@ -84,7 +84,7 @@ const shortcuts = [
     [
         /^q-tree__arrow--rotate$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tree__arrow--rotate'] ??
-            `[transform:rotate3d(0,_0,_1,_90deg)]`
+            `[transform:rotate3d(0_0_1_90deg)]`
     ],
     [
         /^q-tree__tickbox$/,
@@ -93,22 +93,22 @@ const shortcuts = [
     [
         /^q-tree--dark$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tree--dark'] ??
-            `[&_.q-tree\\_\\_node-header-content]:(text-[#fff])`
+            `[&--dark] [&_.q-tree__node-header-content]:(text-[#fff])`
     ],
     [
         /^q-tree--no-connectors$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tree--no-connectors'] ??
-            `[&_.q-tree\\_\\_node:after]:(!hidden) [&_.q-tree\\_\\_node-header:before]:(!hidden) [&_.q-tree\\_\\_node-body:after]:(!hidden)`
+            `[&--no-connectors] [&_.q-tree__node:after]:(!hidden) [&--no-connectors] [&_.q-tree__node-header:before]:(!hidden) [&--no-connectors] [&_.q-tree__node-body:after]:(!hidden)`
     ],
     [
         /^q-tree--dense$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tree--dense'] ??
-            `[&_>_.q-tree\\_\\_node--child_>_.q-tree\\_\\_node-header]:(pl-px) [&_.q-tree\\_\\_arrow]:(mr-px) [&_.q-tree\\_\\_spinner]:(mr-px) [&_.q-tree\\_\\_img]:(h-[32px]) [&_.q-tree\\_\\_tickbox]:(mr-[3px]) [&_.q-tree\\_\\_node]:(p-0) [&_.q-tree\\_\\_node:after]:(top-[0] -left-[8px]) [&_.q-tree\\_\\_node-header]:(mt-0 p-px) [&_.q-tree\\_\\_node-header:before]:(top-[0] -left-[8px] w-[8px]) [&_.q-tree\\_\\_node--child]:(pl-[17px]) [&_.q-tree\\_\\_node--child_>_.q-tree\\_\\_node-header:before]:(-left-[25px] w-[21px]) [&_.q-tree\\_\\_node-body]:(pt-[0] px-[0] pb-[2px]) [&_.q-tree\\_\\_children]:(pl-[16px])`
+            `[&--dense] &>_.q-tree__node--child>_.q-tree__node-header:(pl-px) [&--dense] [&_.q-tree__arrow]:(mr-px) [&--dense] [&_.q-tree__spinner]:(mr-px) [&--dense] [&_.q-tree__img]:(h-[32px]) [&--dense] [&_.q-tree__tickbox]:(mr-[3px]) [&--dense] [&_.q-tree__node]:(p-0) [&--dense] [&_.q-tree__node:after]:(top-[0] -left-[8px]) [&--dense] [&_.q-tree__node-header]:(mt-0 p-px) [&--dense] [&_.q-tree__node-header:before]:(top-[0] -left-[8px] w-[8px]) [&--dense] &>_.q-tree__node--child>_.q-tree__node-header:(pl-[17px]) [&--dense] &>_.q-tree__node--child>_.q-tree__node-header:before:(-left-[25px] w-[21px]) [&--dense] [&_.q-tree__node-body]:(pt-[0] pr-[0] pb-[2px]) [&--dense] [&_.q-tree__children]:(pl-[16px])`
     ],
     [
         /^q-tree--dense$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tree--dense'] ??
-            `[&__.q-tree\\_\\_node--parent__>_.q-tree\\_\\_node-collapsible__>_.q-tree\\_\\_node-body]:(pt-[0] pr-[0] pb-[2px] pl-[20px]) [&__.q-tree\\_\\_node--parent__>_.q-tree\\_\\_node-collapsible__>_.q-tree\\_\\_node-body:after]:(left-[8px])`
+            `[&--dense] &__.q-tree__node--parent>_.q-tree__node-collapsible>_.q-tree__node-body:(pt-[0] pr-[0] pb-[2px] pl-[20px]) [&--dense] &__.q-tree__node--parent>_.q-tree__node-collapsible>_.q-tree__node-body:after:(left-[8px])`
     ]
 ];
 export { preflights, shortcuts };

package/dist/styles/md2/index.js

@@ -8,7 +8,6 @@ import { shortcuts as QBannerShortcuts } from './components/QBanner.unocss.js';
 import { shortcuts as QBarShortcuts } from './components/QBar.unocss.js';
 import { preflights as QBreadcrumbsPreflights, shortcuts as QBreadcrumbsShortcuts } from './components/QBreadcrumbs.unocss.js';
 import { shortcuts as QBtnDropdownShortcuts } from './components/QBtnDropdown.unocss.js';
-import { shortcuts as QBtnGroupShortcuts } from './components/QBtnGroup.unocss.js';
 import { shortcuts as QBtnToggleShortcuts } from './components/QBtnToggle.unocss.js';
 import { shortcuts as QCardShortcuts } from './components/QCard.unocss.js';
 import { shortcuts as QCarouselShortcuts } from './components/QCarousel.unocss.js';
@@ -79,7 +78,7 @@ const style = {
     variants: [],
     preflights: [].concat(QBreadcrumbsPreflights, QCheckboxPreflights, QChipPreflights, QCircularProgressPreflights, QDialogPreflights, QFieldPreflights, QLayoutPreflights, QLinearProgressPreflights, QRadioPreflights, QSelectPreflights, QSpinnerPreflights, QSkeletonPreflights, QTablePreflights, QTogglePreflights, QTreePreflights),
     rules: [].concat(),
-    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, QHeaderShortcuts, QFooterShortcuts, QDrawerShortcuts)
+    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 }) => { };
 export default style;

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

@@ -1,4 +1,52 @@
 const shortcuts = [
-    [/^q-btn-toggle$/, ([, c], { theme }) => `relative`]
+    [/^q-btn-toggle$/, ([, c], { theme }) => `relative`],
+    [
+        /^q-btn-group$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-btn-group'] ??
+            `!flex-initial
+      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-item]:(bg-transparent 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]) 
+      [&_>_.q-btn-item_.q-badge--floating]:(right-0) 
+      [&_>_.q-btn-group]:([box-shadow:none]) 
+      [&_>_.q-btn-group:first-child_>_.q-btn--active]:(!bg-light-secondary-container dark:!bg-dark-secondary-container) 
+      [&_>_.q-btn-group:first-child_>_.q-btn:first-child]:([border-top-left-radius:inherit] [border-bottom-left-radius:inherit]) 
+      [&_>_.q-btn-group:last-child_>_.q-btn:last-child]:([border-top-right-radius:inherit] [border-bottom-right-radius:inherit]) 
+      [&_>_.q-btn-group:not(:first-child)_>_.q-btn:first-child:before]:([border-left:0]) 
+      [&_>_.q-btn-group:not(:last-child)_>_.q-btn:last-child:before]:([border-right:0]) 
+      [&_>_.q-btn-item:not(:last-child)]:(rounded-tr-none rounded-br-none) 
+      [&_>_.q-btn-item:not(:first-child)]:(rounded-tl-none rounded-bl-none) 
+      [&_>_.q-btn-item.q-btn--standard:before]:(z--1)`
+    ],
+    [
+        /^q-btn-group--push$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-btn-group--push'] ??
+            `rounded-[7px] [&_>_.q-btn--push.q-btn--actionable]:(transform-none) [&_>_.q-btn--push.q-btn--actionable_.q-btn\\_\\_content]:([transition:margin-top_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1),_margin-bottom_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&_>_.q-btn--push.q-btn--actionable:active_.q-btn\\_\\_content]:(mt-[2px] -mb-[2px])
+    [&__>_.q-btn--push.q-btn--actionable.q-btn--active__.q-btn\\_\\_content]:(mt-[2px] -mb-[2px])`
+    ],
+    [/^q-btn-group--rounded$/, ([, c], { theme }) => `rounded-[28px]`],
+    [/^q-btn-group--square$/, ([, c], { theme }) => `rounded-none`],
+    [/^q-btn-group--flat$/, ([, c], { theme }) => `[box-shadow:none]`],
+    [
+        /^q-btn-group--outline$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-btn-group--outline'] ??
+            `[box-shadow:none] [&_>_.q-separator]:(hidden) [&_>_.q-btn-item_+_.q-btn-item:before]:([border-left:0]) [&_>_.q-btn-item:not(:last-child):before]:([border-right:0])`
+    ],
+    [/^q-btn-group--unelevated$/, ([, c], { theme }) => `[box-shadow:none]`],
+    [/^q-btn-group--stretch$/, ([, c], { theme }) => `self-stretch rounded-none`],
+    [
+        /^q-btn-group--glossy$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-btn-group--glossy'] ??
+            `[&_>_.q-btn-item]:(!bg-[linear-gradient(_to_bottom,_rgba(255,_255,_255,_0.3),_rgba(255,_255,_255,_0)_50%,_rgba(0,_0,_0,_0.12)_51%,_rgba(0,_0,_0,_0.04)_)])`
+    ],
+    [
+        /^q-btn-group--spread$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-btn-group--spread'] ??
+            `[&_>_.q-btn-group]:(!flex) [&_>_.q-btn-item]:(w-auto min-w-[0] max-w-full flex-[10000_1_0%])
+    [&__>_.q-btn-group_>_.q-btn-item:not(.q-btn-dropdown\\_\\_arrow-container)]:(w-auto min-w-[0] max-w-full flex-[10000_1_0%])`
+    ]
 ];
 export { shortcuts };