@apliteni/apliteni-ui 0.54.0 → 0.55.0

package/guidelines/component-choice.md

@@ -20,7 +20,7 @@
 
 **Why:** A confirm keeps keyboard focus until answered; a callout does not interrupt.
 
-**Except:** Use a drawer when the answer needs a form instead of two buttons.
+**Except:** Use a content-sized modal for a short form and a drawer for a long form.
 
 **Do:** Ask “Rotate this token?” in a confirm with “Keep token” and “Rotate token” buttons.
 

package/guidelines/drawer.md

@@ -26,15 +26,15 @@
 
 **Don't:** Put each group in a card inside the drawer.
 
-## Three divider lines
+## Header and group dividers
 
 <!-- rule: three-lines -->
 
-**Rule:** Draw lines under the header, over the footer, and between each group; draw no other lines.
+**Rule:** Add lines below the header and between groups. Leave the footer unfilled and without a rule.
 
-**Why:** These lines mark scrolling boundaries and separate groups, not rows.
+**Why:** The header line marks the scrolling body; group lines separate content, and actions share the panel surface.
 
-**Do:** Separate header, footer and groups.
+**Do:** Separate the header and groups.
 
 **Don't:** Add dividers between every row.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.54.0",
+  "version": "0.55.0",
   "workspaces": [
     "react"
   ],

package/react/dist/index.css

@@ -30,8 +30,7 @@
 .rx-scrim {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, .55);
-  backdrop-filter: blur(2px);
+  background: color-mix(in srgb, var(--shadow-ink) 82%, transparent);
   display: grid;
   place-items: center;
   z-index: calc(var(--z-overlay) + 1);
@@ -42,14 +41,18 @@
   opacity: 1;
 }
 .rx-modal {
-  width: min(480px, 92vw);
+  width: min(calc(var(--panel-lg) - var(--space-10) * 2), 96vw);
+  max-height: 96vh;
+  max-height: 96dvh;
+  display: flex;
+  flex-direction: column;
   background: var(--bg-elevated);
   --ring-gap: var(--bg-elevated);
-  border: 1px solid var(--border-strong);
-  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
-  border-radius: var(--radius-xl);
+  border: 0;
+  box-shadow: var(--elev-drop);
+  border-radius: var(--radius-md);
   overflow: hidden;
-  transform: translateY(8px);
+  transform: translateY(var(--space-2));
   transition: transform var(--dur-med) var(--ease);
 }
 .rx-scrim.is-open .rx-modal {
@@ -59,25 +62,38 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 20px;
+  gap: var(--space-3);
+  flex: none;
+  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
   border-bottom: 1px solid var(--border);
 }
 .rx-modal__title {
-  font-weight: 600;
-  font-size: var(--text-lg);
+  font-weight: var(--weight-normal);
+  font-size: var(--text-base);
+  color: var(--text);
 }
 .rx-modal__body {
-  padding: 20px;
+  padding: var(--space-4);
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--space-4);
+  min-height: 0;
+  overflow: auto;
+}
+.rx-modal__body > * {
+  flex-shrink: 0;
 }
 .rx-modal__foot {
   display: flex;
   justify-content: flex-end;
-  gap: 12px;
-  padding: 16px 20px;
-  border-top: 1px solid var(--border);
+  gap: var(--space-3);
+  flex: none;
+  padding: var(--space-4);
+}
+.rx-modal__head > .ui-btn {
+  width: calc(var(--space-10) + var(--space-1));
+  height: calc(var(--space-10) + var(--space-1));
+  flex: none;
 }
 
 /* src/DataTable.css */

package/src/styles/drawer.css

@@ -127,16 +127,13 @@
 .ui-drawer--top.ui-drawer--lg, .ui-drawer--bottom.ui-drawer--lg { --drawer-h: 72vh; }
 
 /* -- Slots ----------------------------------------------------------------- */
-/* The header keeps its rule, and the footer keeps its. A drawer's normal state is a
-   long record scrolling, and those two lines are what say where the scrolling body
-   ends: the one place inside the panel a line still earns.
-   why: docs/specification.md#the-drawer */
+/* The header marks the scroll boundary; actions share the panel surface. */
 .ui-drawer__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 18px 20px;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-5);
   border-bottom: 1px solid var(--border);
   flex: none;
 }
@@ -188,10 +185,8 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 10px;
-  padding: 16px 20px;
-  border-top: 1px solid var(--border);
-  background: var(--surface-2); --ring-gap: var(--surface-2);
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-5);
   flex: none;
 }