@nyaruka/temba-components 0.156.17 → 0.157.0

package/src/form/TembaSlider.ts

@@ -13,9 +13,9 @@ export class TembaSlider extends FieldElement {
 
       .track {
         height: 2px;
-        border-top: 0.5em solid #fff;
-        border-bottom: 0.5em solid #fff;
-        background: #ddd;
+        border-top: 0.5em solid var(--surface);
+        border-bottom: 0.5em solid var(--surface);
+        background: var(--border-strong);
         flex-grow: 1;
       }
 
@@ -24,11 +24,11 @@ export class TembaSlider extends FieldElement {
         margin-left: -0.5em;
         width: 0.75em;
         height: 0.75em;
-        border: 2px solid #999;
+        border: 2px solid var(--border-strong);
         border-radius: 999px;
         position: relative;
-        background: #fff;
-        box-shadow: 0 0 0 4px rgb(255, 255, 255);
+        background: var(--surface);
+        box-shadow: 0 0 0 4px var(--surface);
         transition: transform 200ms ease-in-out;
       }
 
@@ -37,13 +37,13 @@ export class TembaSlider extends FieldElement {
       }
 
       :hover .circle {
-        border-color: #777;
+        border-color: var(--text-2);
         cursor: pointer;
       }
 
       .grabbed .circle {
-        border-color: var(--color-primary-dark);
-        background: #fff;
+        border-color: var(--accent);
+        background: var(--surface);
       }
 
       .grabbed .circle {
@@ -58,7 +58,7 @@ export class TembaSlider extends FieldElement {
       .pre,
       .post {
         font-size: 0.9em;
-        color: #999;
+        color: var(--text-3);
         padding: 0em 1em;
       }
     `;

package/src/form/TemplateEditor.ts

@@ -99,9 +99,9 @@ export class TemplateEditor extends FieldElement {
       }
 
       .button {
-        background: #fff;
+        background: var(--surface);
         padding: 0.3em 1em;
-        border: 1px solid #e6e6e6;
+        border: 1px solid var(--color-widget-border);
         border-radius: var(--curvature);
         min-height: 23px;
         display: flex;
@@ -118,7 +118,7 @@ export class TemplateEditor extends FieldElement {
 
       .button .display {
         margin-right: 0.5em;
-        background: #f9f9f9;
+        background: var(--sunken);
         padding: 0.25em 1em;
         border-radius: var(--curvature);
       }
@@ -130,7 +130,7 @@ export class TemplateEditor extends FieldElement {
       }
 
       .template {
-        background: #fff;
+        background: var(--surface);
         border-radius: var(--curvature);
         border: 1px solid var(--color-widget-border);
         padding: 1em;

package/src/form/TextInput.ts

@@ -26,13 +26,32 @@ export class TextInput extends FieldElement {
         display: flex;
         flex-direction: row;
         align-items: stretch;
+        min-height: var(--temba-textinput-min-height, var(--input-h));
         box-shadow: var(--widget-box-shadow);
         caret-color: var(--input-caret);
+        /* Establish a stable containing block for slotted absolutely-
+           positioned children (e.g. ContactFieldEditor's embedded
+           prefix label). Setting position: relative only on
+           :focus-within would re-anchor the prefix when focused,
+           visually shifting the label. */
+        position: relative;
+      }
+
+      .input-container.textarea,
+      .input-container:has(textarea) {
+        min-height: 0;
       }
 
       .xsmall {
         --temba-textinput-padding: 6px 8px;
         --temba-textinput-font-size: 13px;
+        /* Opt out of the 34px --input-h floor so an xsmall textinput
+           lines up with RichEditor xsmall (the "evaluated" argument
+           input in rule editor rows) and with Select xsmall, neither
+           of which carry the floor. Without this, a [operator select
+           | rich-edit argument | textinput category] row renders the
+           category ~4px taller than its neighbors. */
+        --temba-textinput-min-height: 0;
       }
 
       .small {
@@ -66,7 +85,6 @@ export class TextInput extends FieldElement {
         border-color: var(--color-focus);
         background: var(--color-widget-bg-focused);
         box-shadow: var(--widget-box-shadow-focused);
-        position: relative;
       }
 
       .input-container:hover {

package/src/form/select/Omnibox.ts

@@ -105,28 +105,31 @@ export class Omnibox extends Select<OmniOption> {
     return null;
   }
 
-  /** Selection in the multi-select select box */
+  /**
+   * Chip rendering — icon + name, plus the group count when the option
+   * is a Group. Counts are intentionally suppressed in the base Select
+   * chip (noise for action editors like Add to Group), but Omnibox is
+   * the start-flow recipients picker where group size is a key part
+   * of the chip's identity. Contacts skip the post-name URN that the
+   * dropdown shows — chips already have a tight footprint.
+   */
   public renderSelectedItemDefault(option: OmniOption): TemplateResult {
-    return html`
-      <div
-        style="flex:1 1 auto; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display: flex; align-items: stretch; color: var(--color-text-dark); font-size: 12px;"
+    const base = super.renderOptionDefault(option);
+    if (
+      option.type === OmniType.Group &&
+      option.count !== undefined &&
+      option.count !== null
+    ) {
+      return html`<div
+        style="display:flex; align-items:center; gap:6px;"
       >
-        <div style="align-self: center; padding: 0px 7px; color: #bbb">
-          ${this.getIcon(option)}
-        </div>
-        <div
-          class="name"
-          style="align-self: center; padding: 0px; font-size: 12px;"
+        ${base}<span
+          style="opacity:0.7; font-size:11px; font-variant-numeric: tabular-nums; font-weight: var(--w-medium);"
+          >${option.count.toLocaleString()}</span
         >
-          ${option.name}
-        </div>
-        <div
-          style="background: rgba(100, 100, 100, 0.05); border-left: 1px solid rgba(100, 100, 100, 0.1); margin-left: 12px; display: flex; align-items: center"
-        >
-          ${this.getPostName(option)}
-        </div>
-      </div>
-    `;
+      </div>`;
+    }
+    return base;
   }
 
   private getIcon(option: OmniOption): TemplateResult {