Adds event description support in calendar UI

Extends event model to include optional description field

Enhances event rendering with:
- New description getter/setter in base event element
- Updated CSS grid layout for description display
- Dynamic description handling in event rendering
- Updated mock event data with descriptions

Improves visual information density and event context in calendar view

src/elements/SwpEventElement.ts

@@ -60,6 +60,13 @@ export abstract class BaseSwpEventElement extends HTMLElement {
     this.dataset.title = value;
   }
 
+  get description(): string {
+    return this.dataset.description || '';
+  }
+  set description(value: string) {
+    this.dataset.description = value;
+  }
+
   get type(): string {
     return this.dataset.type || 'work';
   }
@@ -77,7 +84,7 @@ export class SwpEventElement extends BaseSwpEventElement {
    * Observed attributes - changes trigger attributeChangedCallback
    */
   static get observedAttributes() {
-    return ['data-start', 'data-end', 'data-title', 'data-type'];
+    return ['data-start', 'data-end', 'data-title', 'data-description', 'data-type'];
   }
 
   /**
@@ -199,6 +206,7 @@ export class SwpEventElement extends BaseSwpEventElement {
     this.innerHTML = `
       <swp-event-time data-duration="${durationMinutes}">${timeRange}</swp-event-time>
       <swp-event-title>${this.title}</swp-event-title>
+      ${this.description ? `<swp-event-description>${this.description}</swp-event-description>` : ''}
     `;
   }
 
@@ -208,6 +216,7 @@ export class SwpEventElement extends BaseSwpEventElement {
   private updateDisplay(): void {
     const timeEl = this.querySelector('swp-event-time');
     const titleEl = this.querySelector('swp-event-title');
+    const descEl = this.querySelector('swp-event-description');
 
     if (timeEl && this.dataset.start && this.dataset.end) {
       const start = new Date(this.dataset.start);
@@ -223,6 +232,20 @@ export class SwpEventElement extends BaseSwpEventElement {
     if (titleEl && this.dataset.title) {
       titleEl.textContent = this.dataset.title;
     }
+
+    if (this.dataset.description) {
+      if (descEl) {
+        descEl.textContent = this.dataset.description;
+      } else if (this.description) {
+        // Add description element if it doesn't exist
+        const newDescEl = document.createElement('swp-event-description');
+        newDescEl.textContent = this.description;
+        this.appendChild(newDescEl);
+      }
+    } else if (descEl) {
+      // Remove description element if description is empty
+      descEl.remove();
+    }
   }
 
 
@@ -265,6 +288,7 @@ export class SwpEventElement extends BaseSwpEventElement {
 
     element.dataset.eventId = event.id;
     element.dataset.title = event.title;
+    element.dataset.description = event.description || '';
     element.dataset.start = dateService.toUTC(event.start);
     element.dataset.end = dateService.toUTC(event.end);
     element.dataset.type = event.type;
@@ -280,6 +304,7 @@ export class SwpEventElement extends BaseSwpEventElement {
     return {
       id: element.dataset.eventId || '',
       title: element.dataset.title || '',
+      description: element.dataset.description || undefined,
       start: new Date(element.dataset.start || ''),
       end: new Date(element.dataset.end || ''),
       type: element.dataset.type || 'work',