fix(dialog): add default position for dialog close button

Author: lepture

docs/examples/dialog/Overview.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
   Button,
+  CloseButton,
   DialogRoot,
   DialogTrigger,
   DialogPopup,
@@ -33,6 +34,7 @@ import {
         <Button variant="classic" color="gray" :as="DialogClose">Cancel</Button>
         <Button>Save</Button>
       </div>
+      <CloseButton :as="DialogClose" />
     </DialogPopup>
   </DialogRoot>
 </template>

src/components/dialog/style.css

@@ -45,11 +45,16 @@
     max-height: var(--dialog-popup-max-height);
     padding: var(--dialog-popup-padding);
   }
-}
 
+  :where(.ui-DialogPopup) .ui-CloseButton {
+    position: absolute;
+    top: calc(var(--dialog-popup-padding) / 2);
+    right: calc(var(--dialog-popup-padding) / 2);
+  }
+}
 
 .ui-DialogPopup:where(.r-size-1) {
-  --dialog-popup-padding: var(--space-3);
+  --dialog-popup-padding: var(--space-4);
   --dialog-popup-radius: var(--radius-4);
   --dialog-popup-max-width: 450px;
   --dialog-popup-max-height: calc(100vh - 100px);
@@ -67,7 +72,7 @@
   --dialog-popup-max-height: calc(100vh - 100px);
 }
 .ui-DialogPopup:where(.r-size-4) {
-  --dialog-popup-padding: var(--space-6);
+  --dialog-popup-padding: var(--space-5);
   --dialog-popup-radius: var(--radius-5);
   --dialog-popup-max-width: 1200px;
   --dialog-popup-max-height: calc(100vh - 100px);
@@ -86,11 +91,12 @@
     padding-left: var(--space-4);
     padding-right: var(--space-4);
   }
-
-  .ui-DialogPopup {
-    box-shadow: var(--shadow-6);
-    border-bottom-left-radius: var(--dialog-popup-radius);
-    border-bottom-right-radius: var(--dialog-popup-radius);
+  @layer components {
+    .ui-DialogPopup {
+      box-shadow: var(--shadow-6);
+      border-bottom-left-radius: var(--dialog-popup-radius);
+      border-bottom-right-radius: var(--dialog-popup-radius);
+    }
   }
 }
 

src/components/radio/RadioGroupItem.vue

@@ -39,10 +39,12 @@ const resetClass = buildPropsClass(props, ['size', 'variant', 'highContrast'])
 <style src="./style.css"></style>
 
 <style>
-.ui-RadioGroupItem {
-  display: inline-flex;
-  align-items: center;
-  gap: .5em;
-  width: fit-content;
+@layer components {
+  .ui-RadioGroupItem {
+    display: inline-flex;
+    align-items: center;
+    gap: .5em;
+    width: fit-content;
+  }
 }
 </style>