Merge branch 'next' of https://github.com/shoelace-style/webawesome into next

docs/_includes/sidebar.njk

@@ -262,7 +262,8 @@
       <li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
       <li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
        <li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
-      <li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>mary">Order Summaries</a></li>
+      <li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
+      <li><a href="/docs/patterns/ecommerce-order-summary">Order Summaries</a></li>
       <li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
     </ul>
   </li>

docs/docs/patterns/portfilio.md

@@ -1,9 +0,0 @@
----
-title: Business
-description: TODO
-layout: pattern.njk
----
-
-TODO Page Description
-
-## Examples

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

@@ -66,6 +66,7 @@ export default css`
     overflow: hidden;
     transition-property: height, display;
     transition-behavior: allow-discrete;
+    display: block;
 
     &::slotted(pre) {
       position: relative;
@@ -82,49 +83,44 @@ export default css`
     &:not(:has(+ #buttons)) {
       border-bottom: none;
     }
-  }
 
-  [part~='toggle-button'] wa-icon {
-    transition-property: rotate;
-  }
-
-  :host(:not([open])) {
-    #source,
-    [part~='toggle-button'] wa-icon {
-      transition-duration: var(--code-collapse-duration);
-    }
-
-    #source {
-      /* Collapsed */
+    /* Collapsed */
+    &:not(:host([open]) *) {
       height: 0px;
       display: none;
     }
-  }
 
-  :host([open]) {
-    #source,
-    [part~='toggle-button'] wa-icon {
-      transition-duration: var(--code-expand-duration);
-    }
-
-    #source {
-      /* Expanded */
+    /* Expanded */
+    &:is(:host([open]) *) {
       height: auto;
       display: block;
-    }
 
-    @starting-style {
-      #source {
+      @starting-style {
         height: 0px;
         display: block;
       }
     }
+  }
 
-    [part~='toggle-button'] wa-icon {
+  [part~='toggle-button'] wa-icon {
+    transition-property: rotate;
+
+    &:is(:host([open]) *) {
       rotate: 180deg;
     }
   }
 
+  #source,
+  [part~='toggle-button'] wa-icon {
+    &:not(:host([open]) *) {
+      transition-duration: var(--code-collapse-duration);
+    }
+
+    &:is(:host([open]) *) {
+      transition-duration: var(--code-expand-duration);
+    }
+  }
+
   #buttons {
     display: flex;
     align-items: stretch;

src/components/page/page.ts

@@ -298,6 +298,8 @@ export default class WaPage extends WebAwesomeElement {
           footer:drawer__footer
         "
         class="navigation-drawer"
+        with-header
+        with-footer
       >
         <slot slot="label" part="navigation-header" name="mobile-navigation-header">
           <slot name=${this.view === 'mobile' ? 'navigation-header' : '___'}></slot>