@apliteni/apliteni-ui 0.98.0 → 0.100.0

package/package.json

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

package/react/dist/index.css

@@ -820,7 +820,7 @@
 .rx-toast-stack {
   position: fixed;
   right: var(--space-4);
-  bottom: var(--space-4);
+  bottom: calc(var(--space-4) + var(--ui-app-bottom-clearance, 0px));
   max-width: calc(100% - 2 * var(--space-4));
   z-index: var(--z-toast);
   pointer-events: none;
@@ -846,15 +846,28 @@
 .ui-react-app__bottom .ui-nav__item {
   min-height: 48px;
 }
+.ui-react-app:not(:has(> .ui-app__rail)) {
+  grid-template-columns: minmax(0, 1fr);
+}
+.ui-react-app .ui-app__bar > .ui-app__brand {
+  flex: none;
+  margin-inline-end: var(--space-2);
+}
 @media (max-width: 560px) {
+  :root:has(.ui-react-app__bottom) {
+    --ui-app-bottom-clearance: calc(96px + env(safe-area-inset-bottom));
+  }
+  :root:has(.ui-react-app) {
+    scroll-padding-bottom: calc(var(--space-5) + var(--ui-app-bottom-clearance, 0px));
+  }
   .ui-react-app {
     display: block;
   }
   .ui-react-app > .ui-app__rail {
     display: none;
   }
-  .ui-react-app .ui-app__main {
-    padding-bottom: calc(96px + env(safe-area-inset-bottom));
+  :root:has(.ui-react-app__bottom) .ui-react-app .ui-app__main {
+    padding-bottom: var(--ui-app-bottom-clearance, 0px);
   }
   .ui-react-app .ui-app__bar {
     padding-inline: var(--space-4);
@@ -865,6 +878,9 @@
   .ui-react-app .ui-app__search kbd {
     display: none;
   }
+  .ui-react-app .ui-app__bar > .ui-app__brand {
+    display: none;
+  }
   .ui-react-app__bottom {
     display: block;
     position: fixed;

package/react/dist/index.js

@@ -3488,15 +3488,17 @@ function AppShell({
     }
   );
   const foldLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
+  const navigable = sections.length > 1 || Boolean(back);
   const visible = sections.length > 4 ? sections.slice(0, 3) : sections;
   const remaining = sections.slice(visible.length);
   const initials = account.name.trim().split(/\s+/).map((part) => part[0]).slice(0, 2).join("");
+  const lockup = /* @__PURE__ */ jsxs29("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
+    brand ?? /* @__PURE__ */ jsx34("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
+    /* @__PURE__ */ jsx34("span", { children: word })
+  ] });
   return /* @__PURE__ */ jsxs29("div", { className: `ui-app ui-app--topbar ui-react-app${collapsed ? " is-collapsed" : ""}`, children: [
-    /* @__PURE__ */ jsxs29("div", { className: "ui-app__rail", children: [
-      /* @__PURE__ */ jsx34("div", { className: "ui-app__head", children: /* @__PURE__ */ jsxs29("a", { className: "ui-app__brand", href: brandHref, "aria-label": word, children: [
-        brand ?? /* @__PURE__ */ jsx34("i", { "aria-hidden": "true", className: "ui-react-app__mark", dangerouslySetInnerHTML: { __html: prism(uid, 24) } }),
-        /* @__PURE__ */ jsx34("span", { children: word })
-      ] }) }),
+    navigable && /* @__PURE__ */ jsxs29("div", { className: "ui-app__rail", children: [
+      /* @__PURE__ */ jsx34("div", { className: "ui-app__head", children: lockup }),
       sidebar(sections, "Sections"),
       /* @__PURE__ */ jsx34("div", { className: "ui-app__foot", children: /* @__PURE__ */ jsx34("div", { className: "ui-app__fold-row", children: /* @__PURE__ */ jsxs29("button", { type: "button", className: "ui-nav__item ui-app__fold", "aria-expanded": !collapsed, "aria-label": foldLabel, onClick: fold, children: [
         /* @__PURE__ */ jsx34("span", { className: "ui-nav__ic", children: /* @__PURE__ */ jsxs29("svg", { className: "ui-icon", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
@@ -3509,6 +3511,7 @@ function AppShell({
     ] }),
     /* @__PURE__ */ jsxs29("div", { className: "ui-app__well", children: [
       /* @__PURE__ */ jsxs29("header", { className: "ui-app__bar", children: [
+        !navigable && lockup,
         /* @__PURE__ */ jsxs29("button", { type: "button", className: "ui-app__search", "aria-haspopup": "dialog", onClick: () => setSearch(true), children: [
           /* @__PURE__ */ jsx34("span", { className: "ui-app__search-ic", children: /* @__PURE__ */ jsx34(Icon, { name: "search" }) }),
           /* @__PURE__ */ jsx34("span", { className: "ui-app__search-txt", children: "Search or run a command\u2026" }),
@@ -3544,7 +3547,7 @@ function AppShell({
         /* @__PURE__ */ jsx34("div", { className: "ui-app__body", children })
       ] })
     ] }),
-    /* @__PURE__ */ jsx34("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs29("ul", { className: "ui-nav__list", children: [
+    navigable && /* @__PURE__ */ jsx34("nav", { className: "ui-nav ui-react-app__bottom", "aria-label": "Sections on mobile", children: /* @__PURE__ */ jsxs29("ul", { className: "ui-nav__list", children: [
       links(visible),
       remaining.length > 0 && /* @__PURE__ */ jsx34("li", { children: /* @__PURE__ */ jsxs29(
         "button",

package/src/styles/layout.css

@@ -422,7 +422,10 @@
   letter-spacing: var(--tracking-tight);
   margin-bottom: 8px;
 }
-.ui-app__sub { color: var(--text); font-size: calc(var(--text-base) + 0.5px); line-height: 1.6; max-width: var(--prose-body); margin-bottom: 32px; }
+/* The head keeps the kit's second step below it whether or not a lede is there to
+   carry it: with no lede the title's own margin takes the step instead. */
+.ui-app__main h1:not(.ui-card h1):not(:has(+ .ui-app__sub)) { margin-bottom: var(--space-8); }
+.ui-app__sub { color: var(--text); font-size: calc(var(--text-base) + 0.5px); line-height: 1.6; max-width: var(--prose-body); margin-bottom: var(--space-8); }
 .ui-app__body { display: flex; flex-direction: column; gap: var(--space-5); }
 /* A flex child's min-width is its content by default, so one wide block — a
    ledger, a code sample — pushes the whole page sideways instead of scrolling

package/src/styles/table.css

@@ -204,7 +204,35 @@
 .ui-table--compact th { padding: var(--space-2) var(--space-3); }
 .ui-table--compact th:last-child,
 .ui-table--compact td:last-child { padding-right: var(--space-3); }
-.ui-table-scroll { overflow: auto; max-height: var(--ui-table-height, 70vh); padding: 0 var(--space-1); }
+/* Columns past the box's edge, said in paint. Two shades, one per side, under two
+   cover layers that ride the content: `local` moves a cover with the scroll, so
+   reaching an end slides that cover over its shade. A cover is solid for its first
+   half, so at 24px it hides a 12px shade outright — which is why the two sizes are
+   not one. why: guidelines/dense-tables.md */
+.ui-table-scroll {
+  overflow: auto; max-height: var(--ui-table-height, 70vh); padding: 0 var(--space-1);
+  background-color: var(--table-bg);
+  background-image:
+    linear-gradient(to right, var(--table-bg) 50%, transparent),
+    linear-gradient(to left, var(--table-bg) 50%, transparent),
+    radial-gradient(farthest-side at 0 50%, var(--table-edge), transparent),
+    radial-gradient(farthest-side at 100% 50%, var(--table-edge), transparent);
+  background-position: 0 0, 100% 0, 0 0, 100% 0;
+  background-size: var(--space-6) 100%, var(--space-6) 100%, var(--space-3) 100%, var(--space-3) 100%;
+  background-repeat: no-repeat;
+  background-attachment: local, local, scroll, scroll;
+}
+/* The edge darkens on a light ground and lightens on a dark one: ink has nowhere to
+   go on a near-black page, which is why --elev-drop splits its spend and a raised
+   dark surface takes a light --elev-edge. */
+.ui-table-scroll { --table-edge: color-mix(in srgb, var(--sheen) 12%, transparent); }
+:root[data-theme="light"] .ui-table-scroll { --table-edge: color-mix(in srgb, var(--shadow-ink) 13%, transparent); }
+/* The surface belongs to the box that scrolls, so the shades land under the cells
+   rather than behind them; the row fills repeat that same surface and step aside.
+   The sticky header and pinned column keep their paint: they hide what scrolls
+   beneath them. */
+.ui-table-scroll > .ui-table,
+.ui-table-scroll > .ui-table tbody td:not(.ui-table__identity, .ui-table__selection) { background-color: transparent; }
 /* The kit's first ringed scroller, and a scroll region inside a card like the rest, so
    it draws the band inward too rather than spending a halo across the card around it.
    It had no room of its own to draw in — the padding above is horizontal — which is the
@@ -216,6 +244,45 @@
 .ui-table--sticky thead th { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--table-bg); padding-top: var(--space-2); }
 .ui-table--pinned .ui-table__identity, .ui-table--pinned .ui-table__selection { position: sticky; left: 0; z-index: var(--z-base); background: var(--table-bg); border-right: 1px solid var(--border); }
 .ui-table--pinned thead .ui-table__identity, .ui-table--pinned thead .ui-table__selection { z-index: calc(var(--z-sticky) + 1); }
+/* The divider is the pin's edge: it says the column stayed while the rest moved under it.
+   Columns that all fit never move, so the line divides nothing and reads as an arbitrary
+   rule. The resting rule keeps it, so an engine that cannot answer the query is unchanged;
+   scroll-state makes a query container, not a size one. why: guidelines/dense-tables.md */
+.ui-table-scroll { container-type: scroll-state; }
+/* A shared grid cell puts the edge shade over the opaque sticky header, on both
+   sides: the radial-gradient shades below answer only the table's own background
+   and fall to nothing where the sticky header paints over them, so an engine that
+   can ask whether the scrollport still has room sticks a shade of its own above
+   it instead and the base radial pair is sized to 0 here. #434 review round 2 */
+@supports (container-type: scroll-state) {
+  .ui-table-scroll {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    background-size: var(--space-6) 100%, var(--space-6) 100%, 0 100%, 0 100%;
+  }
+  .ui-table-scroll > .ui-table { grid-area: 1 / 1; }
+  .ui-table-scroll::before,
+  .ui-table-scroll::after {
+    content: '';
+    grid-area: 1 / 1;
+    position: sticky;
+    top: 0;
+    width: var(--space-3);
+    z-index: calc(var(--z-sticky) + 2);
+    pointer-events: none;
+  }
+  .ui-table-scroll::before { left: 0; right: calc(100% - var(--space-3)); justify-self: start; }
+  .ui-table-scroll::after { left: calc(100% - var(--space-3)); right: 0; justify-self: end; }
+  @container scroll-state(scrollable: left) {
+    .ui-table-scroll::before { background: linear-gradient(to right, var(--table-edge), transparent); }
+  }
+  @container scroll-state(scrollable: right) {
+    .ui-table-scroll::after { background: linear-gradient(to left, var(--table-edge), transparent); }
+  }
+}
+@container not scroll-state(scrollable: x) {
+  .ui-table--pinned :is(.ui-table__identity, .ui-table__selection) { border-right-color: transparent; }
+}
 .ui-value, .ui-delta { white-space: nowrap; font-variant-numeric: tabular-nums; }
 .ui-value__unit { margin-left: var(--space-1); font-size: var(--text-xs); color: var(--text); }
 .ui-delta--success { color: var(--chip-success-ink); }

package/src/tokens/tokens.css

@@ -534,6 +534,7 @@
 .ui-snippet--reveal,
 .ui-sx,
 .ui-table,
+.ui-table-scroll,
 .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,
@@ -557,6 +558,7 @@
  * 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-scroll,
 .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,