@slotted/react 0.1.0-beta.2 → 0.1.0-beta.4

package/dist/docs/top-navigation.examples.md

@@ -115,15 +115,33 @@ Excerpt — not a complete module
 
 ### Where the reader is
 
-value on the root names the destination and a press asks it to move with the device’s reason; a link that states current itself wins. Where the current destination has folded, more carries the mark in its place.
+value on the root names the destination and a press asks it to move with the device’s reason; a link that states current itself wins. Where the current destination has folded, more carries the mark in its place. With a router, usePressSelection paints the press before the route renders: the item is current at once, and the navigation runs after the frame that shows it. A click carrying a modifier key is left to the browser.
 
 Excerpt — not a complete module
 
 ```tsx
-const [value, setValue] = useState<string | null>('cargas');
-
-<TopNavigation value={value} onValueChange={(next) => setValue(next)}>
-  …
+const { pathname } = useLocation();
+const navigate = useNavigate();
+const { selected, select } = usePressSelection(pathname);
+
+const press = (to: string) => (event: MouseEvent) => {
+  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return;
+  }
+  event.preventDefault();
+  select(to, () => navigate(to));
+};
+
+<TopNavigation value={selected ?? null}>
+  <TopNavigationNav>
+    <TopNavigationList>
+      <TopNavigationItem value="/cargas">
+        <TopNavigationLink href="/cargas" onClick={press('/cargas')}>
+          Cargas
+        </TopNavigationLink>
+      </TopNavigationItem>
+    </TopNavigationList>
+  </TopNavigationNav>
 </TopNavigation>;
 ```
 

package/dist/docs/top-navigation.json

@@ -598,9 +598,9 @@
     {
       "id": "current",
       "title": "Where the reader is",
-      "note": "value on the root names the destination and a press asks it to move with the device’s reason; a link that states current itself wins. Where the current destination has folded, more carries the mark in its place.",
+      "note": "value on the root names the destination and a press asks it to move with the device’s reason; a link that states current itself wins. Where the current destination has folded, more carries the mark in its place. With a router, usePressSelection paints the press before the route renders: the item is current at once, and the navigation runs after the frame that shows it. A click carrying a modifier key is left to the browser.",
       "language": "tsx",
-      "source": "const [value, setValue] = useState<string | null>('cargas');\n\n<TopNavigation value={value} onValueChange={(next) => setValue(next)}>\n  …\n</TopNavigation>;\n",
+      "source": "const { pathname } = useLocation();\nconst navigate = useNavigate();\nconst { selected, select } = usePressSelection(pathname);\n\nconst press = (to: string) => (event: MouseEvent) => {\n  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {\n    return;\n  }\n  event.preventDefault();\n  select(to, () => navigate(to));\n};\n\n<TopNavigation value={selected ?? null}>\n  <TopNavigationNav>\n    <TopNavigationList>\n      <TopNavigationItem value=\"/cargas\">\n        <TopNavigationLink href=\"/cargas\" onClick={press('/cargas')}>\n          Cargas\n        </TopNavigationLink>\n      </TopNavigationItem>\n    </TopNavigationList>\n  </TopNavigationNav>\n</TopNavigation>;\n",
       "verdict": "excerpt"
     },
     {

package/dist/docs/tour.json

@@ -174,7 +174,7 @@
           "part": "content",
           "element": "div role=\"dialog\"",
           "required": true,
-          "purpose": "TourContent. The card: named by the title, described by the description, aria-modal on a modal step. Takes focus and reads the arrow keys."
+          "purpose": "TourContent. The card: named by the title, described by the description, aria-modal on a modal step. Takes focus and reads the arrow keys. It draws no padding: TourHeader, TourBody and TourFooter carry the card inset, set by --slotted-tour-padding-inline and --slotted-tour-padding-block."
         },
         {
           "part": "media",