@apliteni/apliteni-ui 0.123.0 → 0.124.1

package/package.json

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

package/src/components/dropdown.js

@@ -637,7 +637,10 @@ function ddSizeHeight(dd, panel) {
 /** Fit a panel again where it now is, whichever placement it uses. */
 function ddPlace(dd) {
   const panel = dd.__ddPanel || ddPanelOf(dd);
-  if (dd.__ddPanel) positionPortalPanel(dd, dd.__ddPanel);
+  if (dd.__ddPanel) {
+    ddResolveDirection(dd, panel);
+    positionPortalPanel(dd, panel);
+  }
   else ddFitViewport(dd, ddPanelOf(dd));
   ddSizeHeight(dd, panel);
 }
@@ -700,16 +703,36 @@ function ddCancelClose(dd, panel) {
   else panel?.classList?.remove('is-closing');
 }
 
-// `auto` is the only direction the wiring decides; `up` and the default are the
-// panel's own class, set once at render. Flip only when below is too tight AND
-// above is roomier, so a panel that fits nowhere still opens the way it says.
+// Keep the configured side separate from the side resolved for this opening.
 function ddResolveDirection(dd, panel) {
-  if (dd.getAttribute('data-dropdown-direction') !== 'auto') return;
+  const auto = dd.getAttribute('data-dropdown-direction') === 'auto';
+  if (!auto && !dd.__ddPanel) return;
   const trigger = dd.querySelector('[data-dropdown-trigger]');
   if (!trigger || typeof trigger.getBoundingClientRect !== 'function') return;
   const t = trigger.getBoundingClientRect();
   const below = ddViewOf(panel).innerHeight - t.bottom;
-  panel.classList.toggle('is-up', below < panel.offsetHeight + ddGap(panel) && t.top > below);
+  if (auto) {
+    ddSetUp(panel, below < panel.offsetHeight + ddGap(panel) && t.top > below);
+    return;
+  }
+  const up = dd.__ddPreferredUp;
+  const room = (up ? t.top : below) - ddGap(panel);
+  const opposite = (up ? below : t.top) - ddGap(panel);
+  // Short content or a smaller consumer cap needs less than the usual floor.
+  const needed = Math.min(ddMin(panel), panel.offsetHeight);
+  ddSetUp(panel, room < needed && opposite > room ? !up : up);
+}
+
+/* Change the side without a transition: the shut panel's transform would otherwise
+ * be running when `is-open` arrives, and the open would retarget it from the wrong
+ * side. */
+function ddSetUp(panel, up) {
+  if (panel.classList.contains('is-up') === up) return;
+  const held = panel.style.transition;
+  panel.style.transition = 'none';
+  panel.classList.toggle('is-up', up);
+  ddViewOf(panel).getComputedStyle(panel).transform;
+  panel.style.transition = held;
 }
 
 /** The shift a panel is already carrying, the one ddFitViewport() wrote. Taken
@@ -1057,6 +1080,7 @@ export function wireDropdown(root = document) {
       sweepOrphanPanels(host);
       panel.setAttribute('data-dropdown-portal', '');
       panel.__ddOwner = dd;
+      dd.__ddPreferredUp = panel.classList.contains('is-up');
       dd.__ddPanel = panel;
       host.appendChild(panel);
       if (dd.classList.contains('open')) {

package/src/styles/pagination.css

@@ -69,15 +69,22 @@
    selector for the markup this component emits, and the spelling that keeps a
    rule about an ENABLED control out of the disabled-rule sweep in
    stories/guidelines/accessibility-floor.test.js, which reads selector text. */
-/* The one selected mark #578 round r34 LEFT as an edge, and why. A pager stands on
-   the page in one showcase and on a card in another; --surface steps off the page at
-   1.110:1 and off a card at 1.000:1, so a fill that marks the current page on one
-   ground marks nothing on the other. The hairline is what survives both. Open for
-   Artur on #578. */
+/* #615: an accent fill stands off page and card alike, as the Segmented pill does. */
 .ui-pager__page.is-current:not([disabled]) {
-  background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
-  border-color: var(--border);
-  color: var(--strong);
+  background: var(--accent);
+  color: var(--accent-contrast);
+  font-weight: var(--weight-semibold);
+}
+/* White ink falls below the text floor on the lighter dark-theme accents. */
+:where(:root[data-theme="dark"]) .ui-pager__page.is-current:not([disabled]) {
+  color: var(--signal-contrast);
+}
+
+/* #615: a disabled current page keeps the mark a disabled selected Segmented pill keeps: the quiet
+   fill and the semibold weight, in the disabled ink. A busy pager still does not look live. */
+.ui-pager__page.is-current[disabled] {
+  background: var(--surface-3); /* code-bg: inherit — the selected control's own fill. */
+  /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
   font-weight: var(--weight-semibold);
 }
 

package/src/styles/topbar.css

@@ -209,7 +209,7 @@
    src/styles/dropdown.css:271 `.ui-dropdown__item:hover`.
    why: docs/foundations.md#elevation */
 .vopt:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
-/* The row is a keyboard stop: src/components/dropdown.js:1141
+/* The row is a keyboard stop: src/components/dropdown.js:1165
    `items[next < 0 ? 0 : next]?.focus()` moves focus onto a `[data-dd-item]` with
    the arrow keys, and this is one. It takes the ring on its own 10px radius, the
    same way `.amenu a` above does. #482 */