release: cubone

.changeset/dry-icons-love.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-pagination>`: improves layouts for non-left-to-right languages

.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

.changeset/large-gifts-promise.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-dialog>`: Aligned CSS variable naming with privacy conventions by prefixing the undocumented `--offset`, `--offset-top`, and `--offset-right` variables with an underscore, marking them as private (`--_offset`, `--_offset-top`, `--_offset-right`).

.changeset/loud-coins-shake.md

@@ -0,0 +1,21 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-dialog>`: Dialog now uses the native HTML `<dialog>` element internally.
+
+Note: the `overlay` CSS shadow part is now deprecated in favor of the `--rh-dialog-backdrop-background-color` CSS custom property.  It will still work, but you can expect the `overlay` part to be removed in a future version
+
+Before:
+
+```css
+rh-dialog::part(overlay) { ... }
+```
+
+After:
+
+```css
+rh-dialog {
+  --rh-dialog-backdrop-background-color: ghostwhite;
+}
+```

.changeset/thick-flowers-beam.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-blockquote>`: fix `align="center"` alignment and font size.

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';