unipo-ui 1.0.1 → 1.0.2

package/dist/registry.json

@@ -1,5 +1,5 @@
 {
- "version": "1.0.1",
+ "version": "1.0.2",
  "versions": {
   "sass": "1.108.2",
   "tsup": "8.5.1",
@@ -14,7 +14,7 @@
   "@base-ui/react": "1.9.0",
   "lucide-react": "1.73.0",
   "country-flag-icons": "1.6.20",
-  "unipo-ui-tokens": "1.0.1"
+  "unipo-ui-tokens": "1.0.2"
  },
  "files": {
   "components/actions.tsx": {

package/dist/scss/components/_display.scss

@@ -89,9 +89,38 @@
   > svg {
     width: 1.125rem;
     height: 1.125rem;
-    margin-top: 0.0625rem;
+    // Tengah baris pertama (judul 1.4 × text-base, atau deskripsi 1.5 × text-sm bila tanpa judul).
+    margin-top: calc((var(--u-text-base) * 1.4 - 1.125rem) / 2);
     color: var(--u-alert-accent);
   }
+  // Teks di dalam alert kebal terhadap margin CSS halaman (mis. `.prose p { margin: 1em 0 }` di artikel/markdown),
+  // supaya ikon tetap sejajar judul dan jarak atas = jarak bawah.
+  .u-alert-title {
+    margin: 0;
+  }
+  .u-alert-description {
+    margin: 0;
+    // Ukuran dan tinggi baris milik alert, bukan milik pembungkus dari halaman (mis. hasil markdown).
+    :where(div, p, ul, ol, li) {
+      font-size: inherit;
+      line-height: inherit;
+    }
+    :first-child {
+      margin-top: 0;
+    }
+    :last-child {
+      margin-bottom: 0;
+    }
+    :where(p, ul, ol) {
+      margin-block: 0.375rem;
+    }
+  }
+  .u-alert-title + .u-alert-description {
+    margin-top: 0.125rem;
+  }
+  &:not(:has(.u-alert-title)) > svg {
+    margin-top: calc((var(--u-text-sm) * 1.5 - 1.125rem) / 2);
+  }
   &[data-variant='info'] {
     --u-alert-accent: var(--u-info);
     background: var(--u-info-soft);
@@ -591,14 +620,18 @@
     height: 1.25rem;
   }
 }
-.u-empty-title {
+.u-empty .u-empty-title {
   margin: 0;
+}
+.u-empty-title {
   font-size: var(--u-text-md);
   font-weight: 600;
 }
+.u-empty .u-empty-description {
+  margin: 0;
+}
 .u-empty-description {
   max-width: 24rem;
-  margin: 0;
   color: var(--u-muted-foreground);
   font-size: var(--u-text-sm);
   line-height: 1.5;

package/dist/scss/components/_status.scss

@@ -56,16 +56,20 @@
   flex: 1;
   min-width: 0;
 }
-.u-status-banner-title {
+.u-status-banner .u-status-banner-title {
   margin: 0;
+}
+.u-status-banner-title {
   font-family: var(--u-font-heading, var(--u-font-sans));
   font-size: 1.1875rem;
   font-weight: 700;
   letter-spacing: -0.01em;
   line-height: 1.3;
 }
-.u-status-banner-note {
+.u-status-banner .u-status-banner-note {
   margin: 0.125rem 0 0;
+}
+.u-status-banner-note {
   color: color-mix(in oklab, white 82%, transparent);
   font-size: var(--u-text-sm);
   font-variant-numeric: tabular-nums;

package/dist/scss/components/_wizard.scss

@@ -31,14 +31,18 @@
     display: none;
   }
 }
-.u-wizard-intro-title {
+.u-wizard .u-wizard-intro-title {
   margin: 0;
+}
+.u-wizard-intro-title {
   font-family: var(--u-font-heading);
   font-weight: var(--u-weight-semibold);
   font-size: 1rem;
 }
-.u-wizard-intro-desc {
+.u-wizard .u-wizard-intro-desc {
   margin: 0.25rem 0 0;
+}
+.u-wizard-intro-desc {
   font-size: var(--u-text-sm);
   color: var(--u-muted-foreground);
   line-height: 1.5;

package/dist/ui-unipo.css

@@ -2201,9 +2201,34 @@
 .u-alert > svg {
   width: 1.125rem;
   height: 1.125rem;
-  margin-top: 0.0625rem;
+  margin-top: calc((var(--u-text-base) * 1.4 - 1.125rem) / 2);
   color: var(--u-alert-accent);
 }
+.u-alert .u-alert-title {
+  margin: 0;
+}
+.u-alert .u-alert-description {
+  margin: 0;
+}
+.u-alert .u-alert-description :where(div, p, ul, ol, li) {
+  font-size: inherit;
+  line-height: inherit;
+}
+.u-alert .u-alert-description :first-child {
+  margin-top: 0;
+}
+.u-alert .u-alert-description :last-child {
+  margin-bottom: 0;
+}
+.u-alert .u-alert-description :where(p, ul, ol) {
+  margin-block: 0.375rem;
+}
+.u-alert .u-alert-title + .u-alert-description {
+  margin-top: 0.125rem;
+}
+.u-alert:not(:has(.u-alert-title)) > svg {
+  margin-top: calc((var(--u-text-sm) * 1.5 - 1.125rem) / 2);
+}
 .u-alert[data-variant=info] {
   --u-alert-accent: var(--u-info);
   background: var(--u-info-soft);
@@ -2728,15 +2753,21 @@
   height: 1.25rem;
 }
 
-.u-empty-title {
+.u-empty .u-empty-title {
   margin: 0;
+}
+
+.u-empty-title {
   font-size: var(--u-text-md);
   font-weight: 600;
 }
 
+.u-empty .u-empty-description {
+  margin: 0;
+}
+
 .u-empty-description {
   max-width: 24rem;
-  margin: 0;
   color: var(--u-muted-foreground);
   font-size: var(--u-text-sm);
   line-height: 1.5;
@@ -5691,8 +5722,11 @@ button.u-step-marker:focus-visible {
   min-width: 0;
 }
 
-.u-status-banner-title {
+.u-status-banner .u-status-banner-title {
   margin: 0;
+}
+
+.u-status-banner-title {
   font-family: var(--u-font-heading, var(--u-font-sans));
   font-size: 1.1875rem;
   font-weight: 700;
@@ -5700,8 +5734,11 @@ button.u-step-marker:focus-visible {
   line-height: 1.3;
 }
 
-.u-status-banner-note {
+.u-status-banner .u-status-banner-note {
   margin: 0.125rem 0 0;
+}
+
+.u-status-banner-note {
   color: color-mix(in oklab, white 82%, transparent);
   font-size: var(--u-text-sm);
   font-variant-numeric: tabular-nums;
@@ -7242,15 +7279,21 @@ button.u-step-marker:focus-visible {
     display: none;
   }
 }
-.u-wizard-intro-title {
+.u-wizard .u-wizard-intro-title {
   margin: 0;
+}
+
+.u-wizard-intro-title {
   font-family: var(--u-font-heading);
   font-weight: var(--u-weight-semibold);
   font-size: 1rem;
 }
 
-.u-wizard-intro-desc {
+.u-wizard .u-wizard-intro-desc {
   margin: 0.25rem 0 0;
+}
+
+.u-wizard-intro-desc {
   font-size: var(--u-text-sm);
   color: var(--u-muted-foreground);
   line-height: 1.5;