@tensor_1/tokens 2.44.1 → 2.45.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.44.1",
+  "version": "2.45.1",
   "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/relationship-graph.css

@@ -54,5 +54,29 @@
   .uix-relationship-graph__collapse { position:absolute; height:22px; padding:0 var(--uix-space-2); border:1px dashed var(--uix-border-strong); border-radius:var(--uix-radius-pill); background:var(--uix-surface); color:var(--uix-text-muted); font-size:var(--uix-text-meta); cursor:pointer; }
   .uix-relationship-graph__collapse:focus-visible { outline:2px solid var(--uix-ring); outline-offset:2px; }
   .uix-relationship-graph--compact .uix-relationship-graph__item { padding:var(--uix-space-1) var(--uix-space-2); }
+  /* Map controls (controls="compact", TENSOR HAR-2501): an icon cluster in the map's corner,
+     the map itself focusable, and a full-screen state that covers the page. */
+  .uix-relationship-graph--map .uix-relationship-graph__viewport:focus-visible { outline:2px solid var(--uix-ring); outline-offset:2px; }
+  /* The hint, the zoom level and the cluster share one row along the map's bottom edge (TENSOR
+     HAR-2512: positioned apart, "Zoom 75 %" was drawn over the hint on a 500–600 px map). The hint
+     takes only the room the controls leave: it ellipsises, then hides; then the zoom level gives
+     way; the cluster always stays. The row lets the pointer through to the map. */
+  .uix-relationship-graph__footer { position:absolute; right:var(--uix-space-3); bottom:var(--uix-space-3); left:var(--uix-space-3); z-index:var(--uix-z-raised, 1); display:flex; align-items:center; justify-content:flex-end; gap:var(--uix-space-3); container:uix-relationship-graph-footer / inline-size; pointer-events:none; }
+  .uix-relationship-graph__controls { display:flex; flex:0 1 auto; align-items:center; gap:var(--uix-space-2); min-width:0; pointer-events:auto; }
+  .uix-relationship-graph__control-cluster { display:flex; flex:none; padding:var(--uix-space-1); border:1px solid var(--uix-border-strong); border-radius:var(--uix-radius-md); background:var(--uix-surface); box-shadow:var(--uix-shadow-sm); }
+  .uix-relationship-graph__control { display:inline-grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:var(--uix-radius-sm); background:transparent; color:var(--uix-text-muted); cursor:pointer; }
+  .uix-relationship-graph__control:hover:not(:disabled) { background:var(--uix-bg-hover); color:var(--uix-text); }
+  .uix-relationship-graph__control:focus-visible { outline:2px solid var(--uix-ring); outline-offset:1px; }
+  .uix-relationship-graph__control:disabled { opacity:.45; cursor:not-allowed; }
+  .uix-relationship-graph__control svg { width:16px; height:16px; }
+  .uix-relationship-graph__zoom-level { flex:0 1 auto; min-width:0; overflow:hidden; padding:0 var(--uix-space-1); border-radius:var(--uix-radius-sm); background:color-mix(in srgb, var(--uix-bg-subtle) 85%, transparent); color:var(--uix-text-muted); font-size:var(--uix-text-meta); font-variant-numeric:tabular-nums; white-space:nowrap; text-overflow:ellipsis; }
+  .uix-relationship-graph__hint { flex:1 1 0; min-width:0; margin:0; overflow:hidden; color:var(--uix-text-muted); font-size:var(--uix-text-meta); white-space:nowrap; text-overflow:ellipsis; }
+  /* A hint cut to a few words says nothing, so it goes; on the narrowest map so does the zoom level. */
+  @container uix-relationship-graph-footer (max-width:24rem) { .uix-relationship-graph__hint { display:none; } }
+  @container uix-relationship-graph-footer (max-width:17rem) { .uix-relationship-graph__zoom-level { display:none; } }
+  .uix-relationship-graph__toast { position:absolute; top:var(--uix-space-3); left:50%; z-index:var(--uix-z-toast, 3); max-width:calc(100% - 2 * var(--uix-space-3)); margin:0; padding:var(--uix-space-1) var(--uix-space-3); border-radius:var(--uix-radius-sm); background:var(--uix-text); color:var(--uix-surface); font-size:var(--uix-text-meta); transform:translateX(-50%); pointer-events:none; }
+  .uix-relationship-graph--fullscreen { position:fixed; inset:0; z-index:var(--uix-z-overlay, 1000); display:flex; flex-direction:column; padding:var(--uix-space-4); background:var(--uix-bg-app, var(--uix-surface)); }
+  .uix-relationship-graph--fullscreen .uix-relationship-graph__viewport { flex:1; min-height:0; height:auto; }
+  @media (max-width:640px) { .uix-relationship-graph__hint { display:none; } }
   @media (forced-colors: active) { .uix-relationship-graph__link path { stroke:CanvasText; } .uix-relationship-graph__link polygon { fill:CanvasText; } .uix-relationship-graph__item { border-color:ButtonText; } }
 }

package/styles/components/rich-text.css

@@ -1,5 +1,5 @@
-/* uix rich-text editor — markdown editing surface (.uix-prose), a roving-tabindex toolbar that
-   scrolls sideways on narrow screens, source mode, counter/status footer, link popover and the
+/* uix rich-text editor — markdown editing surface (.uix-prose), a roving-tabindex toolbar whose
+   groups wrap on narrow screens, source mode, counter/status footer, link popover and the
    :shortcode emoji list. Composes with .uix-composer for comment boxes. Depends only on --uix-* tokens. */
 @layer uix.components {
   .uix-rich-text {
@@ -17,16 +17,22 @@
   .uix-rich-text--fallback { border: 0; background: transparent; }
   .uix-rich-text--fallback:focus-within { box-shadow: none; }
 
-  /* toolbar — one row; scrolls instead of wrapping so a narrow screen never loses a control */
+  /* toolbar — the groups wrap onto more rows, so a narrow field shows every control and never
+     scrolls sideways (a collection wraps; TENSOR HAR-2511: at 320 px two thirds of the tools hid
+     behind a scroll inside the field). Each group draws its separator on its left edge, 1px
+     outside the toolbar's left padding edge for a group that starts a row, where the clip hides it. */
   .uix-rich-text__toolbar {
-    display: flex; align-items: center; gap: var(--uix-space-1); min-width: 0;
-    padding: var(--uix-space-1) var(--uix-space-2); border-bottom: 1px solid var(--uix-border);
-    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
+    display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-1); min-width: 0;
+    padding: var(--uix-space-1) var(--uix-space-1) var(--uix-space-1) 0; border-bottom: 1px solid var(--uix-border);
+    overflow-x: clip;
     /* size to the container, never to the row of tools (keeps grid/flex parents from widening) */
     contain: inline-size;
   }
-  .uix-rich-text__group { display: flex; align-items: center; gap: var(--uix-space-0); flex: none; }
-  .uix-rich-text__group + .uix-rich-text__group { padding-left: var(--uix-space-1); border-left: 1px solid var(--uix-border); }
+  /* A group wider than the whole row (a very narrow field) wraps its own tools. */
+  .uix-rich-text__group {
+    display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-0); flex: 0 1 auto; min-width: 0;
+    margin-left: -1px; padding-left: var(--uix-space-1); border-left: 1px solid var(--uix-border);
+  }
   .uix-rich-text__group--end { margin-left: auto; }
   .uix-rich-text__tool {
     display: inline-flex; align-items: center; justify-content: center; flex: none;
@@ -75,8 +81,12 @@
   .uix-rich-text__content h1 { font-size: var(--uix-text-h2); line-height: var(--uix-leading-h2); }
   .uix-rich-text__content h2 { font-size: var(--uix-text-h3); line-height: var(--uix-leading-h3); }
   .uix-rich-text__content h3 { font-size: var(--uix-text-body); line-height: var(--uix-leading-body); }
+  /* The placeholder floats full width with no width of its own, so the caret stays at the start
+     of its first line; it keeps its height, so a long placeholder grows the editor instead of
+     running over what follows the field (TENSOR HAR-2511). */
   .uix-rich-text__content .is-editor-empty:first-child::before {
-    content: attr(data-placeholder); float: left; height: 0; pointer-events: none; color: var(--uix-text-muted);
+    content: attr(data-placeholder); float: left; width: 100%; margin-right: -100%;
+    pointer-events: none; color: var(--uix-text-muted);
   }
   .uix-rich-text__content a { cursor: text; }
   /* the glyph stays in the text for editing and copying; its fallback image is drawn beside it */
@@ -123,11 +133,16 @@
   /* 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); }
-  /* the tool row scrolls and keeps five tools; the counter and toolbarEnd wrap below it first (a
-     toggle + submit on one row left the tools 0 px on a phone, TENSOR HAR-1125) */
+  /* the tool row asks for one row of tools and keeps at least five; the counter and toolbarEnd wrap
+     below it first, then the row wraps its groups (a toggle + submit on one row left the tools 0 px
+     on a phone, TENSOR HAR-1125; tools wrapped five to a row beside a submit, HAR-2511). Its start
+     margin keeps the first tool flush with the bar: a group's left padding and separator sit in it. */
   .uix-rich-text--composer .uix-rich-text__bar { flex-wrap: wrap; align-items: center; justify-content: flex-start; min-width: 0; }
-  .uix-rich-text--composer .uix-rich-text__toolbar { flex: 1 1 0; min-width: min(5 * 32px, 100%); padding: 0; border-bottom: 0; }
-  .uix-rich-text--composer .uix-rich-text__group--end { margin-left: 0; }
+  .uix-rich-text--composer .uix-rich-text__toolbar {
+    flex: 1 1 auto; min-width: min(5 * 32px + var(--uix-space-1), 100%); margin-left: calc(-1 * var(--uix-space-1));
+    padding: 0; border-bottom: 0; contain: none;
+  }
+  .uix-rich-text--composer .uix-rich-text__group--end { margin-left: -1px; }
   .uix-rich-text--composer .uix-rich-text__counter,
   .uix-rich-text--composer .uix-rich-text__status { flex: none; margin-right: 0; }
   .uix-rich-text--composer .uix-rich-text__bar > :last-child:not(.uix-rich-text__toolbar) { margin-left: auto; }