@apliteni/apliteni-ui 0.74.0 → 0.75.1

package/package.json

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

package/react/dist/index.css

@@ -182,7 +182,7 @@
 .ui-input:disabled,
 .ui-select:disabled,
 .ui-textarea:disabled {
-  background: var(--disabled-surface);
+  background-color: var(--disabled-surface);
   border-color: var(--disabled-border);
   color: var(--disabled-ink);
   cursor: not-allowed;

package/src/styles/code.css

@@ -91,12 +91,21 @@
 .ui-snippet--reveal .ui-snippet__bar > span { color: var(--chip-success-ink); }
 .ui-snippet--reveal pre { color: var(--chip-success-ink); word-break: break-all; white-space: pre-wrap; }
 
-/* Inline code */
+/* Inline code. The chip paints whichever reading surface its container is not on, so an
+   identifier keeps its chip on the page and inside a card, with no edge of its own. The
+   container hands the surface over in --code-bg; see src/tokens/tokens.css. #537
+
+   The chip READS --code-bg and never declares it, which is why its gap can match its paint
+   and its ring is composed here instead of in the shared recipe: a chip that re-pointed the
+   hand-off would hand the page to itself and paint the page everywhere. Backticks become a
+   chip wherever the kit renders prose (fmt() in site/changelog.mjs), so a link inside one is
+   ordinary markup and gets the gap of the surface it is actually on. */
 .ui-code {
   font-family: var(--font-mono);
   font-size: 0.9em;
-  background: var(--surface); --ring-gap: var(--surface);
+  background: var(--code-bg); --ring-gap: var(--code-bg);
   padding: 2px 6px;
   border-radius: var(--radius-xs);
   color: var(--text);
+  --ring: 0 0 0 var(--ring-gap-width) var(--ring-gap), 0 0 0 calc(var(--ring-gap-width) + var(--ring-width)) var(--ring-color), 0 0 12px 2px color-mix(in srgb, var(--ring-color) 45%, transparent);
 }

package/src/styles/input.css

@@ -50,16 +50,16 @@
 .ui-textarea::placeholder { /* muted-ink: placeholder — empty form field */ color: var(--muted); opacity: 0.9; }
 
 /* The value a reader typed is still the value; it goes quiet, it does not fade
-   into the field under it the way an opacity would take both down together. #220 */
-/* `.ui-select` joins these two in #273. It had no disabled rule at all, and it
-   sets `background: var(--surface-2)` as an author declaration — which outranks
-   the UA's own grey-out — so a disabled select rendered pixel-identical to a live
-   one. A pager marked busy showed every button and the jump input visibly off
-   beside a size control that still looked available. */
+   into the field under it the way an opacity would take both down together. #220
+   `.ui-select` joined the pair in #273: it paints its own field, which outranks the
+   UA's grey-out, so a disabled one had looked exactly like a live one.
+   `background-color`, not `background` — the shorthand also resets the three
+   longhands the chevron is drawn with (#511). Held by stories/select-chevron.test.js.
+   why: docs/specification.md#icons-and-glyphs */
 .ui-input:disabled,
 .ui-select:disabled,
 .ui-textarea:disabled {
-  background: var(--disabled-surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  background-color: var(--disabled-surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
   border-color: var(--disabled-border);
   /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
   cursor: not-allowed;

package/src/styles/table.css

@@ -123,8 +123,10 @@
 /* The empty state (.ui-empty) — shown when a table/list has no rows — now
    lives in styles/empty.css as a standalone component (illustration support). */
 
-/* Tables share their containing card’s reading surface, including pinned cells. */
-.ui-card { --table-bg: var(--surface); }
+/* Tables share their containing card’s reading surface, including pinned cells. The code
+   chip's hand-off travels with it, so an identifier in a cell keeps the page rather than
+   the card the cell is now painted with. why: src/tokens/tokens.css */
+.ui-card { --table-bg: var(--surface); --table-code-bg: var(--bg); }
 
 /* White in light, base canvas in dark; never a grey or tinted data surface. */
 .ui-table { background: var(--table-bg); --ring-gap: var(--table-bg); }

package/src/tokens/tokens.css

@@ -139,6 +139,16 @@
      --elev-drop under its inner line. why: docs/specification.md#elevation */
   --bg: #0e0d14;
   --table-bg: var(--bg);
+  /* A dark table is flush with the page, so the reading surface an inline code chip has
+     left inside one is the card. Light's table is white, so there it is the page. */
+  --table-code-bg: var(--surface);
+  /* A translucent wash paints BEHIND a chip, so it moves the ground and not the chip: the
+     pair has to be read against the wash composited over whatever opaque surface is under
+     it. Dark's washes lift a near-black ground away from the page, so the page is what the
+     chip has left; light's darken white toward the page, so the card is. Both directions
+     hold over EVERY opaque ground, which is why this is a token and not a context rule.
+     Measured in stories/code-chip.test.js. */
+  --wash-code-bg: var(--bg);
   --surface-2: #161520;     /* non-text sunken marks and tracks */
   --surface: #211e2d;       /* the card */
   --bg-elevated: #2a2639;   /* FLOATING — menus, panels, drawer, modal, toasts */
@@ -319,6 +329,8 @@
      why: docs/specification.md#elevation */
   --bg: #f2f3f6;
   --table-bg: #ffffff;
+  --table-code-bg: var(--bg);
+  --wash-code-bg: var(--surface);
   --surface-2: #e9ecf3;     /* non-text sunken marks and tracks */
   --surface: #ffffff;       /* the card */
   --bg-elevated: #ffffff;   /* FLOATING — menus, panels, drawer, modal, toasts */
@@ -472,9 +484,19 @@
   --prose-dense: 72ch;
 }
 
-/* Recompose only at painted containers; controls inherit the outside gap.
- * One recipe keeps surface propagation cheap and consistent.
- * why: docs/specification.md#the-focus-ring */
+/* An inline code chip is text on a chip, so #455 leaves it two grounds and no grey: the
+ * page and the card. It cannot read the one it is on — a var() inside a custom property is
+ * substituted on the element that DECLARES it — so the painted container hands it the one
+ * it is not using itself, and the chip keeps a step wherever it is written. The page hands
+ * over the card below; every painted container hands over the page, in the recipe under it.
+ * Held by stories/code-chip.test.js. why: docs/specification.md#elevation */
+:root { --code-bg: var(--surface); }
+
+/* Recompose only at painted containers; controls inherit the outside gap, and each hands an
+ * inline code chip the page. One recipe keeps surface propagation cheap and consistent.
+ * .ui-code composes its own ring in src/styles/code.css instead of joining this list: a
+ * chip cannot both paint --code-bg and re-point it, and its gap has to be the surface it
+ * actually paints. why: docs/specification.md#the-focus-ring */
 .amenu,
 .dtsw,
 .rx-modal,
@@ -485,7 +507,6 @@
 .ui-card--accent,
 .ui-card--live,
 .ui-cmdk__panel,
-.ui-code,
 .ui-confirm__panel,
 .ui-drawer__footer,
 .ui-drawer__panel,
@@ -509,8 +530,38 @@
 .ui-toast--solid,
 .vsw__menu {
   --ring: 0 0 0 var(--ring-gap-width) var(--ring-gap), 0 0 0 calc(var(--ring-gap-width) + var(--ring-width)) var(--ring-color), 0 0 12px 2px color-mix(in srgb, var(--ring-color) 45%, transparent);
+  --code-bg: var(--bg);
 }
 
+/* The two painted grounds that are not a plain card, and what each has left to hand over.
+ *
+ * A table paints the page in dark and white in light and follows its card when it is in
+ * one, so its hand-off travels with --table-bg as a token pair (src/styles/table.css
+ * re-points both). A TINTED surface mixes its colour INTO the card, so the card is the
+ * surface it still has: light mixes the tint down from white, which moves a tinted card
+ * toward the page and leaves the page 1.02 away, while the card it is a variant of stays
+ * 1.07-1.14 off in both themes. Measured in stories/code-chip.test.js. */
+.ui-table,
+.ui-table--sticky thead th,
+.ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection,
+.ui-table--hover:not(.ui-table--zebra) tbody tr:hover td,
+.ui-table--zebra tbody tr:nth-child(even) td,
+.ui-table--zebra tbody tr:hover td,
+.ui-table--zebra.ui-table--hover tbody tr:hover td { --code-bg: var(--table-code-bg); }
+.ui-card--accent,
+.ui-card--live,
+.ui-snippet--reveal { --code-bg: var(--surface); }
+
+/* A wash is not a rung: it is a layer the kit paints OVER one, and it paints behind a chip
+ * rather than under it, so the chip's ground moves and the chip does not. These five take
+ * caller markup — callout() and the success panel hand their body straight through — so a
+ * chip inside one is ordinary product markup rather than a shape anybody hand-places. */
+.ui-callout--info,
+.ui-callout--success,
+.ui-callout--warn,
+.ui-callout--danger,
+.ui-success { --code-bg: var(--wash-code-bg); }
+
 /* A container focused itself paints outside its own surface; descendants only
  * inherit its inside gap again after focus moves to them. */
 .ui-card:focus-visible,