@apliteni/apliteni-ui 0.84.0 → 0.85.0

package/guidelines/motion.md

@@ -46,7 +46,7 @@
 
 **Why:** Published bundles cap animations and transitions at 0.01ms under `prefers-reduced-motion`, so focus reaches a visible control without delay.
 
-**Do:** Open drawers and confirmations without internal transitions.
+**Do:** Open drawers, confirmations, command palettes and dropdown panels without internal transitions.
 
 **Don't:** Keep a transition running after reduced motion is requested.
 

package/package.json

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

package/src/styles/dropdown.css

@@ -126,6 +126,16 @@
 .ui-dropdown.open .ui-dropdown__panel,
 .ui-dropdown__panel--portal.is-open { transition-property: opacity, transform; }
 
+/* And nothing inside it is held either. Under reduced motion an element that names no
+   property of its own still transitions the inherited `visibility`, so it is hidden in
+   the frame openDropdown() focuses into it — #519. Keyed on the data hook, because the
+   topbar's two menus open on the same wiring and keep their own CSS.
+   why: docs/specification.md#the-dropdown-panel */
+@media (prefers-reduced-motion: reduce) {
+  .open > [data-dropdown-panel] *,
+  [data-dropdown-panel].is-open * { transition: none !important; }
+}
+
 /* Portalled panel — wireDropdown() moves it onto <body>, clear of every
    ancestor's overflow and every ancestor's stacking context. The descendant
    selector above stops matching the moment it leaves the trigger's subtree, so

package/src/styles/topbar.css

@@ -188,7 +188,7 @@
   transition: background var(--dur-fast) var(--ease);
 }
 /* Menu rows use the reading surface and an edge on hover — see
-   src/styles/dropdown.css:166 `.ui-dropdown__item:hover`.
+   src/styles/dropdown.css:176 `.ui-dropdown__item:hover`.
    why: docs/specification.md#elevation */
 .vopt:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
 /* The row is a keyboard stop: src/components/dropdown.js:554
@@ -269,7 +269,10 @@
   border: 1px solid var(--float-edge);
   box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
   border-radius: 14px;
-  overflow: hidden;
+  /* No clip. The rows reach this panel's edges, and the ring a focused row draws reaches
+     3px past itself; `overflow: hidden` here cut that down to the one pixel of border it
+     had, and the reader met two accent bars instead of a ring. The ring crosses the edge
+     now. #519 why: docs/specification.md#a-menu-panel-does-not-cut-off-its-rows-ring */
   opacity: 0;
   visibility: hidden;
   pointer-events: none; /* see .vsw__menu above */