@tensor_1/tokens 2.19.0 → 2.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.19.0",
+  "version": "2.19.2",
   "description": "UIx v2 design tokens — the --uix-* contract for house products (Tensor, POSx, SHOPx). One DTCG source -> CSS variables, Tailwind theme, and typed TS constants.",
   "type": "module",
   "sideEffects": [

package/styles/components/card.css

@@ -5,7 +5,8 @@
   .uix-card__title { font-size: var(--uix-text-h3); font-weight: 600; }
   .uix-card__subtitle { font-size: var(--uix-text-meta); color: var(--uix-text-muted); margin-top: var(--uix-space-1); }
   .uix-card__body { padding: var(--uix-space-6); }
-  .uix-card__footer { padding: var(--uix-space-4) var(--uix-space-6); border-top: 1px solid var(--uix-border); display: flex; gap: var(--uix-space-2); justify-content: flex-end; }
+  /* wraps at 320 px (WCAG 1.4.10) */
+  .uix-card__footer { padding: var(--uix-space-4) var(--uix-space-6); border-top: 1px solid var(--uix-border); display: flex; flex-wrap: wrap; gap: var(--uix-space-2); justify-content: flex-end; }
   .uix-card--interactive { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-card--interactive:is(:hover, :focus-visible) { border-color: var(--uix-border-strong); box-shadow: var(--uix-shadow-md); text-decoration: none; transform: translateY(-1px); }
   .uix-card--interactive:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }

package/styles/components/comments.css

@@ -22,7 +22,8 @@
   .uix-composer:focus-within { border-color: var(--uix-ring); box-shadow: 0 0 0 3px var(--uix-brand-muted); }
   .uix-composer textarea { width: 100%; border: 0; background: transparent; resize: vertical; padding: var(--uix-space-3) var(--uix-space-3); color: var(--uix-text); font: inherit; min-height: 60px; }
   .uix-composer textarea:focus { outline: none; }
-  .uix-composer__bar { display: flex; justify-content: flex-end; gap: var(--uix-space-2); padding: var(--uix-space-2); border-top: 1px solid var(--uix-border); }
+  /* wraps at 320 px (WCAG 1.4.10): toggle + submit stack, never clip */
+  .uix-composer__bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--uix-space-2); row-gap: var(--uix-space-2); padding: var(--uix-space-2); border-top: 1px solid var(--uix-border); }
   /* Block so the thumbnail drops onto its own line below the comment text (not inline with it). */
   .uix-comment__image { display: block; margin-top: var(--uix-space-2); padding: 0; border-radius: var(--uix-radius-sm); overflow: hidden; border: 1px solid var(--uix-border); background: none; cursor: zoom-in; max-width: 200px; }
   .uix-comment__image img { display: block; width: 100%; height: auto; }

package/styles/components/modal.css

@@ -29,7 +29,8 @@
   .uix-dialog__close:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
   .uix-dialog__close svg { width: var(--uix-icon-md); height: var(--uix-icon-md); }
   .uix-dialog__body { padding: var(--uix-space-5); color: var(--uix-text-hushed); }
-  .uix-dialog__footer { display: flex; gap: var(--uix-space-2); justify-content: flex-end; padding: var(--uix-space-4) var(--uix-space-5); border-top: 1px solid var(--uix-border); }
+  /* wraps at 320 px (WCAG 1.4.10) */
+  .uix-dialog__footer { display: flex; flex-wrap: wrap; gap: var(--uix-space-2); justify-content: flex-end; padding: var(--uix-space-4) var(--uix-space-5); border-top: 1px solid var(--uix-border); }
 }
 
 @layer uix.components {

package/styles/components/rich-text.css

@@ -123,7 +123,8 @@
   /* composer variant — the composer draws the box; the toolbar joins the action bar */
   .uix-rich-text--composer { border-radius: var(--uix-radius-md); }
   .uix-rich-text--composer.uix-rich-text:focus-within { box-shadow: 0 0 0 3px var(--uix-brand-muted); }
-  .uix-rich-text--composer .uix-rich-text__bar { align-items: center; justify-content: flex-start; min-width: 0; }
+  /* one row: the toolbar scrolls instead of wrapping */
+  .uix-rich-text--composer .uix-rich-text__bar { flex-wrap: nowrap; align-items: center; justify-content: flex-start; min-width: 0; }
   .uix-rich-text--composer .uix-rich-text__toolbar { flex: 1 1 auto; padding: 0; border-bottom: 0; }
   .uix-rich-text--composer .uix-rich-text__group--end { margin-left: 0; }
   .uix-rich-text--composer .uix-rich-text__counter,

package/styles/components/segmented.css

@@ -1,9 +1,13 @@
 /* uix segmented control — depends only on --uix-* tokens. */
 @layer uix.components {
-  .uix-segmented { display: inline-flex; padding: var(--uix-space-1); gap: var(--uix-space-1); background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); }
+  /* min-inline-size: 0 + max-inline-size: 100% — a <fieldset> defaults to min-inline-size:
+     min-content, so a segmented control on one could never be narrower than its longest words
+     and ran past its container at 320 px (WCAG 1.4.10). The options wrap instead. */
+  .uix-segmented { display: inline-flex; min-inline-size: 0; max-inline-size: 100%; padding: var(--uix-space-1); gap: var(--uix-space-1); background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); }
   .uix-segmented__option {
     border: 0; background: transparent; color: var(--uix-text-hushed); font: inherit; font-size: var(--uix-text-meta); font-weight: 500;
     padding: var(--uix-space-2) var(--uix-space-3); border-radius: calc(var(--uix-radius-md) - 3px); cursor: pointer;
+    white-space: normal; overflow-wrap: anywhere;
     transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
   }
   .uix-segmented__option:hover { color: var(--uix-text); }