Work on panels

libs/panels/bottom-panel/src/lib/bottom-panel.component.stories.ts

@@ -16,6 +16,10 @@ export default {
     </style>
 
     <z-panels.bottom ?open=${args.open}>
+      <div slot="header">
+        <h2>est excepteur ea irure elit</h2>
+      </div>
+
       <p>
         Esse laborum pariatur irure in consequat deserunt officia. Eu aliquip ad duis. Voluptate velit fugiat ex Lorem et. Ea laborum ut
         veniam est ad consequat pariatur.

libs/panels/bottom-panel/src/lib/bottom-panel.component.ts

@@ -16,6 +16,8 @@ export default class BottomPanel extends LitElement {
   /** Private variables */
   private readonly _destroyController = new DestroyController(this);
 
+  private readonly _closeEvent = new CustomEvent('close', { bubbles: false });
+
   /** Protected variables */
 
   /** Public variables */
@@ -29,7 +31,10 @@ export default class BottomPanel extends LitElement {
       .pipe(
         filter(() => this.open),
         filter((event: MouseEvent) => event.target === this),
-        tap(() => (this.open = false)),
+        tap(() => {
+          this.open = false;
+          this.dispatchEvent(this._closeEvent);
+        }),
         takeUntil(this._destroyController.destroy),
       )
       .subscribe();

libs/panels/bottom-panel/src/lib/styles/index.ts

@@ -1,5 +1,9 @@
+import { variable } from '@hijlkema-codes/internal/z-styles';
+
 import { css } from 'lit';
 
+import { backgroundColor, borderRadius, maxHeight, padding } from './variables';
+
 export const hostStyles = css`
   :host {
     display: block;
@@ -36,13 +40,13 @@ export const hostStyles = css`
 export const panelStyles = css`
   aside {
     position: absolute;
-    background-color: #fff;
+    background-color: ${variable(backgroundColor, 'hsl(0, 100%, 100%)')};
     box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.04);
-    border-radius: 12px 12px 0 0;
-    padding: 2rem 1.5rem;
+    border-radius: ${variable(borderRadius, '.75rem .75rem 0 0')};
+    padding: ${variable(padding, '2rem 1.5rem')};
     inset-inline: 0;
     bottom: 0;
-    max-height: 60dvh;
+    max-height: ${variable(maxHeight, '60vh')};
     pointer-events: auto;
     transition: transform 0.3s ease-out;
     overflow: scroll;

libs/panels/bottom-panel/src/lib/styles/variables.ts

@@ -0,0 +1,4 @@
+export const borderRadius = '--z-panels--bottom-panel--border-radius';
+export const backgroundColor = '--z-panels--bottom-panel--background-color';
+export const padding = '--z-panels--bottom-panel--padding';
+export const maxHeight = '--z-panels--bottom-panel--max-height';

libs/panels/side-panel/src/lib/panels-side-panel.ts

@@ -1,3 +1,28 @@
-export function panelsSidePanel(): string {
-  return 'panels-side-panel';
+import { DestroyController } from '@z-elements/_internal/controllers';
+
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('z-panels.side')
+export default class SidePanel extends LitElement {
+  static override get styles() {
+    return [];
+  }
+
+  /** Private variables */
+  private readonly _destroyController = new DestroyController(this);
+
+  private readonly _closeEvent = new CustomEvent('close', { bubbles: false });
+
+  /** Protected variables */
+
+  /** Public variables */
+
+  /** constructor & lifecycle */
+
+  /** Public methods */
+
+  /** Protected methods */
+
+  /** Private methods */
 }