More/better parts for *-demo components

src/components/code-demo/code-demo.styles.ts

@@ -84,13 +84,13 @@ export default css`
     }
   }
 
-  [part~='toggle'] wa-icon {
+  [part~='toggle-button'] wa-icon {
     transition-property: rotate;
   }
 
   :host(:not([open])) {
     #source,
-    [part~='toggle'] wa-icon {
+    [part~='toggle-button'] wa-icon {
       transition-duration: var(--code-collapse-duration);
     }
 
@@ -103,7 +103,7 @@ export default css`
 
   :host([open]) {
     #source,
-    [part~='toggle'] wa-icon {
+    [part~='toggle-button'] wa-icon {
       transition-duration: var(--code-expand-duration);
     }
 
@@ -120,7 +120,7 @@ export default css`
       }
     }
 
-    [part~='toggle'] wa-icon {
+    [part~='toggle-button'] wa-icon {
       rotate: 180deg;
     }
   }
@@ -188,7 +188,7 @@ export default css`
         outline: var(--wa-focus-ring);
       }
 
-      &[part~='toggle'] {
+      &[part~='toggle-button'] {
         flex: 1;
       }
     }

src/components/code-demo/code-demo.ts

@@ -37,9 +37,12 @@ const URL_ATTRIBUTES = ['src', 'href'];
  * @csspart preview - The container of the code example preview.
  * @csspart controls - The container of the control buttons.
  * @csspart button - The control buttons.
- * @csspart toggle - The toggle button.
- * @csspart edit - The edit button.
+ * @csspart open-button - The open in new tab button.
+ * @csspart toggle-button - The toggle button.
+ * @csspart edit-button - The edit button.
  * @csspart iframe - The iframe that contains the preview (in isolated demos).
+ * @csspart viewport-demo - The viewport demo container (in isolated demos).
+ * @csspart viewport-controls - The viewport demo controls (in isolated demos).
  *
  * @cssproperty --preview-backdrop - The color behind the preview, shown when it is resized
  * @cssproperty --preview-background - The background color of the preview.
@@ -85,7 +88,7 @@ export default class WaCodeDemo extends WebAwesomeElement {
     if (this.viewport) {
       // Viewport emulation
       viewportHTML = html`
-        <wa-viewport-demo .viewport=${this.viewport}>
+        <wa-viewport-demo .viewport=${this.viewport} part="viewport-demo" exportparts="controls:viewport-controls">
           <iframe title="Code preview" srcdoc="${code}" part="iframe"></iframe>
         </wa-viewport-demo>
       `;
@@ -104,7 +107,7 @@ export default class WaCodeDemo extends WebAwesomeElement {
       <div id="buttons" part="controls">
         <button
           type="button"
-          part="toggle button"
+          part="toggle-button button"
           aria-expanded="${this.open ? 'true' : 'false'}"
           aria-controls="source"
           @click=${this.toggle}
@@ -113,12 +116,12 @@ export default class WaCodeDemo extends WebAwesomeElement {
           <wa-icon name="chevron-down"></wa-icon>
         </button>
         ${this.viewport
-          ? html`<button type="button" part="open button" @click=${this.openInNewTab}>
+          ? html`<button type="button" part="open-button button" @click=${this.openInNewTab}>
               <wa-icon name="arrow-up-right-from-square"></wa-icon>
               Open
             </button>`
           : ''}
-        <button type="button" part="edit button" @click=${this.edit}>
+        <button type="button" part="edit-button button" @click=${this.edit}>
           <wa-icon name="pen-to-square"></wa-icon>
           Edit
         </button>

src/components/viewport-demo/viewport-demo.styles.ts

@@ -9,6 +9,8 @@ export default css`
     --viewport-padding: var(--wa-space-2xl, 2rem);
     --viewport-initial-aspect-ratio: 16 / 9;
     --viewport-bezel-width: 0.25em;
+
+    display: contents;
   }
 
   #viewport {
@@ -17,11 +19,7 @@ export default css`
     display: flex;
     flex-flow: column;
     align-items: end;
-
     width: 100%;
-    --_aspect-ratio: calc(var(--viewport-width-px) / var(--viewport-height-px));
-    --aspect-ratio: var(--_aspect-ratio, var(--viewport-initial-aspect-ratio));
-
     height: fit-content;
     min-width: var(--viewport-min-width, 2em);
     max-width: min(var(--viewport-max-width), 100%);
@@ -50,6 +48,8 @@ export default css`
 
     /* User has not yet resized the viewport */
     &:not([style*='height:']) ::slotted(iframe) {
+      --_aspect-ratio: calc(var(--viewport-width-px) / var(--viewport-height-px));
+      --aspect-ratio: var(--_aspect-ratio, var(--viewport-initial-aspect-ratio));
       aspect-ratio: var(--aspect-ratio);
     }
   }

src/components/viewport-demo/viewport-demo.ts

@@ -57,6 +57,8 @@ export const viewportPropertyConverter = {
  *
  * @slot - The iframe (usually an `<iframe>` element).
  *
+ * @csspart frame - The visible frame around the viewport.
+ *
  * @cssproperty --viewport-initial-aspect-ratio - The initial aspect ratio of the viewport, when the `viewport` attribute is used. Defaults to `16 / 9`.
  * @cssproperty --viewport-bezel-width - The width of the bezel around the viewport. Defaults to `0.25em`.
  * @cssproperty --viewport-background - The background color of the viewport. Defaults to `var(--wa-color-surface-default, canvas)`.
@@ -285,7 +287,7 @@ export default class WaViewportDemo extends WebAwesomeElement {
     }
 
     return html`
-      <div id="viewport" part="viewport" style=${styleMap(viewportStyle)}>
+      <div id="viewport" part="frame" style=${styleMap(viewportStyle)}>
         <span part="controls">
           ${dimensions}
           <span class="zoom">