fix(back-to-top): demo visibility and logical properties

.changeset/large-buckets-cough.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-back-to-top>`: remove user-facing errors and warnings from missing attributes/values from the console

elements/rh-back-to-top/demo/always-visible.html

@@ -8,13 +8,13 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100dvh - var(--pf-demo-header-height)) !important;
   }
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)); !important;
+    block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)); !important;
   }
 </style>

elements/rh-back-to-top/demo/color-context.html

@@ -33,21 +33,21 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100dvh - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
-    min-height: calc(100dvh + 401px);
+    min-block-size: calc(100dvh + 401px);
     position: relative;
   }
 
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -61,7 +61,7 @@
 <script type="module">
   /* add support for demo/fullscreen and dev server */
   const b2t = document.querySelector('rh-back-to-top');
-  const main = document.querySelector('main');
+  const main = document.querySelector('main, [role="main"]');
   // if main isn't scrollable use window
   if (window.getComputedStyle(main).overflow === 'scroll') {
     b2t.scrollableSelector = 'main';

elements/rh-back-to-top/demo/no-slotted-text.html

@@ -13,21 +13,21 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100dvh - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
-    min-height: calc(100dvh + 401px);
+    min-block-size: calc(100dvh + 401px);
     position: relative;
   }
 
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -39,7 +39,7 @@
 <script type="module">
   /* add support for demo/fullscreen and dev server */
   const b2t = document.querySelector('rh-back-to-top');
-  const main = document.querySelector('main');
+  const main = document.querySelector('main, [role="main"]');
   // if main isn't scrollable use window
   if (window.getComputedStyle(main).overflow === 'scroll') {
     b2t.scrollableSelector = 'main';

elements/rh-back-to-top/demo/rh-back-to-top.html

@@ -1,7 +1,18 @@
 <div id="overflow">
+  <p>Scroll down to reveal the back to top element</p>
   <rh-back-to-top href="#">Back to top</rh-back-to-top>
 </div>
 
 <script type="module">
   import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
 </script>
+
+<style>
+  #overflow {
+    min-block-size: calc(100dvh + 401px);
+  }
+
+  p {
+    font-weight: bold;
+  }
+</style>

elements/rh-back-to-top/demo/scroll-distance.html

@@ -12,22 +12,22 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100dvh - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
     /* scroll distance set to 50px */
-    min-height: calc(100dvh + 51px);
+    min-block-size: calc(100dvh + 51px);
     position: relative;
   }
 
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -41,7 +41,7 @@
 <script type="module">
   /* add support for demo/fullscreen and dev server */
   const b2t = document.querySelector('rh-back-to-top');
-  const main = document.querySelector('main');
+  const main = document.querySelector('main, [role="main"]');
   // if main isn't scrollable use window
   if (window.getComputedStyle(main).overflow === 'scroll') {
     b2t.scrollableSelector = 'main';