docs: fix image sizes and content lost in conflict merge

elements/rh-accordion/docs/00-overview.md

@@ -1,8 +1,8 @@
 ## Overview
 {{ tagName | getElementDescription }}
 
-<uxdot-example>
-  <img src="./accordion-sample-element.png" alt="An accordion with four collapsed panels and one expanded panel">
+<uxdot-example width-adjustment="872px">
+  <img src="./accordion-sample-element.png" alt="An accordion with four collapsed panels and one expanded panel" width="872px">
 </uxdot-example>
 
 {% repoStatusList repoStatus=repoStatus %}

elements/rh-accordion/docs/10-style.md

@@ -3,8 +3,8 @@ Accordion panels include title text, a chevron icon, body text, and other conten
 
 ### Anatomy 
 
-<uxdot-example>
-  <img src="../accordion-anatomy.png" alt="Anatomy of an accordion with lots of annotations pointing to various parts">
+<uxdot-example width-adjustment="872px">
+  <img src="../accordion-anatomy.png" alt="Anatomy of an accordion with lots of annotations pointing to various parts" width="872px">
 </uxdot-example>
 
 1) Collapsed panel
@@ -21,58 +21,58 @@ Accordion panels include title text, a chevron icon, body text, and other conten
 ### Sizes 
 There are two available sizes and the only difference is the title text size. You can use the Small size on large breakpoints, but not the Large size on small breakpoints due to the potential of long title text wrapping to more than two lines.
 
-<uxdot-example>
-  <img src="../accordion-sizes.png" alt="A large size accordion with text underneath saying ‘Large size’ and a small size accordion with text underneath saying ‘Small size’">
+<uxdot-example width-adjustment="872px">
+  <img src="../accordion-sizes.png" alt="A large size accordion with text underneath saying ‘Large size’ and a small size accordion with text underneath saying ‘Small size’" width="872px">
 </uxdot-example>
 
 ## Theme 
 An accordion is available in both light and dark themes. The light theme expanded panel includes a box shadow, but the dark theme does not.
 ### Light theme 
 
-<uxdot-example>
-  <img src="../accordion-theme-light.png" alt="Light theme accordion with an expanded panel">
+<uxdot-example width-adjustment="872px">
+  <img src="../accordion-theme-light.png" alt="Light theme accordion with an expanded panel" width="872px">
 </uxdot-example>
 
 ### Dark theme 
 
-<uxdot-example color-palette="darkest">
-  <img src="../accordion-theme-dark.png" alt="Dark theme accordion with an expanded panel">
+<uxdot-example color-palette="darkest" width-adjustment="872px">
+  <img src="../accordion-theme-dark.png" alt="Dark theme accordion with an expanded panel" width="872px">
 </uxdot-example>
 
 ## Configuration
 
 An expanded panel does not have a maximum height, but it may scroll if constrained by vertical space. The width of an accordion varies based on content and page layout. Title text and icons are horizontally aligned.
 
-<uxdot-example>
-  <img src="../accordion-configuration.png" alt="How an accordion is constructed showing alignment, space, scrolling, and width details">
+<uxdot-example width-adjustment="872px">
+  <img src="../accordion-configuration.png" alt="How an accordion is constructed showing alignment, space, scrolling, and width details" width="872px">
 </uxdot-example>
 
 ### Accent slot
 
 The accent slot can be positioned inline or below the panel's title. This can contain tags, badges, or other small elements with secondary information.
 
-<uxdot-example>
-  <img src="../accordion-accent-slot.png" alt="Accordion panel with two tags in inline accent slot and an accordion with two tags below the title">
+<uxdot-example width-adjustment="872px">
+  <img src="../accordion-accent-slot.png" alt="Accordion panel with two tags in inline accent slot and an accordion with two tags below the title" width="872px">
 </uxdot-example>
 
 ### Nested panels 
 Panels can be nested to help organize complex or granular sections of content.
 
-<uxdot-example>
-  <img src="../accordion-nested-panels.png" alt="An accordion with an expanded panel and a nested expanded panel">
+<uxdot-example width-adjustment="872px">
+  <img src="../accordion-nested-panels.png" alt="An accordion with an expanded panel and a nested expanded panel" width="872px">
 </uxdot-example>
 
 ### Stacked panels 
 Multiple panels can be expanded simultaneously even when nested.
 
-<uxdot-example>
+<uxdot-example width-adjustment="872px" width="872px">
   <img src="../accordion-stacked-panels.png" alt="An accordion with one collapsed panel on top and two stacked expanded panels below">
 </uxdot-example>  
 
 ## Space 
 
-<uxdot-example>
-  <img src="../accordion-space.png" alt="Accordion spacing within panels and in between elements like titles, body text, rules, and icons">
+<uxdot-example width-adjustment="872px">
+  <img src="../accordion-space.png" alt="Accordion spacing within panels and in between elements like titles, body text, rules, and icons" width="872px">
 </uxdot-example>
 
 <rh-table>
@@ -89,12 +89,12 @@ Interaction states are visual representations used to communicate the status of
 
 ### Hover
 
-<uxdot-example>
+<uxdot-example width-adjustment="872px">
   <img src="../accordion-hover-theme-light.png" alt="Light theme accordion with a hover state">
 </uxdot-example>
 
-<uxdot-example color-palette="darkest">
-  <img src="../accordion-hover-theme-dark.png" alt="Dark theme accordion with a hover state">
+<uxdot-example width-adjustment="872px" color-palette="darkest">
+  <img src="../accordion-hover-theme-dark.png" alt="Dark theme accordion with a hover state" width="872px">
 </uxdot-example>
 
 
@@ -119,12 +119,12 @@ Interaction states are visual representations used to communicate the status of
 
 ### Focus
 
-<uxdot-example>
-  <img src="../accordion-focus-theme-light.png" alt="Light theme accordion with a focus state">
+<uxdot-example width-adjustment="872px">
+  <img src="../accordion-focus-theme-light.png" alt="Light theme accordion with a focus state" width="872px">
 </uxdot-example>
 
-<uxdot-example color-palette="darkest">
-  <img src="../accordion-focus-theme-dark.png" alt="Dark theme accordion with a focus state">
+<uxdot-example width-adjustment="872px" color-palette="darkest">
+  <img src="../accordion-focus-theme-dark.png" alt="Dark theme accordion with a focus state" width="872px">
 </uxdot-example>
 
 <rh-table>
@@ -153,12 +153,12 @@ Interaction states are visual representations used to communicate the status of
 
 ### Active 
 
-<uxdot-example>
-  <img src="../accordion-active-theme-light.png" alt="Light theme accordion with an active state">
+<uxdot-example width-adjustment="872px">
+  <img src="../accordion-active-theme-light.png" alt="Light theme accordion with an active state" width="872px">
 </uxdot-example>
 
-<uxdot-example>
-  <img src="../accordion-active-theme-dark.png" alt="Dark theme accordion with an active state">
+<uxdot-example width-adjustment="872px">
+  <img src="../accordion-active-theme-dark.png" alt="Dark theme accordion with an active state" width="872px">
 </uxdot-example>
 
 <rh-table>

elements/rh-accordion/docs/20-guidelines.md

@@ -19,18 +19,20 @@ information that might not be critical to read or impact the experience. An
 accordion can also accommodate multiple sections of content, whereas a 
 disclosure can only accommodate one.
 
-<uxdot-example>
+<uxdot-example width-adjustment="872px">
    <img alt="Comparison of how to use accordion vs. disclosure elements showing an accordion on top and a disclosure on the bottom"
-        src="../accordion-vs-disclosure.png">
+        src="../accordion-vs-disclosure.png" 
+        width="872px">
 </uxdot-example>
 
 ### Sizes
 It is acceptable to use the Small size on large breakpoints, but do not use the 
 Large size on small breakpoints.
 
-<uxdot-example>
+<uxdot-example width-adjustment="872px">
    <img alt="Size comparison of accordions; a wide small size accordion is on top, which is acceptable to use, and a thin large size accordion below it which is not acceptable to use"
-        src="../accordion-sizes-best-practices.png">
+        src="../accordion-sizes-best-practices.png" 
+        width="872px">
 </uxdot-example>
 
 ## Writing content
@@ -42,9 +44,10 @@ or when translated. If title text is too long, create another section. Do not
 write title text to sound like a call to action, make it as easy as possible for 
 users to understand the content within.
 
-<uxdot-example>
+<uxdot-example width-adjustment="872px">
    <img alt="Title text examples of various lengths; it should not be too long, too short, or too vague"
-        src="../accordion-title-text.png">
+        src="../accordion-title-text.png" 
+        width="872px">
 </uxdot-example>
 
 1) Title text is too long and should be broken into two sections
@@ -71,9 +74,10 @@ When a panel is expanded, some content must appear below the title text and
 chevron icon. Content can include text, cards, images, etc. Text blocks should 
 not exceed `750px` to maintain optimal readability.
 
-<uxdot-example>
+<uxdot-example width-adjustment="872px">
   <img alt="Accordion showing different elements you may include in the expanded panel like headings, body text, links, cards, and more"
-       src="../accordion-panel-content.png">
+       src="../accordion-panel-content.png" 
+       width="872px">
 </uxdot-example>
 
 ### Long title text
@@ -82,7 +86,8 @@ Title text can be two lines on small breakpoints, but no more.
 
 <uxdot-example width-adjustment="544px">
   <img alt="Two accordions; one wide accordion with the text title on one line and one thin accordion with the text title on two lines"
-       src="../accordion-long-title-text.png">
+       src="../accordion-long-title-text.png"
+       width="544px">
 </uxdot-example>
 
 ## Layout
@@ -92,7 +97,8 @@ columns if necessary.
 
 <uxdot-example width-adjustment="872px">
   <img alt="A wider accordion placed on a 12-column grid and occupying four grid columns"
-       src="../accordion-layout.png">
+       src="../accordion-layout.png"
+       width="872px">
 </uxdot-example>
 
 ## Behavior
@@ -109,22 +115,24 @@ other or not. Expanding one panel does not collapse another.
 
 <uxdot-example width-adjustment="872px">
   <img alt="Two accordions; one is showing two expanded panels stacked on top of each other and the other is showing two expanded panels and one collapsed panel in between"
-       src="../accordion-expanding-multiple-panels.png">
+       src="../accordion-expanding-multiple-panels.png" width="872px">
 </uxdot-example>
 
 ## Responsive design
 
 An accordion changes from the Large size to the Small size as breakpoints get
 smaller.
 
-<uxdot-example no-border variant="full">
+<uxdot-example no-border width-adjustment="1000px" alignment="left" variant="full" >
   <img alt="Accordions on large breakpoints"
-       src="../accordion-breakpoints-large.png">
+       src="../accordion-breakpoints-large.png" 
+       width="1000px">
 </uxdot-example>
 
 <uxdot-example no-border width-adjustment="576px" alignment="left" variant="full">
   <img alt="Accordions on small breakpoints"
-       src="../accordion-breakpoints-small.png">
+       src="../accordion-breakpoints-small.png" 
+       width="576px">
 </uxdot-example>
 
 ### Breakpoints
@@ -148,25 +156,28 @@ smaller.
 
 Do not display one panel only, use an expandable section instead.
 
-<uxdot-example danger>
+<uxdot-example danger width-adjustment="872px">
   <img alt="Accordion having only one panel is incorrect usage"
-       src="../accordion-best-practice-1.png">
+       src="../accordion-best-practice-1.png" 
+       width="872px">
 </uxdot-example>
 
 ### Text readability
 
 Text within panels should not exceed `750px` to maintain optimal readability.
 
-<uxdot-example danger>
+<uxdot-example danger width-adjustment="872px">
   <img alt="Accordion with body text exceeding 750px wide which is incorrect usage"
-       src="../accordion-best-practice-2.png">
+       src="../accordion-best-practice-2.png"
+       width="872px">
 </uxdot-example>
 
 ### Mixing themes
 
 Do not use a dark theme accordion in a light theme environment and vice versa.
 
-<uxdot-example danger>
+<uxdot-example danger width-adjustment="872px">
   <img alt="Do not use a dark theme accordion in a light theme environment and vice versa"
-       src="../accordion-best-practice-3.png">
+       src="../accordion-best-practice-3.png"
+       width="872px">
 </uxdot-example>

elements/rh-alert/docs/00-overview.md

@@ -2,17 +2,17 @@
 
 {{ tagName | getElementDescription }}
 
-<uxdot-example width-adjustment="538px">
+<uxdot-example width-adjustment="456px">
   <img alt="Two examples of the alert element"
        src="alert-overview.svg"
-       width="538px">
+       width="456px">
 </uxdot-example>
 
 {% repoStatusList repoStatus=repoStatus %}
 
 ## Sample element
 
-<rh-alert dismissable>
+<rh-alert dismissable state="info">
   <h3 slot="header">Title</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <rh-button slot="actions" data-action="dismiss" variant="secondary">Confirm</rh-button>
@@ -21,8 +21,8 @@
 
 ## When to use
 
-  - To communicate essential information in a prominent way
-  - To notify a user of a change in status
-  - To communicate urgency using severity
+  - Communicate essential information in a prominent way
+  - Notify a user of a change in status
+  - Communicate urgency using severity
 
 {% repoStatusChecklist repoStatus=repoStatus %}