v1.6.1

changelog.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2025-12-18 - 1.6.1 - fix(sio-combox)
+tweak dropdown shadow and bind close event on conversation selector
+
+- Replaced unsafeCSS(shadows.xl) with explicit box-shadow values for the combox dropdown to adjust visual appearance
+- Added @close listener on <sio-conversation-selector> to call this.close(), enabling the selector to close the combox when it emits a close event
+- Affected file: ts_web/elements/sio-combox.ts
+
+## 2025-12-18 - 1.6.0 - feat(conversation-selector)
+add conversation status badges to conversation selector and include status in sample data
+
+- Introduce TConversationStatus type and add optional status property to IConversation
+- Render status badges in sio-conversation-selector with CSS classes and a getBadgeLabel helper
+- Update sample conversations in sio-combox.ts to include statuses: 'new', 'needs-action', 'waiting', 'resolved'
+
 ## 2025-12-17 - 1.5.0 - feat(combox)
 Introduce singleton SioCombox attached to document.body with open/close/toggle API and animated show/hide; integrate SioFab to use the singleton and update styles/positioning
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social.io/catalog",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "private": false,
   "description": "catalog for social.io",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@social.io/catalog',
-  version: '1.5.0',
+  version: '1.6.1',
   description: 'catalog for social.io'
 }

ts_web/elements/sio-combox.ts

@@ -79,24 +79,28 @@ export class SioCombox extends DeesElement {
       lastMessage: 'Thanks for your help with the login issue!',
       time: '2 min ago',
       unread: true,
+      status: 'new',
     },
     {
       id: '2',
       title: 'Billing Question',
       lastMessage: 'I need help understanding my invoice',
       time: '1 hour ago',
+      status: 'needs-action',
     },
     {
       id: '3',
       title: 'Feature Request',
       lastMessage: 'That would be great! Looking forward to it',
       time: 'Yesterday',
+      status: 'waiting',
     },
     {
       id: '4',
       title: 'General Inquiry',
       lastMessage: 'Thank you for the information',
       time: '2 days ago',
+      status: 'resolved',
     }
   ];
 
@@ -255,7 +259,7 @@ export class SioCombox extends DeesElement {
         background: ${bdTheme('background')};
         border-radius: ${unsafeCSS(radius['2xl'])};
         border: 1px solid ${bdTheme('border')};
-        box-shadow: ${unsafeCSS(shadows.xl)};
+        box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.35), 0 12px 24px -8px rgb(0 0 0 / 0.15);
         overflow: hidden;
         font-family: ${unsafeCSS(fontFamilies.sans)};
         transform-origin: bottom right;
@@ -397,6 +401,7 @@ export class SioCombox extends DeesElement {
           .conversations=${this.conversations}
           .selectedConversationId=${this.selectedConversationId}
           @conversation-selected=${this.handleConversationSelected}
+          @close=${() => this.close()}
         ></sio-conversation-selector>
         
         <sio-conversation-view

ts_web/elements/sio-conversation-selector.ts

@@ -16,6 +16,8 @@ import { spacing, radius, shadows, transitions } from './00tokens.js';
 import { fontFamilies, typography } from './00fonts.js';
 
 // Types
+export type TConversationStatus = 'new' | 'waiting' | 'needs-action' | 'resolved';
+
 export interface IConversation {
   id: string;
   title: string;
@@ -23,6 +25,7 @@ export interface IConversation {
   time: string;
   unread?: boolean;
   avatar?: string;
+  status?: TConversationStatus;
 }
 
 declare global {
@@ -232,6 +235,38 @@ export class SioConversationSelector extends DeesElement {
         }
       }
 
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px ${unsafeCSS(spacing["2"])};
+        font-size: 0.625rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.025em;
+        border-radius: ${unsafeCSS(radius.full)};
+        white-space: nowrap;
+      }
+
+      .badge.new {
+        background: ${bdTheme('primary')}20;
+        color: ${bdTheme('primary')};
+      }
+
+      .badge.waiting {
+        background: ${bdTheme('muted')};
+        color: ${bdTheme('mutedForeground')};
+      }
+
+      .badge.needs-action {
+        background: hsl(38 92% 50% / 0.15);
+        color: hsl(38 92% 40%);
+      }
+
+      .badge.resolved {
+        background: ${bdTheme('success')}20;
+        color: ${bdTheme('success')};
+      }
+
       .empty-state {
         display: flex;
         flex-direction: column;
@@ -331,6 +366,7 @@ export class SioConversationSelector extends DeesElement {
                 <span class="conversation-title">
                   ${conv.title}
                   ${conv.unread ? html`<span class="unread-dot"></span>` : ''}
+                  ${conv.status ? html`<span class="badge ${conv.status}">${this.getBadgeLabel(conv.status)}</span>` : ''}
                 </span>
                 <span class="conversation-time">${conv.time}</span>
               </div>
@@ -389,4 +425,14 @@ export class SioConversationSelector extends DeesElement {
       composed: true
     }));
   }
+
+  private getBadgeLabel(status: TConversationStatus): string {
+    const labels: Record<TConversationStatus, string> = {
+      'new': 'New',
+      'waiting': 'Waiting',
+      'needs-action': 'Action',
+      'resolved': 'Resolved',
+    };
+    return labels[status];
+  }
 }

ts_web/elements/sio-dropdown-menu.ts

@@ -160,27 +160,6 @@ export class SioDropdownMenu extends DeesElement {
         background: ${bdTheme('border')};
         margin: ${unsafeCSS(spacing["1"])} 0;
       }
-
-      /* Mobile adjustments */
-      @media (max-width: 600px) {
-        .dropdown {
-          position: fixed;
-          top: auto !important;
-          left: ${unsafeCSS(spacing["4"])} !important;
-          right: ${unsafeCSS(spacing["4"])};
-          bottom: ${unsafeCSS(spacing["4"])};
-          width: auto;
-          transform-origin: bottom center;
-        }
-
-        .dropdown.open {
-          transform: translateY(0) scale(1);
-        }
-
-        .dropdown:not(.open) {
-          transform: translateY(10px) scale(0.95);
-        }
-      }
     `,
   ];