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>`: make sure element shows up in each back to top demo

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(100svb - 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(100svb - 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(100svb - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100svb - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
-    min-height: calc(100dvh + 401px);
+    min-block-size: calc(100svb + 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(100svb - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100svb - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
-    min-height: calc(100dvh + 401px);
+    min-block-size: calc(100svb + 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/on-a-scrollable-page.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(100svb - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100svb - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
-    min-height: calc(100dvh + 401px);
+    min-block-size: calc(100svb + 401px);
     position: relative;
   }
 
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -40,7 +40,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/position-sticky.html

@@ -17,7 +17,7 @@ <h2>Back to Top Demo</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis tellus nec erat sodales ultrices. Morbi fringilla, purus ut cursus volutpat, dui ipsum varius massa, a lobortis mauris mi et justo. Integer lobortis sed magna in aliquet. Pellentesque suscipit elit enim, in consectetur metus tincidunt eu. In quam dolor, bibendum ac lorem et, blandit lacinia lorem. Praesent bibendum magna vel finibus facilisis. Cras eleifend est sed nisi malesuada, vitae varius sem venenatis. Nam maximus ligula bibendum quam porttitor tempor. Cras in lacus in lacus consectetur placerat lobortis ac velit. Pellentesque venenatis leo sit amet neque commodo pulvinar. Integer quis nulla ac eros luctus scelerisque. Pellentesque interdum sapien eros. Integer id velit sed eros fringilla porttitor.</p>
       <a id="bottom" href="#focusable-element-bottom">Focusable element</a>
     </div>
-    <rh-back-to-top scrollable-selector="#mock" href="#top">Back to top</rh-back-to-top>
+    <rh-back-to-top scrollable-selector="#mock" href="#top" visible="always">Back to top</rh-back-to-top>
     <div class="footer"></div>
   </div>
 
@@ -32,42 +32,39 @@ <h2>Back to Top Demo</h2>
   /* override to place rh-back-to-top in context of page elements */
   rh-back-to-top {
     position: sticky;
-    float: right;
+    float: inline-end;
   }
 
   /* Addtional styles for demo page layout */
   #mock {
-    --_nav-height: 70px;
-    --_footer-height: 400px;
-    --_hero-height: 300px;
-    --_content-width: 60rem;
+    --_nav-block-size: 70px;
+    --_footer-block-size: 400px;
+    --_hero-block-size: 300px;
+    --_content-inline-size: 60rem;
 
     scroll-behavior: smooth;
-    height: calc(100vh - calc(24px * 2) - var(--pf-demo-header-height));
-    overflow-y: scroll;
-    border: var(--rh-border-width-md, 2px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
   }
   #mock .page-body {
     position: relative;
   }
   #mock .nav {
     background-color: #151515;
-    height: var(--_nav-height);
+    block-size: var(--_nav-block-size);
     color: #ffffff;
   }
   #mock .main {
     position: relative;
     margin: 0 auto;
-    max-width: var(--_content-width);
+    max-inline-size: var(--_content-inline-size);
     margin-block: var(--rh-spacer-2xl, 32px);
     padding: var(--rh-spacer-2xl, 32px);
-    min-height: calc(100dvh - var(--_nav-height) - var(--_hero-height));
+    min-block-size: calc(100svb - var(--_nav-block-size) - var(--_hero-block-size));
 
   }
   #mock .hero {
     display: flex;
     justify-content: space-evenly;
-    height: var(--_hero-height);
+    block-size: var(--_hero-block-size);
     background-color: var(--rh-color-surface-lighter, #f2f2f2);
     padding-inline: var(--rh-spacer-2xl, 32px);
     flex-direction: column;
@@ -78,18 +75,18 @@ <h2>Back to Top Demo</h2>
     flex-direction: column;
     padding-inline: var(--rh-spacer-2xl, 32px);
     margin: 0 auto;
-    max-width: var(--_content-width);
+    max-inline-size: var(--_content-inline-size);
   }
   #mock .footer {
     position: static;
     background-color: #151515;
-    height: var(--_footer-height);
+    block-size: var(--_footer-block-size);
     margin-block-start: var(--rh-space-6xl, 96px);
     color: #ffffff;
   }
   #mock #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {

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(100svb + 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(100svb - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100svb - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
     /* scroll distance set to 50px */
-    min-height: calc(100dvh + 51px);
+    min-block-size: calc(100svb + 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';

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

@@ -1,6 +1,7 @@
 <div id="overflow">
   <a id="top" href="#bottom">Go to bottom</a>
-  <p>Scroll down or press tab to see the back to top button</p>
+  <p>Scroll down to see the back to top button</p>
+  <p>View your browser's console to see errors and warnings.</p>
   <a id="bottom" href="#top">Go to top</a>
   <rh-back-to-top></rh-back-to-top>
   <rh-back-to-top id="two" scrollable-selector scroll-distance></rh-back-to-top>
@@ -14,22 +15,22 @@
   main {
     display: block;
     scroll-behavior: smooth;
-    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+    max-block-size: calc(100svb - var(--pf-demo-header-height)) !important;
   }
 
   #nav {
-    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+    block-size: calc(100svb - var(--pf-demo-header-height, 4.375rem)) !important;
   }
 
   #overflow {
-    /* scroll distance set to 50px */
-    min-height: calc(100dvh + 51px);
+    /* Default scroll distance = 400px */
+    min-block-size: calc(100svb + 401px);
     position: relative;
   }
 
   #bottom {
     position: absolute;
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -43,7 +44,7 @@
 <script type="module">
   /* add support for demo/fullscreen and dev server */
   const b2t = document.querySelector('rh-back-to-top:not(#two)');
-  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';