feat(pagination): add numeric part (#1338)

.changeset/paginator-numeric-part.md

@@ -0,0 +1,12 @@
+---
+"@rhds/elements": minor
+---
+`<rh-pagination>`: add `numeric` CSS shadow part, corresponding to the numeric page input
+
+Example: hiding the numeric paginator
+
+```css
+rh-pagination::part(numeric) {
+  display: none;
+}
+```

elements/rh-pagination/demo/no-numeric-control.html

@@ -0,0 +1,22 @@
+<rh-pagination>
+  <ol>
+    <li><a href="#">1</a></li>
+    <li><a href="#2">2</a></li>
+    <li><a href="#3">3</a></li>
+    <li><a href="#4">4</a></li>
+    <li><a href="#5">5</a></li>
+  </ol>
+</rh-pagination>
+
+<link rel="stylesheet" href="../rh-pagination-lightdom.css">
+
+<style>
+  rh-pagination::part(numeric) {
+    display: none;
+  }
+</style>
+
+<script type="module">
+  import '@rhds/elements/rh-pagination/rh-pagination.js';
+</script>
+

elements/rh-pagination/rh-pagination.ts

@@ -128,7 +128,7 @@ export class RhPagination extends LitElement {
         <a id="next" class="stepper" href=${ifDefined(nextHref)} ?inert=${!nextHref} aria-label=${labelNext}>${L1}</a>
         <a id="last" class="stepper" href=${ifDefined(lastHref)} ?inert=${!lastHref} aria-label=${labelLast}>${L2}</a>
 
-        <div id="numeric">
+        <div id="numeric" part="numeric">
           <span id="go-to-page">
             <slot name="go-to-page">Go to page</slot>
           </span>