@tensor_1/tokens 2.26.2 → 2.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/tokens",
-  "version": "2.26.2",
+  "version": "2.27.0",
   "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/button.css

@@ -28,9 +28,13 @@
   .uix-btn--link      { background: transparent; color: var(--uix-link); height: auto; padding: 0; }
   .uix-btn--link:hover      { text-decoration: underline; }
 
+  /* xs: the 24 px floor of WCAG 2.5.8, for dense tool rows (HAR-1348). */
+  .uix-btn--xs { height: 24px; padding: 0 var(--uix-space-2); gap: .25em; border-radius: var(--uix-radius-sm); font-size: var(--uix-text-meta); }
+  .uix-btn--xs svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
   .uix-btn--sm { height: 28px; padding: 0 var(--uix-space-3); font-size: var(--uix-text-meta); }
   .uix-btn--lg { height: 44px; padding: 0 var(--uix-space-5); }
   .uix-btn--icon { width: var(--uix-control-h); padding: 0; }
+  .uix-btn--icon.uix-btn--xs { width: 24px; }
   .uix-btn--icon.uix-btn--sm { width: 28px; }
   .uix-btn--icon.uix-btn--lg { width: 44px; }
 

package/styles/components/description-list.css

@@ -2,5 +2,6 @@
 @layer uix.components {
   .uix-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--uix-space-3) var(--uix-space-6); }
   .uix-dl dt { color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
-  .uix-dl dd { color: var(--uix-text); font-size: var(--uix-text-body); margin: 0; }
+  /* min-width:0 + anywhere: a long unbroken value (URL, id, hash) wraps instead of widening the grid (HAR-1353) */
+  .uix-dl dd { color: var(--uix-text); font-size: var(--uix-text-body); margin: 0; min-width: 0; overflow-wrap: anywhere; }
 }

package/styles/components/drawer.css

@@ -18,6 +18,18 @@
   }
   .uix-drawer[open]::backdrop { opacity: 1; }
   @starting-style { .uix-drawer[open]::backdrop { opacity: 0; } }
+  /* side="start" — the phone navigation drawer, from the left edge (HAR-1351) */
+  .uix-drawer--start { margin: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--uix-border); transform: translateX(-100%); }
+  .uix-drawer--start[open] { transform: none; }
+  @starting-style { .uix-drawer--start[open] { transform: translateX(-100%); } }
+  /* side="bottom" — a bottom sheet: full width, content height, capped at 85% of the viewport */
+  .uix-drawer--bottom {
+    margin: auto 0 0 0; width: 100%; max-width: 100%; height: fit-content; max-height: 85dvh;
+    border-left: 0; border-top: 1px solid var(--uix-border); border-radius: var(--uix-radius-lg) var(--uix-radius-lg) 0 0;
+    padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%);
+  }
+  .uix-drawer--bottom[open] { transform: none; }
+  @starting-style { .uix-drawer--bottom[open] { transform: translateY(100%); } }
   .uix-drawer__header { display: flex; align-items: center; gap: var(--uix-space-3); padding: var(--uix-space-4) var(--uix-space-5); border-bottom: 1px solid var(--uix-border); }
   .uix-drawer__body { padding: var(--uix-space-5); overflow-y: auto; flex: 1; }
   .uix-drawer__footer { display: flex; gap: var(--uix-space-2); padding: var(--uix-space-4) var(--uix-space-5); border-top: 1px solid var(--uix-border); }

package/styles/components/kbd.css

@@ -6,3 +6,9 @@
     background: var(--uix-bg-subtle); border: 1px solid var(--uix-border); border-bottom-width: 2px; border-radius: var(--uix-radius-xs);
   }
 }
+
+/* A shortcut of several keys (React `KbdCombo`, HAR-1361) */
+@layer uix.components {
+  .uix-kbd-combo { display: inline-flex; align-items: center; }
+  .uix-kbd-combo__keys { display: inline-flex; align-items: center; gap: var(--uix-space-1); }
+}

package/styles/components/menu.css

@@ -13,3 +13,15 @@
   .uix-menu__sep { height: 1px; background: var(--uix-border); margin: var(--uix-space-1) 0; }
   .uix-menu__label { font-size: var(--uix-text-eyebrow); letter-spacing: var(--uix-tracking-eyebrow); text-transform: uppercase; color: var(--uix-text-muted); padding: var(--uix-space-2) var(--uix-space-3) var(--uix-space-1); }
 }
+
+/* React `Menu` row parts (HAR-1359) */
+@layer uix.components {
+  .uix-menu__icon { display: inline-flex; flex: none; color: var(--uix-text-muted); }
+  .uix-menu__item--danger .uix-menu__icon { color: var(--uix-danger-text); }
+  .uix-menu__text { flex: 1; min-width: 0; }
+  .uix-menu__shortcut { margin-left: auto; padding-left: var(--uix-space-4); color: var(--uix-text-muted); font-size: var(--uix-text-meta); }
+  a.uix-menu__item { text-decoration: none; }
+  .uix-menu__item:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; background: var(--uix-bg-hover); }
+  .uix-menu__item[aria-disabled="true"] { opacity: .5; cursor: default; }
+  .uix-menu__item[aria-disabled="true"]:hover { background: transparent; }
+}

package/styles/components/modal.css

@@ -37,3 +37,13 @@
   .uix-prompt { display: grid; gap: var(--uix-space-3); }
   .uix-prompt__actions { margin: var(--uix-space-3) calc(var(--uix-space-5) * -1) calc(var(--uix-space-5) * -1); }
 }
+
+/* ConfirmDialog body, compensation, type-to-confirm and error (HAR-1356) */
+@layer uix.components {
+  .uix-confirm { display: grid; gap: var(--uix-space-4); }
+  .uix-confirm__body { display: grid; gap: var(--uix-space-3); }
+  .uix-confirm__compensation { display: grid; gap: var(--uix-space-1); padding: var(--uix-space-3); border-radius: var(--uix-radius-sm); background: var(--uix-bg-subtle); color: var(--uix-text); font-size: var(--uix-text-meta); }
+  .uix-confirm__compensation-title { font-weight: 600; }
+  .uix-confirm__error { padding: var(--uix-space-2) var(--uix-space-3); border-radius: var(--uix-radius-sm); background: var(--uix-danger-bg); color: var(--uix-danger-text); font-size: var(--uix-text-meta); }
+  .uix-dialog__footer .uix-confirm__tertiary { margin-inline-end: auto; }
+}

package/styles/components/pagination.css

@@ -1,6 +1,6 @@
 /* uix pagination — depends only on --uix-* tokens. */
 @layer uix.components {
-  .uix-pagination { display: inline-flex; align-items: center; gap: var(--uix-space-1); }
+  .uix-pagination { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-1); }
   .uix-pagination__btn {
     min-width: 32px; height: 32px; padding: 0 var(--uix-space-2); display: inline-flex; align-items: center; justify-content: center;
     border: 1px solid var(--uix-border); border-radius: var(--uix-radius-sm); background: var(--uix-surface);
@@ -9,6 +9,9 @@
   }
   .uix-pagination__btn:hover { background: var(--uix-bg-hover); }
   .uix-pagination__btn[aria-current="page"] { background: var(--uix-accent); border-color: var(--uix-accent); color: var(--uix-accent-fg); }
-  .uix-pagination__btn:disabled { opacity: .45; pointer-events: none; }
+  .uix-pagination__btn:disabled, .uix-pagination__btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
+  /* link pager (HAR-1357): anchors look like the buttons */
+  a.uix-pagination__btn { text-decoration: none; }
+  .uix-pagination__summary { padding: 0 var(--uix-space-2); color: var(--uix-text-muted); font-size: var(--uix-text-meta); font-variant-numeric: tabular-nums; }
   .uix-pagination__ellipsis { padding: 0 var(--uix-space-1); color: var(--uix-text-muted); }
 }

package/styles/components/popover.css

@@ -1,11 +1,26 @@
-/* uix popover — generic anchored surface via the native Popover API; animated with @starting-style. */
+/* uix popover — generic anchored surface via the native Popover API; animated with @starting-style.
+   Enter/exit: fade + --uix-lift slide, always away from the anchor (the React Popover sets
+   data-placement, and data-uix-placing holds the first frame until it is placed). */
 @layer uix.components {
   .uix-popover { margin: 0; padding: var(--uix-space-2); background: var(--uix-surface-2); border: 1px solid var(--uix-border); border-radius: var(--uix-radius-md); box-shadow: var(--uix-shadow-popover); color: var(--uix-text); }
   [popover].uix-popover {
-    opacity: 0; transform: translateY(calc(-1 * var(--uix-lift)));
+    --popover-from: translateY(calc(-1 * var(--uix-lift)));
+    opacity: 0; transform: var(--popover-from);
     transition: opacity var(--uix-dur-fast) var(--uix-ease-out), transform var(--uix-dur-fast) var(--uix-ease-out),
                 overlay var(--uix-dur-fast) allow-discrete, display var(--uix-dur-fast) allow-discrete;
   }
+  [popover].uix-popover[data-placement^="top"] { --popover-from: translateY(var(--uix-lift)); }
+  [popover].uix-popover[data-placement^="left"] { --popover-from: translateX(var(--uix-lift)); }
+  [popover].uix-popover[data-placement^="right"] { --popover-from: translateX(calc(-1 * var(--uix-lift))); }
   [popover].uix-popover:popover-open { opacity: 1; transform: none; }
-  @starting-style { [popover].uix-popover:popover-open { opacity: 0; transform: translateY(calc(-1 * var(--uix-lift))); } }
+  @starting-style { [popover].uix-popover:popover-open { opacity: 0; transform: var(--popover-from); } }
+  [popover].uix-popover[data-uix-placing]:popover-open { opacity: 0; transform: var(--popover-from); transition: none; }
+}
+
+/* Popconfirm — the anchored single-step confirmation (HAR-1356) */
+@layer uix.components {
+  .uix-popconfirm { display: grid; gap: var(--uix-space-2); width: max-content; max-width: min(20rem, calc(100vw - 2 * var(--uix-space-4))); padding: var(--uix-space-3); }
+  .uix-popconfirm__title { font-weight: 600; color: var(--uix-text); }
+  .uix-popconfirm__body { display: grid; gap: var(--uix-space-2); color: var(--uix-text-hushed); font-size: var(--uix-text-meta); }
+  .uix-popconfirm__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--uix-space-2); margin-top: var(--uix-space-1); }
 }

package/styles/components/reactions.css

@@ -24,18 +24,19 @@
   .uix-reaction:disabled, .uix-reaction-add:disabled { opacity: .55; cursor: not-allowed; }
   .uix-reaction > span[aria-hidden] { line-height: inherit; }
 
-  /* full picker (EmojiPicker, RTE-01): search, category jump bar, sectioned 8-column grid */
+  /* full picker (EmojiPicker, RTE-01): search, category jump bar, sectioned 8-column grid.
+     Fixed-height rows: one size loading, loaded, searching or failed, so it never re-places. */
   .uix-emoji-picker__anchor { display: inline-flex; }
   .uix-emoji-picker-popover { padding: var(--uix-space-2); }
   .uix-emoji-picker--full { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--uix-space-2); width: 324px; max-width: calc(100vw - 32px); }
-  .uix-emoji-picker__nav { display: flex; gap: var(--uix-space-0); overflow-x: auto; scrollbar-width: none; }
+  .uix-emoji-picker__nav { display: flex; flex: none; gap: var(--uix-space-0); height: 28px; overflow-x: auto; scrollbar-width: none; }
   .uix-emoji-picker__nav-btn {
     flex: none; width: 32px; height: 28px; padding: 0; border: 0; border-radius: var(--uix-radius-sm);
     background: transparent; font-size: var(--uix-text-body); cursor: pointer;
   }
   .uix-emoji-picker__nav-btn:hover { background: var(--uix-bg-hover); }
   .uix-emoji-picker__nav-btn:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: -2px; }
-  .uix-emoji-picker__grid { height: 264px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: var(--uix-space-6); }
+  .uix-emoji-picker__grid { flex: none; height: 264px; overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: var(--uix-space-6); }
   .uix-emoji-picker__section { content-visibility: auto; contain-intrinsic-size: auto 15rem; }
   .uix-emoji-picker__heading {
     position: sticky; top: 0; z-index: var(--uix-z-raised); padding: var(--uix-space-1) var(--uix-space-1);
@@ -48,4 +49,9 @@
   .uix-emoji-img { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.2em; object-fit: contain; }
   .uix-emoji-picker__status { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
   .uix-emoji-picker__status:empty { display: none; }
+  /* inside the grid (React): adds no height, stays visible at the bottom */
+  .uix-emoji-picker__grid > .uix-emoji-picker__status {
+    position: sticky; bottom: 0; z-index: var(--uix-z-raised); margin: 0;
+    padding: var(--uix-space-2) var(--uix-space-1); background: var(--uix-surface-2);
+  }
 }

package/styles/components/rich-text.css

@@ -123,17 +123,15 @@
   /* 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); }
-  /* 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; }
+  /* 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) */
+  .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__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; }
-  /* a status message (uploading, failed, images off) takes its own row under the tools: inline, a
-     long message squeezed the toolbar to a sliver on a 320 px phone (TENSOR HAR-749) */
-  .uix-rich-text--composer .uix-rich-text__bar:has(> .uix-rich-text__status:not(:empty)) { flex-wrap: wrap; }
-  .uix-rich-text--composer .uix-rich-text__bar:has(> .uix-rich-text__status:not(:empty)) > .uix-rich-text__toolbar { flex-basis: 0; }
+  /* a status message (uploading, failed, images off) takes its own row (HAR-749) */
   .uix-rich-text--composer .uix-rich-text__status:not(:empty) { order: 1; flex: 1 0 100%; }
   .uix-rich-text--composer .uix-rich-text__source.uix-textarea { border: 0; box-shadow: none; }
 

package/styles/components/scheduling-calendar.css

@@ -4,6 +4,12 @@
   .uix-scheduling-calendar__grid { display:grid; grid-template-columns:repeat(7,minmax(6.5rem,1fr)); border-top:1px solid var(--uix-border); border-left:1px solid var(--uix-border); overflow:auto; }
   .uix-scheduling-calendar__day { min-height:8rem; padding:var(--uix-space-2); border-right:1px solid var(--uix-border); border-bottom:1px solid var(--uix-border); background:var(--uix-surface); }
   .uix-scheduling-calendar__day[data-outside] { background:var(--uix-bg-subtle); color:var(--uix-text-muted); }
+  .uix-scheduling-calendar__weekday { padding:var(--uix-space-1) var(--uix-space-2); border-right:1px solid var(--uix-border); border-bottom:1px solid var(--uix-border); background:var(--uix-bg-subtle); color:var(--uix-text-muted); font-size:var(--uix-text-meta); font-weight:600; text-align:right; }
+  .uix-scheduling-calendar__dayhead { display:flex; align-items:center; gap:var(--uix-space-1); min-width:0; }
+  .uix-scheduling-calendar__dayhead > .uix-scheduling-calendar__date { flex:1 1 auto; width:auto; }
+  .uix-scheduling-calendar__badge { display:inline-flex; align-items:center; min-width:0; overflow:hidden; white-space:nowrap; font-size:var(--uix-text-meta); }
+  .uix-scheduling-calendar__more { justify-self:start; padding:var(--uix-space-1) var(--uix-space-2); border:0; border-radius:var(--uix-radius-sm); background:transparent; color:var(--uix-link); font-size:var(--uix-text-meta); font-weight:600; text-align:left; cursor:pointer; }
+  .uix-scheduling-calendar__more:hover { background:var(--uix-bg-subtle); }
   .uix-scheduling-calendar__date { display:block; width:100%; border:0; background:transparent; color:inherit; text-align:right; font-size:var(--uix-text-meta); }
   .uix-scheduling-calendar__overlay { display:block; margin-block:var(--uix-space-1); padding:var(--uix-space-1) var(--uix-space-2); border-radius:var(--uix-radius-sm); background:var(--uix-info-bg); color:var(--uix-info-text); font-size:var(--uix-text-meta); }
   .uix-scheduling-calendar__overlay[data-kind="blackout"] { background:var(--uix-danger-bg); color:var(--uix-danger-text); }

package/styles/components/sidebar.css

@@ -18,7 +18,7 @@
   .uix-sidebar__toggle svg { width: 18px; height: 18px; }
 
   .uix-navitem {
-    display: flex; align-items: center; gap: var(--uix-space-3); height: 36px; padding: 0 var(--uix-space-3);
+    display: flex; align-items: center; gap: var(--uix-space-3); min-height: 36px; padding: 0 var(--uix-space-3);
     border-radius: var(--uix-radius-sm); color: var(--uix-text-hushed); cursor: pointer; text-decoration: none;
     border: 0; background: transparent; font: inherit; font-size: var(--uix-text-body); width: 100%; text-align: left;
     transition: background-color var(--uix-dur-fast) var(--uix-ease-out), color var(--uix-dur-fast) var(--uix-ease-out);
@@ -30,6 +30,11 @@
   .uix-navitem__icon { width: var(--uix-icon-md); height: var(--uix-icon-md); flex: none; }
   .uix-navitem__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .uix-navitem__badge { font-size: var(--uix-text-meta); color: var(--uix-text-muted); }
+  /* two-line row: a label plus a wrapping second line (HAR-1355). min-height above lets it grow. */
+  .uix-navitem[data-multiline] { align-items: flex-start; padding-block: var(--uix-space-2); }
+  .uix-navitem__text { flex: 1; min-width: 0; display: grid; }
+  .uix-navitem__desc { font-size: var(--uix-text-meta); line-height: 1.35; color: var(--uix-text-muted); overflow-wrap: anywhere; white-space: normal; font-weight: 400; }
+  .uix-navitem[aria-current="page"] .uix-navitem__desc { color: var(--uix-text-hushed); }
   /* on the active tint, muted badge dips below AA — hushed composites darker on the tint */
   .uix-navitem[aria-current="page"] .uix-navitem__badge { color: var(--uix-text-hushed); }
   .uix-navitem__star { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: transparent; color: var(--uix-text-muted); cursor: pointer; border-radius: var(--uix-radius-xs); opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out); }
@@ -100,13 +105,15 @@
   .uix-sidebar[data-collapsed] .uix-sidebar__eyebrow,
   .uix-sidebar[data-collapsed] .uix-sidebar__brand,
   .uix-sidebar[data-collapsed] .uix-navgroup__chevron,
-  .uix-sidebar[data-collapsed] .uix-navgroup__panel { display: none; }
+  .uix-sidebar[data-collapsed] .uix-navgroup__panel,
+  .uix-sidebar[data-collapsed] .uix-navitem__desc { display: none; }
   .uix-sidebar[data-nav="rail"] .uix-navitem__badge,
   .uix-sidebar[data-nav="rail"] .uix-navitem__star,
   .uix-sidebar[data-nav="rail"] .uix-sidebar__eyebrow,
   .uix-sidebar[data-nav="rail"] .uix-sidebar__brand,
   .uix-sidebar[data-nav="rail"] .uix-navgroup__chevron,
-  .uix-sidebar[data-nav="rail"] .uix-navgroup__panel { display: none; }
+  .uix-sidebar[data-nav="rail"] .uix-navgroup__panel,
+  .uix-sidebar[data-nav="rail"] .uix-navitem__desc { display: none; }
   /* rail labels stay in the accessibility tree — clip pattern (mirrors .uix-visually-hidden),
      not display:none, so icon-only nav items keep their names (UIX-A11Y-2). position:absolute
      removes the label from the flex row, so the centered rail layout is unaffected. */
@@ -119,8 +126,8 @@
     white-space: nowrap; border: 0;
   }
   /* center the icon-only rail; head keeps just the toggle, centered */
-  .uix-sidebar[data-collapsed] .uix-navitem { justify-content: center; padding: 0; gap: 0; }
+  .uix-sidebar[data-collapsed] .uix-navitem { justify-content: center; align-items: center; padding: 0; gap: 0; }
   .uix-sidebar[data-collapsed] .uix-sidebar__head { justify-content: center; padding-inline: 0; }
-  .uix-sidebar[data-nav="rail"] .uix-navitem { justify-content: center; padding: 0; gap: 0; }
+  .uix-sidebar[data-nav="rail"] .uix-navitem { justify-content: center; align-items: center; padding: 0; gap: 0; }
   .uix-sidebar[data-nav="rail"] .uix-sidebar__head { justify-content: center; padding-inline: 0; }
 }

package/styles/components/stat-tile.css

@@ -36,5 +36,9 @@
   .uix-stat__chevron { display: inline-flex; flex: none; margin-inline-start: auto; color: var(--uix-text-muted); }
   .uix-stat__label .uix-stat__chevron svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-stat--interactive[aria-expanded="true"] .uix-stat__chevron svg { transform: rotate(180deg); }
+  /* link — the whole tile is an <a> to a filtered list or a record (HAR-1350) */
+  .uix-stat--link { text-decoration: none; }
+  /* current: the ring outline only; a brand tint would drop the muted label below AA */
+  .uix-stat--link[aria-current="page"] { border-color: var(--uix-ring); box-shadow: inset 0 0 0 1px var(--uix-ring); }
   @media (prefers-reduced-motion: reduce) { .uix-stat--interactive, .uix-stat__label .uix-stat__chevron svg { transition: none; } }
 }

package/styles/components/steps.css

@@ -16,3 +16,31 @@
   .uix-step[data-state="done"] + .uix-step__connector,
   .uix-step__connector[data-done] { background: var(--uix-accent); }
 }
+
+/* React `Steps` (HAR-1362): an <ol>, each <li> = marker · title/description · connector */
+@layer uix.components {
+  .uix-steps--list { margin: 0; padding: 0; list-style: none; align-items: flex-start; }
+  .uix-steps--list > .uix-step { align-items: flex-start; min-width: 0; }
+  .uix-steps--list > .uix-step:not(:last-child) { flex: 1; }
+  .uix-step__text { display: grid; min-width: 0; padding-top: var(--uix-space-1); }
+  .uix-step__title { font-size: var(--uix-text-meta); font-weight: 500; }
+  .uix-step__desc { font-size: var(--uix-text-meta); color: var(--uix-text-muted); overflow-wrap: anywhere; }
+  .uix-step__action { color: inherit; text-decoration: none; padding: 0; border: 0; background: transparent; font: inherit; text-align: start; }
+  a.uix-step__action, button.uix-step__action { cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }
+  .uix-steps--list .uix-step__connector { align-self: center; margin-top: 0; }
+  .uix-steps--horizontal > .uix-step > .uix-step__connector { align-self: flex-start; margin-top: 13px; }
+  .uix-steps--horizontal > .uix-step > .uix-step__text { flex: 0 0 auto; max-width: 12rem; }
+  .uix-step[data-state="waiting"] .uix-step__marker { border-style: dashed; border-color: var(--uix-warning-border); color: var(--uix-warning-text); }
+  .uix-step[data-state="error"] { color: var(--uix-text); }
+  .uix-step[data-state="error"] .uix-step__marker { background: var(--uix-danger-bg); border-color: var(--uix-danger-border); color: var(--uix-danger-text); }
+  /* vertical (and horizontal below 40rem): a column, the connector a line under the marker */
+  .uix-steps--vertical { flex-direction: column; gap: 0; }
+  .uix-steps--vertical > .uix-step { position: relative; padding-bottom: var(--uix-space-4); }
+  .uix-steps--vertical > .uix-step > .uix-step__connector { position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px; height: auto; min-width: 0; margin: 0; }
+  @media (max-width: 40rem) {
+    .uix-steps--horizontal { flex-direction: column; gap: 0; }
+    .uix-steps--horizontal > .uix-step { position: relative; padding-bottom: var(--uix-space-4); }
+    .uix-steps--horizontal > .uix-step > .uix-step__text { flex: 1 1 auto; max-width: none; }
+    .uix-steps--horizontal > .uix-step > .uix-step__connector { position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px; height: auto; min-width: 0; margin: 0; }
+  }
+}

package/styles/components/table-toolbar.css

@@ -17,8 +17,37 @@
   .uix-chip:hover { border-color: var(--uix-border-strong); color: var(--uix-text); }
   .uix-chip[data-on] { background: var(--uix-brand-muted); border-color: var(--uix-accent); color: var(--uix-accent-text); }
   .uix-chip:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
-  .uix-chip__count { font-variant-numeric: tabular-nums; opacity: .7; }
+  /* muted text, not opacity: .7 opacity on hushed text fell below AA (HAR-1360) */
+  .uix-chip__count { font-variant-numeric: tabular-nums; color: var(--uix-text-muted); }
+  .uix-chip[data-on] .uix-chip__count { color: inherit; }
   .uix-filter-popover { display: grid; gap: var(--uix-space-4); min-width: 260px; padding: var(--uix-space-4); }
   .uix-filter-popover .uix-label { display: grid; gap: var(--uix-space-2); }
   .uix-filter-popover__actions { display: flex; justify-content: flex-end; gap: var(--uix-space-2); }
 }
+
+/* Chip (React `Chip`, HAR-1360): removable, toggle, link, static and "+ add" chips, and the group */
+@layer uix.components {
+  a.uix-chip, .uix-chip__main { text-decoration: none; }
+  .uix-chip--static, .uix-chip--removable { cursor: default; }
+  .uix-chip--add { border-style: dashed; }
+  .uix-chip:disabled, .uix-chip[aria-disabled="true"] { opacity: .5; pointer-events: none; }
+  .uix-chip__icon { display: inline-flex; flex: none; }
+  .uix-chip__label { min-width: 0; overflow-wrap: anywhere; }
+  .uix-chip__icon svg { width: var(--uix-icon-sm); height: var(--uix-icon-sm); }
+  .uix-chip--removable { padding-inline-end: var(--uix-space-1); }
+  .uix-chip__main {
+    display: inline-flex; align-items: center; gap: var(--uix-space-2); padding: 0; border: 0;
+    background: transparent; color: inherit; font: inherit; border-radius: var(--uix-radius-pill);
+  }
+  button.uix-chip__main, a.uix-chip__main { cursor: pointer; }
+  .uix-chip__main:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 2px; }
+  /* 24 px hit area (WCAG 2.5.8) without growing the chip: the negative block margin eats the overhang */
+  .uix-chip__remove {
+    display: inline-grid; place-items: center; width: 24px; height: 24px; margin-block: calc(-1 * var(--uix-space-1)); padding: 0; flex: none;
+    border: 0; border-radius: var(--uix-radius-pill); background: transparent; color: inherit; cursor: pointer;
+  }
+  .uix-chip__remove svg { width: 12px; height: 12px; }
+  .uix-chip__remove:hover { background: var(--uix-bg-hover); color: var(--uix-text); }
+  .uix-chip__remove:focus-visible { outline: 2px solid var(--uix-ring); outline-offset: 1px; }
+  .uix-chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uix-space-2); }
+}

package/styles/components/tooltip.css

@@ -17,6 +17,9 @@
     box-shadow: var(--uix-shadow-popover); white-space: normal;
     opacity: 0; transition: opacity var(--uix-dur-fast) var(--uix-ease-out);
   }
+  /* rich content (HAR-1349): a short list or a few lines, never interactive */
+  .uix-tooltip__bubble :is(ul, ol) { margin: 0; padding-left: 1.1em; }
+  .uix-tooltip__bubble :is(p, ul, ol) + :is(p, ul, ol) { margin-top: var(--uix-space-1); }
   .uix-tooltip__bubble:popover-open { opacity: 1; }
   @starting-style { .uix-tooltip__bubble:popover-open { opacity: 0; } }