@nyaruka/temba-components 0.163.0 → 0.165.0

package/src/layout/PageHeader.ts

@@ -70,6 +70,8 @@ export class PageHeader extends RapidElement {
       }
       .title {
         font-size: 15.5px;
+        /* slotted contact names render at the title's size */
+        --contact-name-font-size: 15.5px;
         font-weight: var(--w-semibold);
         color: var(--text-1);
         line-height: 1.25;
@@ -139,10 +141,6 @@ export class PageHeader extends RapidElement {
       .menu-button.primary:hover {
         background: var(--accent-700);
       }
-      .menu-button[disabled] {
-        opacity: 0.45;
-        cursor: not-allowed;
-      }
 
       /* Overflow toggle — the trailing ⋮ that opens the rest of the
          menu items. Plain icon button, matches the list's Search. */
@@ -282,7 +280,9 @@ export class PageHeader extends RapidElement {
    * origin — same payload the standalone content menu emits, so the
    * host's existing menu handling keeps working. */
   private handleItemClicked(item: ContentMenuItem, event: MouseEvent): void {
-    if (item.disabled) return;
+    // note: item.disabled does NOT make the item inert — in the content
+    // menu contract it means the opened modal starts with its submit
+    // disabled (hosts pass it through to showModax)
     const el = event.currentTarget as Element;
     const rect = el?.getBoundingClientRect();
     this.fireCustomEvent(CustomEventType.Selection, {
@@ -300,7 +300,6 @@ export class PageHeader extends RapidElement {
         (button) => html`
           <div
             class="menu-button ${button.primary ? 'primary' : ''}"
-            ?disabled=${button.disabled}
             @click=${(e: MouseEvent) => this.handleItemClicked(button, e)}
           >
             ${button.label}

package/src/layout/Resizer.ts

@@ -10,6 +10,9 @@ export class Resizer extends ResizeElement {
       display: block;
       position: relative;
       width: var(--box-width, 200px);
+      /* hold the drag-clamp floor against flex compression too, so
+         shrinking the browser can't squeeze us below minWidth */
+      min-width: var(--box-min-width, 200px);
       --resizer-handle-size: 15px;
     }
 
@@ -69,6 +72,20 @@ export class Resizer extends ResizeElement {
     this.stopResize = this.stopResize.bind(this);
   }
 
+  protected willUpdate(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.willUpdate(changes);
+    // clamp programmatic width sets (e.g. a stored width restored on
+    // load) the same way drags are clamped
+    if (changes.has('currentWidth') && this.currentWidth != null) {
+      this.currentWidth = Math.min(
+        Math.max(this.currentWidth, this.minWidth),
+        this.maxWidth
+      );
+    }
+  }
+
   protected updated(
     _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
@@ -76,6 +93,9 @@ export class Resizer extends ResizeElement {
     if (_changedProperties.has('currentWidth')) {
       this.style.setProperty('--box-width', `${this.currentWidth}px`);
     }
+    if (_changedProperties.has('minWidth')) {
+      this.style.setProperty('--box-min-width', `${this.minWidth}px`);
+    }
   }
 
   public setWidth(width: number) {