Change the default layout of the footer slots to vertical

puzzle · Jan 8, 2025 · ea68454 · ea68454
1 parent 49e4c4c
commit ea68454
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,12 @@
 # Puzzle Shell Changelog
 
+## 5.0.0
+
+- BREAKING CHANGE: Change the default layout of the footer slots to vertical
+
 ## 4.2.4
 
-Update dependencies (incl. Lit 3.2.1)
+- Update dependencies (incl. Lit 3.2.1)
 
 ## 4.2.3
 

diff --git a/src/components/Footer.ts b/src/components/Footer.ts
@@ -10,17 +10,25 @@ export class Footer extends LitElement {
   static styles = [
     theme,
     css`
-      :host(pzsh-footer) {
+      :host {
         padding: calc(var(--pzsh-spacer)) calc(6 * var(--pzsh-spacer));
         background-color: var(--pzsh-footer-bg);
 
         display: flex;
-        justify-content: space-between;
-        align-items: center;
+        flex-direction: column;
+        align-items: start;
 
         border-top: 2px solid var(--pzsh-footer-border);
       }
 
+      .named-slots {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: start;
+      }
+
       ::slotted(*) {
         color: var(--pzsh-color-gray-4);
         font-family: Roboto, sans-serif;
@@ -30,11 +38,12 @@ export class Footer extends LitElement {
         padding-bottom: var(--pzsh-spacer);
 
         display: flex;
+        flex-direction: column;
         flex: 1;
       }
 
       ::slotted([slot="start"]) {
-        align-items: center;
+        align-items: start;
         justify-content: flex-start;
       }
 
@@ -44,40 +53,36 @@ export class Footer extends LitElement {
       }
 
       ::slotted([slot="end"]) {
-        align-items: center;
+        align-items: end;
         justify-content: flex-end;
       }
 
       @media (max-width: ${theme.breakpoint}px) {
-        :host(pzsh-footer) {
+        :host {
           padding: calc(var(--pzsh-spacer)) calc(3 * var(--pzsh-spacer));
-
-          display: flex;
-          flex-direction: column;
-
-          row-gap: var(--pzsh-spacer);
         }
 
-        ::slotted([slot="start"]) {
-          order: 2;
-        }
-
-        ::slotted([slot="center"]) {
-          order: 1;
+        .named-slots {
+          flex-direction: column;
+          row-gap: calc(3 * var(--pzsh-spacer));
         }
 
+        ::slotted([slot="start"]),
+        ::slotted([slot="center"]),
         ::slotted([slot="end"]) {
-          order: 3;
+          align-items: start;
         }
       }
     `,
   ];
 
   render() {
     return html`
-      <slot name="start"></slot>
-      <slot name="center"></slot>
-      <slot name="end"></slot>
+      <div class="named-slots">
+        <slot name="start"></slot>
+        <slot name="center"></slot>
+        <slot name="end"></slot>
+      </div>
       <slot></slot>
     `;
   }