@nadicodeai/design-system 12.1.83 → 12.1.85

package/DESIGN.md

@@ -469,7 +469,7 @@ Geist and Geist Mono are the two families. The role scale follows the measured [
 | `{typography.body-compact}` | 13 / 18 px | Dense secondary copy. |
 | `{typography.code}` | 13 / 18 px | Inline code or code block. |
 
-A token has one size at every width; nothing is sized in `vw` or `vh`. A role includes family, size, line height, weight and tracking together. Use the shared `nc-type-*` classes or the generated `text-<token>` utilities, such as `text-display-md`, with `font-label-mono` for the `label-mono` family and `font-code` for `code`, rather than assembling role metrics at a call site. Existing `text-xs`, `text-sm` and `text-base` body sizes match `caption`, `body-sm` and `body-md`. Card, panel and section titles are sentence-case Geist. Headings use weight 600 and their optical negative tracking. A softer run inside a heading uses 500; a strong run inside a label uses 500; strong paragraph copy uses 550. Labels align single lines and icons; paragraphs use the copy roles and can wrap. Numeric comparisons use tabular digits, and identifiers use mono. Semantic heading levels express document structure independently of visual size. Never shrink type to fit: wrap, reflow or move supporting detail.
+A token has one size at every width; nothing is sized in `vw` or `vh`. A role includes family, size, line height, weight and tracking together. Use the shared `nc-type-*` classes or the generated `text-<token>` utilities, such as `text-display-md`, with `font-label-mono` for the `label-mono` family and `font-code` for `code`, rather than assembling role metrics at a call site. Existing `text-xs`, `text-sm` and `text-base` body sizes match `caption`, `body-sm` and `body-md`. Card, panel and section titles are sentence-case Geist. Headings use weight 600 and their optical negative tracking. A softer run inside a heading uses 500; a strong run inside a label uses 500; strong paragraph copy uses 550. Labels align single lines and icons; paragraphs use the copy roles and can wrap. Headings and the heading and display roles wrap balanced, so no line of a title is left short; copy wraps pretty, so a paragraph never ends on a lone word; centred copy wraps balanced, whatever its role. The type layer applies this, Nadia's skin takes it with the roles and Alveare's type adapter with its type steps, so a screen sets text wrapping only to depart from it. Numeric comparisons use tabular digits, and identifiers use mono. Semantic heading levels express document structure independently of visual size. Never shrink type to fit: wrap, reflow or move supporting detail.
 
 ### The website's text
 

package/dist/css/index.css

@@ -806,6 +806,17 @@
       -apple-system,
       sans-serif;
   }
+  body {
+    text-wrap-style: pretty;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-wrap-style: balance;
+  }
   :focus-visible {
     outline: var(--nc-focus-outline-width) solid var(--nc-focus-ring);
     outline-offset: var(--nc-focus-outline-offset);
@@ -874,6 +885,7 @@
     font-weight: var(--nc-type-display-xl-font-weight);
     line-height: var(--nc-type-display-xl-line-height);
     letter-spacing: var(--nc-type-display-xl-letter-spacing);
+    text-wrap-style: balance;
   }
   .nc-type-display-wide {
     font-family: var(--nc-type-display-wide-font-family);
@@ -881,6 +893,7 @@
     font-weight: var(--nc-type-display-wide-font-weight);
     line-height: var(--nc-type-display-wide-line-height);
     letter-spacing: var(--nc-type-display-wide-letter-spacing);
+    text-wrap-style: balance;
   }
   .nc-type-display-lg {
     font-family: var(--nc-type-display-lg-font-family);
@@ -888,6 +901,7 @@
     font-weight: var(--nc-type-display-lg-font-weight);
     line-height: var(--nc-type-display-lg-line-height);
     letter-spacing: var(--nc-type-display-lg-letter-spacing);
+    text-wrap-style: balance;
   }
   .nc-type-display-section {
     font-family: var(--nc-type-display-section-font-family);
@@ -895,6 +909,7 @@
     font-weight: var(--nc-type-display-section-font-weight);
     line-height: var(--nc-type-display-section-line-height);
     letter-spacing: var(--nc-type-display-section-letter-spacing);
+    text-wrap-style: balance;
   }
   .nc-type-display-md {
     font-family: var(--nc-type-display-md-font-family);
@@ -902,6 +917,7 @@
     font-weight: var(--nc-type-display-md-font-weight);
     line-height: var(--nc-type-display-md-line-height);
     letter-spacing: var(--nc-type-display-md-letter-spacing);
+    text-wrap-style: balance;
   }
   .nc-type-heading-lg {
     font-family: var(--nc-type-heading-lg-font-family);
@@ -909,6 +925,7 @@
     font-weight: var(--nc-type-heading-lg-font-weight);
     line-height: var(--nc-type-heading-lg-line-height);
     letter-spacing: var(--nc-type-heading-lg-letter-spacing);
+    text-wrap-style: balance;
   }
   .nc-type-heading-md {
     font-family: var(--nc-type-heading-md-font-family);
@@ -916,6 +933,7 @@
     font-weight: var(--nc-type-heading-md-font-weight);
     line-height: var(--nc-type-heading-md-line-height);
     letter-spacing: var(--nc-type-heading-md-letter-spacing);
+    text-wrap-style: balance;
   }
   .nc-type-heading-sm {
     font-family: var(--nc-type-heading-sm-font-family);
@@ -923,6 +941,7 @@
     font-weight: var(--nc-type-heading-sm-font-weight);
     line-height: var(--nc-type-heading-sm-line-height);
     letter-spacing: var(--nc-type-heading-sm-letter-spacing);
+    text-wrap-style: balance;
   }
   .nc-type-heading-xs {
     font-family: var(--nc-type-heading-xs-font-family);
@@ -930,6 +949,7 @@
     font-weight: var(--nc-type-heading-xs-font-weight);
     line-height: var(--nc-type-heading-xs-line-height);
     letter-spacing: var(--nc-type-heading-xs-letter-spacing);
+    text-wrap-style: balance;
   }
   .nc-type-heading-compact {
     font-family: var(--nc-type-heading-compact-font-family);
@@ -937,6 +957,7 @@
     font-weight: var(--nc-type-heading-compact-font-weight);
     line-height: var(--nc-type-heading-compact-line-height);
     letter-spacing: var(--nc-type-heading-compact-letter-spacing);
+    text-wrap-style: balance;
   }
   .nc-type-button-lg {
     font-family: var(--nc-type-button-lg-font-family);
@@ -1028,6 +1049,7 @@
     font-weight: var(--nc-type-body-display-font-weight);
     line-height: var(--nc-type-body-display-line-height);
     letter-spacing: var(--nc-type-body-display-letter-spacing);
+    text-wrap-style: pretty;
   }
   .nc-type-body-lead {
     font-family: var(--nc-type-body-lead-font-family);
@@ -1035,6 +1057,7 @@
     font-weight: var(--nc-type-body-lead-font-weight);
     line-height: var(--nc-type-body-lead-line-height);
     letter-spacing: var(--nc-type-body-lead-letter-spacing);
+    text-wrap-style: pretty;
   }
   .nc-type-body-lg {
     font-family: var(--nc-type-body-lg-font-family);
@@ -1042,6 +1065,7 @@
     font-weight: var(--nc-type-body-lg-font-weight);
     line-height: var(--nc-type-body-lg-line-height);
     letter-spacing: var(--nc-type-body-lg-letter-spacing);
+    text-wrap-style: pretty;
   }
   .nc-type-body-md {
     font-family: var(--nc-type-body-md-font-family);
@@ -1049,6 +1073,7 @@
     font-weight: var(--nc-type-body-md-font-weight);
     line-height: var(--nc-type-body-md-line-height);
     letter-spacing: var(--nc-type-body-md-letter-spacing);
+    text-wrap-style: pretty;
   }
   .nc-type-body-sm {
     font-family: var(--nc-type-body-sm-font-family);
@@ -1056,6 +1081,7 @@
     font-weight: var(--nc-type-body-sm-font-weight);
     line-height: var(--nc-type-body-sm-line-height);
     letter-spacing: var(--nc-type-body-sm-letter-spacing);
+    text-wrap-style: pretty;
   }
   .nc-type-body-compact {
     font-family: var(--nc-type-body-compact-font-family);
@@ -1063,6 +1089,7 @@
     font-weight: var(--nc-type-body-compact-font-weight);
     line-height: var(--nc-type-body-compact-line-height);
     letter-spacing: var(--nc-type-body-compact-letter-spacing);
+    text-wrap-style: pretty;
   }
   .nc-type-code {
     font-family: var(--nc-type-code-font-family);
@@ -1080,6 +1107,14 @@
   :is(.nc-type-body-display, .nc-type-body-lead, .nc-type-body-lg, .nc-type-body-md, .nc-type-body-sm, .nc-type-body-compact) strong {
     font-weight: 550;
   }
+  .text-center,
+  .text-center :is(.nc-type-body-display, .nc-type-body-lead, .nc-type-body-lg, .nc-type-body-md, .nc-type-body-sm, .nc-type-body-compact) {
+    text-wrap-style: balance;
+  }
+  textarea,
+  [contenteditable]:not([contenteditable=false]) {
+    text-wrap-style: auto;
+  }
 }
 
 /* src/css/motion.css */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "12.1.83",
+  "version": "12.1.85",
   "type": "module",
   "publishConfig": {
     "access": "public"