@salemcobalt/ui 0.2.0-rc.31 → 0.2.0-rc.33

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* @salemcobalt/ui 0.2.0-rc.31 — requires @salemcobalt/tokens/css. */
+/* @salemcobalt/ui 0.2.0-rc.33 — requires @salemcobalt/tokens/css. */
 @layer sc {
   /* ---- base.css ---- */
   /* Shared: focus ring, reduced motion. Component files follow. */
@@ -887,7 +887,7 @@
     max-inline-size: var(--_max);
     max-block-size: min(100dvh - 2 * var(--_gutter), 85dvh);
     block-size: fit-content;
-    overflow: auto;
+    overflow: hidden auto; /* vertical only: a 44px touch target on an edge button must not scroll it sideways */
     padding: var(--sc-spacing-lg);
     border-radius: var(--sc-radius-xl);
     background: var(--sc-color-surface-raised);
@@ -926,17 +926,20 @@
     font-weight: var(--sc-font-weight-semibold);
     letter-spacing: var(--sc-font-tracking-snug);
     padding-inline-end: var(--sc-spacing-xl);
+    text-wrap-style: balance;
   }
   .sc-dialog__description {
     margin: var(--sc-spacing-2xs) 0 0;
     font-size: var(--sc-font-size-sm);
     line-height: var(--sc-font-line-height-normal);
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   .sc-dialog__body {
     margin-block-start: var(--sc-spacing-md);
     font-size: var(--sc-font-size-sm);
     line-height: var(--sc-font-line-height-normal);
+    text-wrap-style: pretty;
   }
   /* Content wraps instead of widening the popup: long URLs break, fields and media stay inside the box. */
   .sc-dialog__title,
@@ -988,7 +991,7 @@
   .sc-dialog__popup[data-variant='sheet'] > .sc-dialog__body {
     flex: 1 1 auto;
     min-block-size: 0;
-    overflow: auto;
+    overflow: hidden auto; /* vertical only: a 44px touch target on an edge button must not scroll it sideways */
     overscroll-behavior: contain;
   }
   /* The sheet's grab handle shows only where the sheet docks. */
@@ -1119,7 +1122,7 @@
   .sc-dialog__popup[data-variant='fullscreen'] > .sc-dialog__body {
     flex: 1 1 auto;
     min-block-size: 0;
-    overflow: auto;
+    overflow: hidden auto; /* vertical only: a 44px touch target on an edge button must not scroll it sideways */
     overscroll-behavior: contain;
   }
   /* From 900px the backdrop shows a margin around it, so it still reads as a layer over the app. */
@@ -1269,7 +1272,7 @@
     min-inline-size: 180px;
     max-inline-size: min(100vw - 2 * var(--sc-spacing-md), 320px);
     max-block-size: var(--available-height);
-    overflow: auto;
+    overflow: hidden auto; /* vertical only: a 44px touch target on an edge button must not scroll it sideways */
     padding: var(--sc-spacing-2xs);
     border-radius: var(--sc-radius-lg);
     background: var(--sc-color-surface-raised);
@@ -1360,6 +1363,7 @@
     min-inline-size: 0;
     color: var(--sc-color-text-muted);
     font-size: var(--sc-font-size-xs);
+    text-wrap-style: pretty;
   }
   .sc-menu__trailing {
     grid-column: 3;
@@ -1442,11 +1446,13 @@
     margin: 0;
     color: var(--sc-color-text-muted);
     font-size: var(--sc-font-size-xs);
+    text-wrap-style: pretty;
   }
   .sc-field__error {
     margin: 0;
     color: var(--sc-color-danger-text);
     font-size: var(--sc-font-size-xs);
+    text-wrap-style: pretty;
   }
   /* Input */
   .sc-input-wrap {
@@ -1785,6 +1791,7 @@
     grid-column: 2;
     color: var(--sc-color-text-muted);
     font-size: var(--sc-font-size-xs);
+    text-wrap-style: pretty;
   }
   .sc-choice[data-label-position='start'] > .sc-choice__description {
     grid-column: 1;
@@ -2317,7 +2324,7 @@
     inline-size: max-content;
     max-inline-size: min(100vw - 2 * var(--sc-spacing-md), 360px);
     max-block-size: var(--available-height);
-    overflow: auto;
+    overflow: hidden auto; /* vertical only: a 44px touch target on an edge button must not scroll it sideways */
     padding: var(--sc-spacing-md);
     border-radius: var(--sc-radius-lg);
     background: var(--sc-color-surface-raised);
@@ -2355,6 +2362,7 @@
     font-size: var(--sc-font-size-md);
     line-height: var(--sc-font-line-height-snug);
     font-weight: var(--sc-font-weight-semibold);
+    text-wrap-style: balance;
   }
   .sc-popover__title:has(~ .sc-popover__close),
   .sc-popover__close ~ .sc-popover__title {
@@ -2363,6 +2371,7 @@
   .sc-popover__description {
     margin: var(--sc-spacing-2xs) 0 0;
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   .sc-popover__close {
     position: absolute;
@@ -2859,6 +2868,7 @@
     font-size: var(--sc-font-size-xs);
     text-align: start;
     caption-side: top;
+    text-wrap-style: pretty;
   }
   .sc-table__header,
   .sc-table__cell {
@@ -3167,11 +3177,13 @@
     margin: 0;
     font-size: inherit;
     font-weight: var(--sc-font-weight-medium);
+    text-wrap-style: balance;
   }
   .sc-toast__description {
     margin: 0;
     color: var(--sc-color-text-muted);
     font-size: var(--sc-font-size-xs);
+    text-wrap-style: pretty;
   }
   .sc-toast__action,
   .sc-toast__close {
@@ -3276,6 +3288,7 @@
     grid-area: hint;
     color: var(--sc-color-text-muted);
     font-size: var(--sc-font-size-xs);
+    text-wrap-style: pretty;
   }
   
   /* ---- chip.css ---- */
@@ -5042,6 +5055,7 @@
   .sc-file-preview__note {
     margin: var(--sc-spacing-xs) 0 0;
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   .sc-file-preview__tab > .sc-file-preview__note {
     margin: 0;
@@ -5282,6 +5296,7 @@
     background: var(--sc-color-surface-sunken);
     font-size: var(--sc-font-size-xs);
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   @media (height <= 820px) {
     .sc-flow__rail-note {
@@ -5386,6 +5401,7 @@
   .sc-flow__step-description {
     max-inline-size: 60ch;
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   
   /* Footer: back at the start, hint and primary action at the end, every button a 44px target. */
@@ -5639,6 +5655,7 @@
     font-size: var(--sc-font-size-sm);
     line-height: var(--sc-font-line-height-ui);
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   .sc-reason-list[data-size='sm'] {
     --_m: 7px;
@@ -5776,6 +5793,7 @@
     font-size: var(--sc-font-size-sm);
     line-height: var(--sc-font-line-height-ui);
     color: var(--sc-color-text-muted);
+    text-wrap-style: pretty;
   }
   .sc-quote__label {
     display: inline;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salemcobalt/ui",
-  "version": "0.2.0-rc.31",
+  "version": "0.2.0-rc.33",
   "description": "React components for the Salem Cobalt design system: Button, IconButton, Icon set, BroomIcon, Badge, Card, Stack, Inline, Kbd, Dialog, FullScreenFlow, Tooltip, Menu, Popover, PriorityNav, Toolbar, Banner, Spinner, Progress, Tabs, Input, Textarea, Select, FileInput, Checkbox, Switch, Heading, Text, Table, Stat, Chip, Disclosure, EmptyState, Skeleton, Score, ReasonList, WordDiff, Quote; TextEditor (CodeMirror 6, inline word diffs) at @salemcobalt/ui/editor.",
   "license": "MIT",
   "repository": {
@@ -46,7 +46,7 @@
     "diff": "^8.0.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@salemcobalt/tokens": "^0.2.0-rc.31"
+    "@salemcobalt/tokens": "^0.2.0-rc.33"
   },
   "peerDependenciesMeta": {
     "@codemirror/commands": {
@@ -109,7 +109,7 @@
     "tsup": "^9.0.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.5",
-    "@salemcobalt/tokens": "^0.2.0-rc.31"
+    "@salemcobalt/tokens": "^0.2.0-rc.33"
   },
   "publishConfig": {
     "access": "public"