Merge branch 'main' into dependabot/npm_and_yarn/es-module-shims-2.0.9

.changeset/neat-keys-sleep.md

@@ -0,0 +1,8 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-tile>`:  
+`<rh-stat>`: 
+`<rh-card>`: 
+`<rh-icon>`: no longer force headings to be in all caps

.changeset/rich-adults-move.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-footer>`: show content after 5 seconds if javascript fails

.changeset/warm-forks-switch.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-avatar>`: corrected small viewport margin for `plain` variant avatars

docs/patterns/card/patterns/asset-title-and-link-top.html

@@ -24,7 +24,6 @@ <h4>Title, Lg</h4>
       font-size: var(--rh-font-size-body-text-md, 1rem);
       font-family: var(--rh-font-family-body-text);
       line-height: var(--rh-line-height-body-text, 1.5);
-      text-transform: uppercase; /* deprecated? */
     }
   }
 </style>

docs/patterns/card/patterns/asset-title-and-link.html

@@ -40,7 +40,6 @@ <h4>
       font-size: var(--rh-font-size-body-text-md, 1rem);
       font-family: var(--rh-font-family-body-text);
       line-height: var(--rh-line-height-body-text, 1.5);
-      text-transform: uppercase; /* deprecated? */
     }
   }
 </style>

docs/patterns/card/patterns/fast-facts.html

@@ -58,7 +58,6 @@ <h4>Title, lg</h4>
       font-size: var(--rh-font-size-body-text-md);
       font-family: var(--rh-font-family-body-text);
       line-height: var(--rh-line-height-body-text);
-      text-transform: uppercase; /* deprecated? */
     }
   }
 </style>

docs/patterns/card/patterns/title-bar.html

@@ -19,7 +19,6 @@ <h4 slot="header">Card title</h4>
       font-weight: var(--rh-font-weight-heading-regular);
       font-size: var(--rh-font-size-body-text-md);
       font-family: var(--rh-font-family-body-text);
-      text-transform: uppercase; /* deprecated? */
     }
   }
 </style>

docs/patterns/tabs/patterns/code-tabs.html

@@ -44,7 +44,6 @@
     border: var(--rh-border-width-sm) solid var(--rh-color-border-subtle);
     border-radius: var(--rh-border-radius-default);
     max-width: 56rem; /* warning: magic number */
-    overflow: hidden;
 
     & rh-tab-panel {
       padding: 0;

docs/styles/demo/dev-server.css

@@ -59,3 +59,7 @@
 #source-control {
   margin-inline-start: unset;
 }
+
+html[unresolved] {
+  opacity: 1;
+}

docs/styles/not-defined.css

@@ -8,7 +8,6 @@ uxdot-hero:not(:defined) {
 uxdot-hero:not(:defined) [slot='header'] {
   color: var(--rh-color-text-brand-on-light);
   margin-block-end: 0;
-  text-transform: uppercase;
   font-weight: var(--rh-font-weight-code-medium);
   font-size: var(--rh-font-size-code-lg) !important;
 }

docs/styles/tokens-pages.css

@@ -35,7 +35,6 @@ rh-card.swatches {
     font-weight: inherit !important;
     font-size: inherit !important;
     font-family: inherit !important;
-    text-transform: uppercase;
 
     /* deprecated? */
   }

elements/rh-avatar/rh-avatar.css

@@ -57,7 +57,7 @@
 }
 
 :host([layout='block']) :is(img, canvas, svg),
-#container.mobile :is(img, canvas, svg) {
+:host(:not([plain])) #container.mobile :is(img, canvas, svg) {
   margin-block-end: var(--rh-space-lg, 16px);
 }
 

elements/rh-button/demo/form-control.html

@@ -34,10 +34,6 @@
   form h2 {
     width: 100%;
   }
-
-  form output {
-    text-transform: capitalize;
-  }
 </style>
 
 <script type="module">

elements/rh-card/demo/color-context.html

@@ -97,7 +97,6 @@ <h2 slot="header">Custom header</h2>
         font-weight: var(--rh-font-weight-heading-regular);
         font-size: var(--rh-font-size-body-text-md);
         font-family: var(--rh-font-family-body-text);
-        text-transform: uppercase; /* deprecated? */
       }
     }
   }

elements/rh-card/demo/sticky-pattern.html

@@ -35,7 +35,6 @@ <h2 slot="header">Heading, xs</h2>
       & .title {
         font-family: var(--rh-font-family-body-text);
         font-size: var(--rh-font-size-body-text-md);
-        text-transform: uppercase;
       }
       & > p {
         margin-block: 0;

elements/rh-card/demo/title-pattern.html

@@ -60,7 +60,6 @@ <h2 slot="header">Title, lg</h2>
         flex-flow: column;
       }
       & h2 {
-        text-transform: uppercase;
         font-family: var(--rh-font-family-body-text);
         font-size: var(--rh-font-size-body-text-md);
         font-weight: var(--rh-font-weight-body-text-regular);

elements/rh-card/demo/variants.html

@@ -152,7 +152,6 @@ <h2>Card with slotted image header. Full width image.</h2>
       margin: 0;
       padding: var(--rh-space-lg) var(--rh-space-xl);
       background-color: var(--_header-bg, var(--rh-color-surface-light));
-      text-transform: uppercase;
     }
   }
 

elements/rh-footer/rh-footer-lightdom.css

@@ -31,6 +31,7 @@
 }
 
 :is(rh-footer, rh-footer-universal) :is(h1, h2, h3, h4, h5, h6) {
+  color: var(--rh-color-text-primary-on-dark, #ffffff);
   font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
   line-height: var(--rh-line-height-heading, 1.3);
 }
@@ -65,6 +66,16 @@ rh-footer-universal [slot^='links'] a {
  */
 :is(rh-footer, rh-footer-universal) {
   --rh-footer-section-side-gap: var(--rh-space-lg, 16px);
+
+  overflow-y: scroll;
+
+  & > :not([slot='logo'], rh-footer-universal) {
+    animation-name: var(--_fallback-animation, deopacitize-footer);
+    animation-duration: 5s;
+    animation-timing-function: ease;
+    animation-delay: 0s;
+    opacity: var(--_fallback-opacity);
+  }
 }
 
 /* (min-width: --rh-breakpoint-sm) */
@@ -95,33 +106,21 @@ rh-footer:not(:defined) {
   min-height: var(--rh-footer-nojs-min-height, 750px);
 }
 
-rh-footer-universal:not(:defined):before {
-  grid-area: global;
-}
-
-/* Adding styles to logo */
-rh-footer:not(:defined) > [slot='logo'] {
-  padding: var(--rh-space-2xl, 32px) var(--_section-side-gap);
-}
-
-/* A11y hide child components */
-rh-footer:not(:defined) > :not([slot='logo'], rh-footer-universal),
-rh-footer-universal:not(:defined) > * {
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
+@keyframes deopacitize-footer {
+  0% { --_fallback-opacity: 0; }
+  99% { --_fallback-opacity: 0; }
+  100% { --_fallback-opacity: 1; }
 }
 
 rh-footer-universal:not(:defined) {
   background-color: var(--rh-color-surface-darkest, #151515);
   display: block;
   width: 100%;
   min-height: 176px;
+
+  &:before {
+    grid-area: global;
+  }
 }
 
 rh-footer-universal rh-footer-copyright {

elements/rh-footer/rh-footer.css

@@ -9,6 +9,14 @@
   flex-direction: column;
 }
 
+:host,
+::slotted(rh-footer-universal) {
+  --_fallback-animation: nothing-doing !important;
+  --_fallback-opacity: 1 !important;
+
+  overflow-y: initial;
+}
+
 footer,
 .global-base {
   --_icon-color: var(--rh-footer-icon-color, var(--rh-color-gray-40, #a3a3a3));

elements/rh-icon/demo/sets.html

@@ -74,10 +74,6 @@ <h2 id="${set}">${set}</h2>
     max-width: 300px;
   }
 
-  h2 {
-    text-transform: capitalize;
-  }
-
   section {
     --rh-tooltip-max-width: 50em;
     --rh-tooltip-content-padding-block-start: 0;

elements/rh-stat/rh-stat.css

@@ -65,7 +65,6 @@ span,
   font-size: var(--rh-font-size-body-text-xl, 1.25rem);
   font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
   font-weight: var(--rh-font-weight-body-text-regular, 400);
-  text-transform: uppercase;
 }
 
 #statistic {

elements/rh-tile/rh-tile.css

@@ -96,7 +96,6 @@
   }
 
   & ::slotted([slot='title']) {
-    text-transform: uppercase;
     font-size: var(--rh-font-size-body-text-md, 1rem) !important;
   }
 

elements/rh-video-embed/docs/10-style.md

@@ -22,7 +22,9 @@ The video embed element consists of a semitransparent play button with a video t
 
 ## Theme
 
-The video embed element is available in both light and dark themes. It can include either a light or a dark play button, depending on the thumbnail image underneath. If an image is lighter, use a dark play button for accessibility and vice versa.
+The video embed element is available in both light and dark themes. It can include either a light or a dark play button, depending on the thumbnail image underneath. 
+
+The user is currently responsible for setting the play button color and preventing color contrast issues between the button and the video thumbnail. If an image is on a light color palette or if its video thumbnail image uses mostly light colors, use a light theme play button for accessibility and vice versa.
 
 <div class="grid xs-two-columns">
   <uxdot-example width-adjustment="420px">

elements/rh-video-embed/docs/20-guidelines.md

@@ -58,14 +58,12 @@ The video’s width will dynamically adjust with its parent container. The video
 
 ## Best Practices
 
-### Play button
-
-Display the play button in a consistent, predictable spot for all videos.
+### Play button position
 
 <div class="grid xs-two-columns">
   <uxdot-best-practice variant="do">
     <uxdot-example color-palette="lightest" width-adjustment="420px" slot="image">
-      <img src="../guidelines-best-practice-1-do.svg"
+      <img src="../video-player-best-practices-btn-position-do.png"
         alt="Video with vertically and horizontally centered play button"
         width="420"
         height="236">
@@ -75,7 +73,7 @@ Display the play button in a consistent, predictable spot for all videos.
 
   <uxdot-best-practice variant="dont">
     <uxdot-example color-palette="lightest" width-adjustment="420px" slot="image">
-      <img src="../guidelines-best-practice-1-dont.svg"
+      <img src="../video-player-best-practices-btn-position-dont.png"
         alt="Video with play button in the bottom right"
         width="420"
         height="236">
@@ -84,16 +82,37 @@ Display the play button in a consistent, predictable spot for all videos.
   </uxdot-best-practice>
 </div>
 
+### Play button theme
 
-### Aspect Ratio
+<div class="grid xs-two-columns">
+  <uxdot-best-practice variant="do">
+    <uxdot-example color-palette="lightest" width-adjustment="420px" slot="image">
+      <img src="../video-player-best-practices-btn-theme-do.png"
+        alt="Light theme play button layered on a light-colored thumbnail image"
+        width="420"
+        height="236">
+    </uxdot-example>
+    <p>A light theme play button should be used if the thumbnail image has a light color palette, and a dark theme play button should be used against dark thumbnails.</p>
+  </uxdot-best-practice>
 
-A video embed element and should have the same aspect ratio as the video it’s displaying.
+  <uxdot-best-practice variant="dont">
+    <uxdot-example color-palette="lightest" width-adjustment="420px" slot="image">
+      <img src="../video-player-best-practices-btn-theme-dont.png"
+        alt="Dark theme play button layered on a light-colored thumbnail image"
+        width="420"
+        height="236">
+    </uxdot-example>
+    <p>Do not use a dark theme play button over a thumbnail with mostly light colors, and vice versa.</p>
+  </uxdot-best-practice>
+</div>
+
+### Aspect Ratio
 
 <div class="grid xs-two-columns">
   <uxdot-best-practice variant="do">
     <uxdot-example color-palette="lightest" width-adjustment="420px" slot="image">
-      <img src="../guidelines-best-practice-2-do.svg"
-        alt="Video embed with a correct, 16:9 aspect ratio"
+      <img src="../video-player-best-practices-aspect-ratio-do.png"
+        alt="Video embed with a correctly resized thumbnail image"
         width="420"
         height="237">
     </uxdot-example>
@@ -102,8 +121,8 @@ A video embed element and should have the same aspect ratio as the video it’s
 
   <uxdot-best-practice variant="dont">
     <uxdot-example color-palette="lightest" width-adjustment="420px" slot="image">
-      <img src="../guidelines-best-practice-2-dont.svg"
-        alt="Video embed with a very narrow aspect ratio"
+      <img src="../video-player-best-practices-aspect-ratio-dont.png"
+        alt="Video embed with a narrow aspect ratio, causing the thumbnail to look distorted"
         width="420"
         height="184">
     </uxdot-example>

uxdot/uxdot-hero.css

@@ -20,7 +20,7 @@ slot[name='header']::slotted(*) {
 slot[name='header']::slotted(h1) {
   color: var(--rh-color-text-brand-on-light);
   margin-block-end: 0;
-  text-transform: uppercase;
+  text-transform: capitalize;
   font-family: var(--rh-font-family-heading);
   line-height: var(--rh-line-height-heading);
   font-size: var(--rh-font-size-code-lg) !important;

uxdot/uxdot-pattern.css

@@ -77,10 +77,9 @@ h3,
   gap: var(--rh-space-lg, 16px);
 }
 
-rh-tabs {
+#code-tabs {
   border: var(--rh-border-width-sm) solid var(--rh-color-border-subtle);
   border-radius: var(--rh-border-radius-default);
-  overflow: hidden;
   grid-area: code;
 
   & rh-tab-panel {