@rpgjs/ui-css 5.0.0-beta.1 → 5.0.0-beta.10

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (C) 2026 by Samuel Ronce
+
+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:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/ui-css",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.10",
   "description": "CSS library for RPG UI components - framework-agnostic and fully customizable",
   "license": "MIT",
   "author": "Samuel Ronce",
@@ -29,7 +29,7 @@
     "framework-agnostic"
   ],
   "devDependencies": {
-    "vite": "^7.3.0"
+    "vite": "^8.0.10"
   },
   "scripts": {
     "build": "echo 'CSS package - no build needed'"

package/src/primitives/dialog.css

@@ -25,18 +25,28 @@
 }
 
 .rpg-ui-dialog-container[data-full-width="false"] .rpg-ui-dialog {
+  width: min(720px, 100%);
+  max-width: 100%;
   margin-left: auto;
   margin-right: auto;
 }
 
 .rpg-ui-dialog {
+  --rpg-ui-dialog-min-height: 256px;
+  --rpg-ui-dialog-padding: 24px;
+  --rpg-ui-dialog-face-margin: 8px;
+  --rpg-ui-dialog-face-size: calc(
+    var(--rpg-ui-dialog-min-height) -
+    var(--rpg-ui-dialog-padding) * 2 -
+    var(--rpg-ui-dialog-face-margin) * 2
+  );
   background: var(--rpg-ui-surface);
   border: 4px solid var(--rpg-ui-border);
   border-radius: var(--rpg-ui-radius-lg);
-  padding: 24px;
+  padding: var(--rpg-ui-dialog-padding);
   position: relative;
   box-shadow: var(--rpg-ui-shadow-lg);
-  min-height: 256px;
+  min-height: var(--rpg-ui-dialog-min-height);
   display: flex;
   flex-direction: column;
   margin-top: 24px;
@@ -116,20 +126,26 @@
   justify-content: flex-start;
   flex-direction: row;
   flex-wrap: nowrap;
+  flex: 1 1 auto;
   min-height: 128px;
   width: 100%;
 }
 
+.rpg-ui-dialog-body > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 .rpg-ui-dialog-face {
   flex: 0 0 auto;
-  width: 96px;
-  height: 96px;
-  align-self: flex-start;
-  border-radius: var(--rpg-ui-radius-sm);
+  width: var(--rpg-ui-dialog-face-size);
+  height: var(--rpg-ui-dialog-face-size);
+  align-self: center;
+  margin: var(--rpg-ui-dialog-face-margin) 0;
   overflow: hidden;
-  background: var(--rpg-ui-border-dark);
-  border: 2px solid var(--rpg-ui-border);
-  box-shadow: var(--rpg-ui-shadow);
+  background: transparent;
+  border: 0;
+  box-shadow: none;
   display: flex;
   align-items: center;
   justify-content: center;

package/theme-default/theme.css

@@ -264,6 +264,7 @@
 }
 
 .rpg-ui-dialog {
+  --rpg-ui-dialog-min-height: 220px;
   min-height: 220px;
 }
 
@@ -282,9 +283,9 @@
 }
 
 .rpg-ui-dialog-face {
-  border-width: 1px;
-  border-color: rgba(255, 255, 255, 0.1);
-  background: rgba(0, 0, 0, 0.28);
+  border: 0;
+  background: transparent;
+  box-shadow: none;
 }
 
 .rpg-ui-dialog-indicator {