@nyaruka/temba-components 0.157.0 → 0.158.0

package/src/live/ContactDetails.ts

@@ -2,6 +2,7 @@ import { css, html, TemplateResult } from 'lit';
 import { ContactStoreElement } from './ContactStoreElement';
 import { Icon } from '../Icons';
 import { capitalize } from '../utils';
+import { getLanguageName } from '../languages';
 
 const STATUS = {
   active: 'Active',
@@ -20,36 +21,39 @@ const SCHEMES = {
 export class ContactDetails extends ContactStoreElement {
   static get styles() {
     return css`
-      .urn {
-        display: flex;
-        padding: 0.4em 1em 0.8em 1em;
-        border-bottom: 1px solid #e6e6e6;
-        margin-bottom: 0.5em;
+      .wrapper {
+        padding-top: 0em;
       }
 
-      .urn .path {
-        margin-left: 0.2em;
+      /* Mirrors the disabled <temba-contact-field> row so the Groups
+         entry reads as just another field — same label color/size,
+         same horizontal inset, same bottom separator. Margin matches
+         the combined .wrapper + :host margins of contact-field
+         (0.5em + 1em) so spacing between rows stays uniform. */
+      .row {
+        padding-bottom: 0.6em;
+        border-bottom: 1px solid #ececec;
+        margin-bottom: 1.5em;
       }
 
-      .wrapper {
-        padding-top: 0em;
+      .row .label {
+        color: var(--text-2);
+        font-size: 12px;
+        font-weight: var(--w-medium);
+        margin-top: 0.25em;
+        margin-left: 0.25em;
       }
 
-      .groups {
-        padding: 0.4em 0.5em 0.6em 0.5em;
-        border-bottom: 1px solid #e6e6e6;
-        margin-bottom: 0.4em;
-      }
-      .group {
-        margin-right: 0.7em;
-        margin-bottom: 0.7em;
+      .row .value {
+        margin-left: 0.25em;
+        margin-top: 0.1em;
+        min-height: 1.75em;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4em;
       }
 
-      .label {
-        font-size: 0.8em;
-        color: rgb(136, 136, 136);
-        margin-left: 0.5em;
-        margin-bottom: 0.4em;
+      .group {
       }
     `;
   }
@@ -62,25 +66,27 @@ export class ContactDetails extends ContactStoreElement {
       return;
     }
 
-    const lang = this.store.getLanguageName(this.data.language);
+    const lang = getLanguageName(this.data.language);
 
     return html`
       <div class="wrapper">
         ${this.data.groups.length > 0
-          ? html` <div class="groups">
+          ? html` <div class="row">
               <div class="label">Groups</div>
-              ${this.data.groups.map((group) => {
-                return html`<temba-label
-                  class="group"
-                  onclick="goto(event)"
-                  href="/contact/group/${group.uuid}/"
-                  icon=${group.is_dynamic ? Icon.group_smart : Icon.group}
-                  type="group"
-                  clickable
-                >
-                  ${group.name}
-                </temba-label>`;
-              })}
+              <div class="value">
+                ${this.data.groups.map((group) => {
+                  return html`<temba-label
+                    class="group"
+                    onclick="goto(event)"
+                    href="/contact/group/${group.uuid}/"
+                    icon=${group.is_dynamic ? Icon.group_smart : Icon.group}
+                    type="group"
+                    clickable
+                  >
+                    ${group.name}
+                  </temba-label>`;
+                })}
+              </div>
             </div>`
           : null}
         ${this.data.urns.map((urn) => {

package/src/live/ContactFieldEditor.ts

@@ -93,51 +93,34 @@ export class ContactFieldEditor extends RapidElement {
         --color-widget-border: rgb(235, 235, 235);
       }
 
-      .prefix {
-        border-top-left-radius: var(--curvature-widget);
-        border-bottom-left-radius: var(--curvature-widget);
-        cursor: pointer !important;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: flex;
-        /* Pin to the top-left of the host (temba-select :host is
-           position: relative). Using top rather than margin-top keeps
-           the absolute element out of the flex flow of .left-side so
-           it doesn't push the selected value down. */
-        position: absolute;
-        top: -0.6em;
-        left: 0.5em;
-        pointer-events: none;
-        background: #fff;
-        border-radius: var(--curvature);
-      }
-
-      temba-select .prefix {
-        top: -0.7em;
-      }
-
       .wrapper {
         margin-bottom: 0.5em;
       }
 
-      .prefix .name,
-      .label .name {
-        padding: 0em 0.4em;
-        color: rgba(100, 100, 100, 0.7);
+      .field-label {
+        display: block;
+        font-size: 12px;
+        font-weight: var(--w-medium);
+        color: var(--text-2);
+        margin: 0 0 4px 2px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        font-size: 0.8em;
+      }
+
+      .label .name {
+        color: var(--text-2);
+        font-size: 12px;
+        font-weight: var(--w-medium);
       }
 
       .disabled .name {
-        margin-top: 1em;
-        margin-left: 0.75em;
+        margin-top: 0.25em;
+        margin-left: 0.25em;
       }
 
       .disabled .value {
-        margin-left: 0.9em;
+        margin-left: 0.25em;
         margin-top: 0.1em;
         min-height: 1.75em;
       }
@@ -242,8 +225,6 @@ export class ContactFieldEditor extends RapidElement {
         min-height: 22px !important;
         max-height: 22px !important;
         margin: 5px 6px;
-        --button-y: 0;
-        --button-x: 10px;
         font-size: 12px;
       }
 
@@ -428,27 +409,30 @@ export class ContactFieldEditor extends RapidElement {
   }
 
   private renderDateField(state: TemplateResult) {
-    return html` <temba-datepicker
-      timezone=${this.timezone}
-      value="${this.value ? this.value : ''}"
-      @change=${this.handleDateChange}
-      ?disabled=${this.disabled}
-      time
-    >
-      <div class="prefix" slot="prefix">
-        <div class="name">${this.name}</div>
-      </div>
-      <div class="postfix" slot="postfix">
-        <div class="popper ${this.status}  ${this.dirty ? 'dirty' : ''}">
-          ${state}
+    return html`
+      <label id="field-label" class="field-label">${this.name}</label>
+      <temba-datepicker
+        aria-labelledby="field-label"
+        timezone=${this.timezone}
+        value="${this.value ? this.value : ''}"
+        @change=${this.handleDateChange}
+        ?disabled=${this.disabled}
+        time
+      >
+        <div class="postfix" slot="postfix">
+          <div class="popper ${this.status}  ${this.dirty ? 'dirty' : ''}">
+            ${state}
+          </div>
         </div>
-      </div>
-    </temba-datepicker>`;
+      </temba-datepicker>
+    `;
   }
 
   private renderTextField(state: TemplateResult) {
     return html`
+      <label id="field-label" class="field-label">${this.name}</label>
       <temba-textinput
+        aria-labelledby="field-label"
         class="${this.status} ${this.dirty ? 'dirty' : ''}"
         value="${this.value ? this.value : ''}"
         @keyup=${this.handleInput}
@@ -456,10 +440,6 @@ export class ContactFieldEditor extends RapidElement {
         type=${this.getInputType(this.type)}
         ?disabled=${this.disabled}
       >
-        <div class="prefix" slot="prefix">
-          <div class="name">${this.name}</div>
-        </div>
-
         <div class="postfix">
           <div
             class="popper ${this.iconClass} ${this.status}  ${this.dirty
@@ -508,7 +488,9 @@ export class ContactFieldEditor extends RapidElement {
 
   public renderLocationField(level: string = 'state') {
     return html`
+      <label id="field-label" class="field-label">${this.name}</label>
       <temba-select
+        aria-labelledby="field-label"
         endpoint="/api/internal/locations.json?level=${level}"
         nameKey="path"
         valueKey="path"
@@ -518,14 +500,10 @@ export class ContactFieldEditor extends RapidElement {
         queryParam="query"
         searchable
         clearable
-        inpsutStyle=${JSON.stringify({ 'margin-top': '1.1em !important;' })}
         values=${this.value
           ? JSON.stringify([{ path: this.value, osm_id: this.value }])
           : '[]'}
       >
-        <div class="prefix" slot="prefix">
-          <div class="name">${this.name}</div>
-        </div>
       </temba-select>
     `;
   }

package/src/live/ContactFields.ts

@@ -66,9 +66,8 @@ export class ContactFields extends ContactStoreElement {
 
       .toggle {
         display: flex;
-        background: #fff;
         align-items: center;
-        margin-bottom: 0.5em;
+        margin-top: 0.5em;
       }
 
       .disabled .toggle {

package/src/live/ContactNotepad.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 import { ContactStoreElement } from './ContactStoreElement';
 import { getDisplayName } from './ContactChat';
 import { ContactNote, CustomEventType } from '../interfaces';
+import { designTokens } from '../styles/designTokens';
 
 export class ContactNotepad extends ContactStoreElement {
   @property({ type: Object, attribute: false })
@@ -14,9 +15,12 @@ export class ContactNotepad extends ContactStoreElement {
 
   static get styles() {
     return css`
+      ${designTokens}
+
       :host {
         height: 100%;
         display: flex;
+        margin-top: var(--gap);
       }
 
       .wrapper {
@@ -24,9 +28,13 @@ export class ContactNotepad extends ContactStoreElement {
         --color-widget-bg: transparent;
         --color-widget-bg-focused: transparent;
         outline: none;
-        border-radius: var(--curvature);
         display: flex;
         flex-direction: column;
+        background: var(--surface-note);
+        border: 1px solid var(--border-note);
+        border-radius: var(--r-sm);
+        box-shadow: var(--shadow-2);
+        overflow: hidden;
       }
 
       .notepad {

package/src/live/ContactPending.ts

@@ -92,6 +92,7 @@ export class ContactPending extends EndpointMonitorElement {
         display: flex;
         flex-direction: row;
         align-items: center;
+        background: var(--surface);
         box-shadow:
           0 0 8px 1px rgba(0, 0, 0, 0.055),
           0 0 0px 1px rgba(0, 0, 0, 0.02);

package/src/store/AppState.ts

@@ -1,5 +1,6 @@
 import { createStore, StoreApi } from 'zustand/vanilla';
-import { fetchResults, generateUUID } from '../utils';
+import { generateUUID } from '../utils';
+import { getLanguageName } from '../languages';
 import {
   Action,
   Exit,
@@ -193,7 +194,6 @@ export interface AppState {
   issuesByAction: Map<string, FlowIssue[]>;
 
   languageCode: string;
-  languageNames: { [code: string]: string };
   workspace: Workspace;
   isTranslating: boolean;
   viewingRevision: boolean;
@@ -209,7 +209,6 @@ export interface AppState {
   getCurrentActivity: () => Activity | null;
   fetchRevision: (endpoint: string, id?: string) => Promise<void>;
   fetchWorkspace: (endpoint: string) => Promise<void>;
-  fetchAllLanguages: (endpoint: string) => Promise<void>;
   fetchActivity: (endpoint: string) => Promise<void>;
   setActivityEndpoint: (endpoint: string) => void;
   updateActivity: (activity: Activity) => void;
@@ -267,7 +266,6 @@ export const zustand = createStore<AppState>()(
     immer((set, get) => ({
       features: [] as string[],
       brand: '',
-      languageNames: {},
       canvasSize: { width: 0, height: 0 },
       languageCode: '',
       workspace: null,
@@ -331,21 +329,6 @@ export const zustand = createStore<AppState>()(
         set({ workspace: data });
       },
 
-      fetchAllLanguages: async (endpoint) => {
-        const results = await fetchResults(endpoint);
-
-        // convert array to map for easier lookup
-        const allLanguages = results.reduce(function (
-          languages: any,
-          result: any
-        ) {
-          languages[result.value] = result.name;
-          return languages;
-        }, {});
-
-        set({ languageNames: allLanguages });
-      },
-
       setActivityEndpoint: (endpoint: string) => {
         set({ activityEndpoint: endpoint });
       },
@@ -394,8 +377,7 @@ export const zustand = createStore<AppState>()(
       getLanguage: () => {
         const state = get();
         const languageCode = state.languageCode;
-        const languageNames = state.languageNames;
-        return { name: languageNames[languageCode], code: languageCode };
+        return { name: getLanguageName(languageCode), code: languageCode };
       },
 
       setFeatures: (features: string[]) => {

package/src/store/Store.ts

@@ -30,7 +30,6 @@ import { sourceLocale, targetLocales } from '../locales/locale-codes';
 import { getFullName } from '../display/TembaUser';
 import { AppState, zustand } from './AppState';
 import { StoreApi } from 'zustand/vanilla';
-import { getLanguageDisplayName } from '../flow/utils';
 
 const { setLocale } = configureLocalization({
   sourceLocale,
@@ -84,9 +83,6 @@ export class Store extends RapidElement {
   @property({ type: String, attribute: 'globals' })
   globalsEndpoint: string;
 
-  @property({ type: String, attribute: 'languages' })
-  languagesEndpoint: string;
-
   @property({ type: String, attribute: 'workspace' })
   workspaceEndpoint: string;
 
@@ -110,7 +106,6 @@ export class Store extends RapidElement {
   private fields: { [key: string]: ContactField } = {};
   private groups: { [uuid: string]: ContactGroup } = {};
   private shortcuts: Shortcut[] = [];
-  private languages: any = {};
   private workspace: Workspace;
   private featuredFields: ContactField[] = [];
 
@@ -196,22 +191,6 @@ export class Store extends RapidElement {
       );
     }
 
-    if (this.languagesEndpoint) {
-      appState.fetchAllLanguages(this.languagesEndpoint);
-      fetches.push(
-        getAssets(this.languagesEndpoint).then((results: any[]) => {
-          // convert array of objects to lookup
-          this.languages = results.reduce(function (
-            languages: any,
-            result: any
-          ) {
-            languages[result.value] = result.name;
-            return languages;
-          }, {});
-        })
-      );
-    }
-
     if (this.groupsEndpoint) {
       fetches.push(
         getAssets(this.groupsEndpoint).then((groups: any[]) => {
@@ -383,14 +362,6 @@ export class Store extends RapidElement {
     return this.featuredFields;
   }
 
-  public getLanguageName(iso: string) {
-    const name = this.languages[iso];
-    if (!name || name === 'und' || iso === 'und') {
-      return getLanguageDisplayName(iso);
-    }
-    return name;
-  }
-
   public isDynamicGroup(uuid: string): boolean {
     const group = this.groups[uuid];
     // we treat missing groups as dynamic since the

package/src/styles/designTokens.ts

@@ -13,25 +13,30 @@ import { css } from 'lit';
  */
 export const designTokens = css`
   :host {
-    /* accent ramp — derived from a single anchor via OKLab mixing */
-    --accent: #2a6fb5;
-    --accent-50: color-mix(in oklab, var(--accent) 6%, white);
-    --accent-100: color-mix(in oklab, var(--accent) 12%, white);
-    --accent-200: color-mix(in oklab, var(--accent) 25%, white);
-    --accent-300: color-mix(in oklab, var(--accent) 45%, white);
-    --accent-400: color-mix(in oklab, var(--accent) 75%, white);
-    --accent-500: var(--accent);
-    --accent-600: color-mix(in oklab, var(--accent) 88%, black);
-    --accent-700: color-mix(in oklab, var(--accent) 75%, black);
-    --accent-800: color-mix(in oklab, var(--accent) 60%, black);
-    --accent-900: color-mix(in oklab, var(--accent) 45%, black);
+    /* accent ramp — the primary color sits at 400 and the ramp is
+       derived from it in both directions via sRGB mixing.
+       The anchor reads from --primary-rgb so host pages can re-theme
+       the entire ramp by setting e.g. --primary-rgb: 112, 0, 132. */
+    --accent: rgb(var(--primary-rgb, 98, 147, 201));
+    --accent-50: color-mix(in srgb, var(--accent) 6%, white);
+    --accent-100: color-mix(in srgb, var(--accent) 16%, white);
+    --accent-200: color-mix(in srgb, var(--accent) 32%, white);
+    --accent-300: color-mix(in srgb, var(--accent) 60%, white);
+    --accent-400: var(--accent);
+    --accent-500: color-mix(in srgb, var(--accent) 90%, black);
+    --accent-600: color-mix(in srgb, var(--accent) 80%, black);
+    --accent-700: color-mix(in srgb, var(--accent) 65%, black);
+    --accent-800: color-mix(in srgb, var(--accent) 50%, black);
+    --accent-900: color-mix(in srgb, var(--accent) 35%, black);
 
     /* neutrals */
     --bg: #f6f7f9;
     --surface: #ffffff;
+    --surface-note: #fff9c2;
     --sunken: #f1f3f5;
     --border: #e6e8ec;
     --border-strong: #d2d6dc;
+    --border-note: #ebdf6f;
     --text-1: #1a1f26;
     --text-2: #4d5664;
     --text-3: #7b8593;
@@ -55,10 +60,14 @@ export const designTokens = css`
     --neutral-border: #d8dce2;
 
     /* Pill anchor hues — pillVariants derives bg/fg/border via
-       color-mix(in oklab, ...) so host pages can re-theme by
-       overriding just the anchor. (Recipient pills reuse --accent.) */
+       color-mix(in srgb, ...) so host pages can re-theme by
+       overriding just the anchor. These are intentionally fixed and
+       do NOT track --primary-rgb so that pill identity (group/flow/
+       field/channel) stays stable across brand themes. */
+    --recipient: #2a6fb5;
     --flow: #16a34a;
     --channel: #6b21a8;
+    --topic: #d97706;
     /* Field stays slightly darker than the bright yellow-500 anchor
        used for flow/channel — yellow-500 has too little contrast
        against white to read as a foreground / icon hue on its own.
@@ -72,7 +81,7 @@ export const designTokens = css`
     --w-regular: 400;
     --w-medium: 500;
     --w-semibold: 600;
-    --w-bold: 700;
+    --w-bold: 600;
 
     /* shape */
     --r: 8px;
@@ -111,9 +120,15 @@ export const designTokens = css`
        Surfaces that should stay blue even during a parent field's
        error state (e.g. the dropdown popup) reference --focus-muted
        / --focus-halo directly to skip that override. */
-    --focus: #5b9ce5;
-    --focus-muted: color-mix(in oklab, var(--focus) 60%, white);
-    --focus-halo: 0 0 0 3px color-mix(in oklab, var(--focus) 30%, transparent);
+    --focus: rgb(var(--focus-rgb, 91, 156, 229));
+    --focus-50: color-mix(in srgb, var(--focus) 12%, white);
+    --focus-100: color-mix(in srgb, var(--focus) 24%, white);
+    --focus-200: color-mix(in srgb, var(--focus) 40%, white);
+    --focus-300: color-mix(in srgb, var(--focus) 60%, white);
+    --focus-600: color-mix(in srgb, var(--focus) 60%, black);
+    --focus-700: color-mix(in srgb, var(--focus) 45%, black);
+    --focus-muted: color-mix(in srgb, var(--focus) 60%, white);
+    --focus-halo: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
     --color-focus: var(--focus-muted);
     --widget-box-shadow-focused: var(--focus-halo);
 

package/src/styles/pillVariants.ts

@@ -9,8 +9,9 @@ import { css } from 'lit';
  * flow/utils.ts.
  *
  * Variant theming:
- *   - .pill-contact / .pill-group: full ramp derived from --accent
- *     via `color-mix(in oklab, …)`. Override --accent to re-theme.
+ *   - .pill-contact / .pill-group: derived from --recipient (a fixed
+ *     blue), NOT the accent ramp. This keeps recipient pills stable
+ *     across brand re-theming via --primary-rgb.
  *   - .pill-flow, .pill-channel: bg/border derived from --flow /
  *     --channel via color-mix; text + icon use the anchor directly.
  *   - .pill-field: bg/border are fixed at the Tailwind yellow ramp
@@ -40,7 +41,8 @@ export const PILL_TYPES: ReadonlySet<string> = new Set([
   'field',
   'label',
   'keyword',
-  'channel'
+  'channel',
+  'topic'
 ]);
 
 /** Default icon name for each pill variant. Used when a consumer
@@ -52,7 +54,8 @@ export const PILL_TYPE_ICONS: Readonly<Record<string, string>> = {
   contact: 'contact',
   field: 'fields',
   flow: 'flow',
-  label: 'label'
+  label: 'label',
+  topic: 'topic'
 };
 
 /** Inverse mapping: icon name (alias or resolved SVG id) → pill type.
@@ -88,25 +91,33 @@ export const pillVariants = css`
     --icon-color: var(--text-2);
   }
   .pill-flow {
-    background: color-mix(in oklab, var(--flow) 12%, white);
+    background: color-mix(in srgb, var(--flow) 12%, white);
     color: var(--flow);
-    border-color: color-mix(in oklab, var(--flow) 25%, white);
+    border-color: color-mix(in srgb, var(--flow) 25%, white);
     --icon-color: var(--flow);
   }
-  /* Recipient color — shared by contacts and groups. */
+  /* Recipient color — shared by contacts and groups. Anchored to
+     --recipient (fixed blue), NOT the accent ramp, so pills keep their
+     identity even when the host page re-themes via --primary-rgb. */
   .pill-contact,
   .pill-group {
-    background: var(--accent-100);
-    color: var(--accent-700);
-    border-color: var(--accent-200);
-    --icon-color: var(--accent-700);
+    background: color-mix(in srgb, var(--recipient) 12%, white);
+    color: var(--recipient);
+    border-color: color-mix(in srgb, var(--recipient) 25%, white);
+    --icon-color: var(--recipient);
   }
   .pill-channel {
-    background: color-mix(in oklab, var(--channel) 12%, white);
+    background: color-mix(in srgb, var(--channel) 12%, white);
     color: var(--channel);
-    border-color: color-mix(in oklab, var(--channel) 25%, white);
+    border-color: color-mix(in srgb, var(--channel) 25%, white);
     --icon-color: var(--channel);
   }
+  .pill-topic {
+    background: color-mix(in srgb, var(--topic) 12%, white);
+    color: var(--topic);
+    border-color: color-mix(in srgb, var(--topic) 25%, white);
+    --icon-color: var(--topic);
+  }
   .pill-field {
     /* Yellow has very low contrast against white, so the color-mix
        approach used by other variants washes out at any readable mix