@apliteni/apliteni-ui 0.58.0 → 0.58.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.58.0",
+  "version": "0.58.2",
   "workspaces": [
     "react"
   ],

package/react/dist/index.css

@@ -185,10 +185,13 @@
 }
 
 /* src/KeyValueList.css */
-.ui-drawer__rows.ui-kv {
+.ui-kv {
+  display: grid;
+  column-gap: var(--space-4);
+  margin: 0;
   grid-template-columns: calc(var(--space-6) * 5) minmax(0, 1fr);
 }
-.ui-drawer__rows.ui-kv--two-columns {
+.ui-kv--two-columns {
   grid-template-columns: repeat(2, calc(var(--space-6) * 5) minmax(0, 1fr));
 }
 .ui-kv__hidden {
@@ -203,7 +206,7 @@
   stroke-width: 2.25;
 }
 @media (max-width: 560px) {
-  .ui-drawer__rows.ui-kv {
+  .ui-kv {
     grid-template-columns: minmax(0, 1fr);
     row-gap: var(--space-3);
   }

package/react/dist/index.js

@@ -1897,7 +1897,7 @@ function detail({ value, redacted }) {
   return typeof value === "boolean" ? String(value) : value;
 }
 function KeyValueList({ rows, columns = 1, className, ...rest }) {
-  return /* @__PURE__ */ jsx20("dl", { ...rest, className: ["ui-drawer__rows", "ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs16("div", { className: "ui-drawer__row", children: [
+  return /* @__PURE__ */ jsx20("dl", { ...rest, className: ["ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs16("div", { className: "ui-drawer__row", children: [
     /* @__PURE__ */ jsx20("dt", { children: row.label }),
     /* @__PURE__ */ jsx20("dd", { children: detail(row) })
   ] }, index)) });

package/src/styles/drawer.css

@@ -229,7 +229,8 @@
 }
 .ui-drawer__row dt { color: var(--text); }
 .ui-drawer__row dd { color: var(--text); font-variant-numeric: tabular-nums; }
-.ui-drawer__rows + * { margin-top: var(--space-3); }
+.ui-drawer .ui-drawer__rows + *,
+.ui-drawer .ui-kv + * { margin-top: var(--space-3); }
 
 /* Under reduced motion the net gives every element a 0.01ms transition, so a
    child inherits `visible` one tick after the root: the control openDrawer()

package/src/styles/dropdown.css

@@ -164,7 +164,7 @@
 .ui-dropdown__tick { margin-left: auto; flex: none; display: none; color: var(--accent); }
 .ui-dropdown__tick svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }
 .ui-dropdown__item.is-selected .ui-dropdown__tick { display: inline-flex; } /* motion: still — a mark inside a row whose highlight already transitions; picking it closes the panel, which fades out over --dur-med */
-.ui-dropdown__item.is-selected .ui-dropdown__label { color: var(--accent); }
+.ui-dropdown__item.is-selected .ui-dropdown__label { color: var(--text); }
 
 /* When a row has both a badge and a tick, keep the badge from eating the margin */
 .ui-dropdown__badge + .ui-dropdown__tick { margin-left: 8px; }
@@ -174,20 +174,17 @@
   /* rank: chip */
   font-size: var(--text-xs);
   font-weight: var(--weight-semibold);
-  padding: 2px 7px;
+  padding: 3px 9px;
   border-radius: var(--radius-pill);
   margin-left: auto;
   flex: none;
   color: var(--text);
-  /* A chip is the top step. why: docs/specification.md#elevation */
-  background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
+  background: color-mix(in srgb, var(--muted) 12%, transparent); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
 }
 .ui-dropdown__badge.is-live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ }
-/* The accent counter keeps the badge's flat surface and changes only the ink — the shape
-   src/styles/nav.css:158 `.ui-nav__item.is-active .ui-nav__badge.is-accent` already holds.
-   The accent wash goes on a base surface, never a raised one, and #295 made this panel a
-   raised one. why: docs/specification.md#elevation */
-.ui-dropdown__badge.is-accent { color: var(--accent); background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ }
+:root[data-theme="light"] .ui-dropdown__badge:not(.is-live) {
+  background: color-mix(in srgb, var(--muted) 15%, transparent); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
+}
 
 /* Disabled + danger rows */
 .ui-dropdown__item.is-disabled { /* muted-ink: state — unavailable control */ color: var(--disabled-ink); cursor: not-allowed; pointer-events: none; }
@@ -291,4 +288,7 @@
 .ui-dropdown__none-title { font-size: calc(var(--text-sm) - 0.5px); font-weight: 600; color: var(--strong); }
 .ui-dropdown__none-hint { font-size: var(--text-xs); color: var(--text); line-height: 1.35; }
 
-.ui-dropdown__badge.is-state { /* muted-ink: state — off, unset, disabled or archived badge */ color: var(--muted); }
+.ui-dropdown__badge.is-state {
+  /* muted-ink: state — off, unset, disabled or archived badge */
+  color: var(--muted);
+}