@nyaruka/temba-components 0.157.0 → 0.158.0

package/src/events/eventRenderers.ts

@@ -13,6 +13,7 @@ import {
   UpdateFieldEvent,
   URNsChangedEvent
 } from '../events';
+import { getLanguageName } from '../languages';
 import { oxfordFn } from '../utils';
 
 export enum Events {
@@ -106,17 +107,46 @@ const flowPill = (flow: any) =>
 
 const fieldPill = (field: any) => renderEntityPill('field', field.name);
 
+const topicPill = (topic: any) =>
+  renderEntityPill('topic', topic.name, {
+    href: `/ticket/${topic.uuid}/open/`
+  });
+
 /**
- * Renders a generic value as a neutral pill (white bg, gray border).
- * Used for "after" values in update/change events — visually paired
- * with the type pill on the left side of the line, without claiming
- * a domain hue.
+ * Renders a user as a plain text link to the "All" ticket folder
+ * filtered by that assignee. Used for actor attribution in the
+ * chat history (ticket assigned / opened / closed events).
+ *
+ * The richer avatar-chip variant is parked in git history (see
+ * userPill) — we'll bring it back if denser surfaces need it.
  */
-const valuePill = (value: string | number) =>
-  html`<span
-    style="display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin: 1px 2px; border-radius: 999px; border: 1px solid var(--border-strong, #d2d6dc); background: #fff; color: var(--text-1, #1a1f26); font-size: 11.5px; font-weight: 400; line-height: 1; vertical-align: middle;"
-    >${value}</span
+const userLink = (user: any): TemplateResult => {
+  const name =
+    user.name || [user.first_name, user.last_name].filter(Boolean).join(' ');
+  return html`<a
+    href="/ticket/all/open/?assignee=${user.uuid}"
+    onclick="goto(event, this)"
+    title=${name}
+    >${name}</a
   >`;
+};
+
+/**
+ * Renders a contact-data value (field text, name, URN, language,
+ * status, amount, etc.) as bold inline text, truncated with an
+ * ellipsis past a reasonable width. Pills are reserved for system-
+ * level objects (group, flow, field, topic, …) — these are just
+ * values, so the chip chrome would over-state them. The full value
+ * is exposed via `title` for hover inspection.
+ */
+const valueText = (value: string | number) => {
+  const str = String(value);
+  return html`<span
+    title=${str}
+    style="display: inline-block; max-width: 18em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-weight: 600;"
+    >${str}</span
+  >`;
+};
 
 /**
  * Inline-flex wrapper style that text + pills share. Without it,
@@ -124,8 +154,13 @@ const valuePill = (value: string | number) =>
  * pills sit slightly above and the text appears to "float". flex
  * centering keeps the row of words and pills on one cross-axis.
  */
+// min-height keeps the row a consistent height across renderers
+// whether or not they contain a pill (which is ~22px tall) — without
+// it, plain-text events like "Cleared language" sit a few pixels
+// shorter than "Removed from <group pill>" and the chat history
+// looks unevenly spaced.
 const eventLineStyle =
-  'display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 2px 4px;';
+  'display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 2px 4px; min-height: 24px;';
 
 const renderInfoList = (
   singular: string,
@@ -180,9 +215,13 @@ export const renderChatStartedEvent = (
 };
 
 export const renderUpdateEvent = (event: UpdateFieldEvent): TemplateResult => {
-  return event.value
+  // Treat both a missing value object and an empty-string text as a
+  // cleared field — backfill / reset payloads sometimes arrive as
+  // `value: { text: '' }`, which would otherwise render with an
+  // empty value pill.
+  return event.value && event.value.text
     ? html`<div style=${eventLineStyle}>
-        Updated ${fieldPill(event.field)} to ${valuePill(event.value.text)}
+        Updated ${fieldPill(event.field)} to ${valueText(event.value.text)}
       </div>`
     : html`<div style=${eventLineStyle}>
         Cleared ${fieldPill(event.field)}
@@ -190,18 +229,24 @@ export const renderUpdateEvent = (event: UpdateFieldEvent): TemplateResult => {
 };
 
 export const renderNameChanged = (event: NameChangedEvent): TemplateResult => {
+  if (!event.name) {
+    return html`<div style=${eventLineStyle}>Cleared name</div>`;
+  }
   return html`<div style=${eventLineStyle}>
-    Updated name to ${valuePill(event.name)}
+    Updated name to ${valueText(event.name)}
   </div>`;
 };
 
 export const renderContactURNsChanged = (
   event: URNsChangedEvent
 ): TemplateResult => {
+  if (!event.urns || event.urns.length === 0) {
+    return html`<div style=${eventLineStyle}>Cleared URNs</div>`;
+  }
   return html`<div style=${eventLineStyle}>
     Updated URNs to
     ${oxfordFn(event.urns, (urn: string) =>
-      valuePill(urn.split(':')[1].split('?')[0])
+      valueText(urn.split(':')[1].split('?')[0])
     )}
   </div>`;
 };
@@ -212,84 +257,105 @@ export const renderTicketAction = (
 ): TemplateResult => {
   const ticketUUID = event.ticket?.uuid || event.ticket_uuid;
 
-  const actionNote = event.note
-    ? html`<div
-        style="width:85%; background: #fffac3; padding: 1em;margin-bottom: 1em;margin-top:1em; border: 1px solid #ffe97f;border-radius: var(--curvature);line-height: 1.2em; word-break: break-word;"
-      >
-        <div style="color: #8e830fff; font-size: 1em;margin-bottom:0.25em; ">
-          <strong>${event._user ? event._user.name : 'Someone'}</strong> added a
-          note
-          <temba-date
-            value=${event.created_on.toISOString()}
-            display="relative"
-          ></temba-date>
-        </div>
-        <div style="white-space: pre-wrap;">${event.note}</div>
-      </div>`
-    : null;
-
+  // Notes in the real chat history now go through Chat.ts#renderNote
+  // (see ContactChat.ts: ticket_note_added bypasses prerender). This
+  // path only runs for non-chat consumers (e.g. the flow Simulator).
+  // Render notes as a simple inline italic line — the chat-bubble
+  // styling lives in Chat.ts so the two can't drift.
   if (action === 'noted') {
-    return html`${actionNote}`;
+    return event.note
+      ? html`<div style="white-space: pre-wrap; font-style: italic;">
+          ${event.note}
+        </div>`
+      : null;
   }
 
-  const description = event._user
-    ? html`<div>
-        <strong>${event._user.name}</strong> ${action} a
-        <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong>
+  // closed → ticket is in the closed folder now; reopened → it's
+  // back in open. Linking the word "ticket" lets a reader jump to
+  // wherever the ticket actually lives.
+  const folder = action === 'closed' ? 'closed' : 'open';
+  const href = `/ticket/all/${folder}/${ticketUUID}/`;
+  return event._user
+    ? html`<div style=${eventLineStyle}>
+        ${userLink(event._user)} ${action} a <a href=${href}>ticket</a>
       </div>`
-    : html`<div>
-        A
-        <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong>
-        was <strong>${action}</strong>
+    : html`<div style=${eventLineStyle}>
+        A <a href=${href}>ticket</a> was ${action}
       </div>`;
-
-  return html`<div style="${actionNote ? 'margin-bottom: 1em;' : ''}">
-      ${description}
-    </div>
-    ${actionNote}`;
 };
 
 export const renderTicketAssigneeChanged = (
   event: TicketEvent
 ): TemplateResult => {
+  const ticketUUID = event.ticket?.uuid || event.ticket_uuid;
+  // Link the word "ticket" in assignee events too, so the noun is
+  // consistently interactive across open / close / reopen / assigned
+  // rows (the contact-history page can show events from any of the
+  // contact's tickets, so the jump-to-ticket affordance is useful).
+  const ticketLink = html`<a href="/ticket/all/open/${ticketUUID}/">ticket</a>`;
+  const ticketLinkCapitalized = html`<a href="/ticket/all/open/${ticketUUID}/"
+    >This ticket</a
+  >`;
   if (event._user) {
     if (event.assignee) {
-      return html`<div>
-        <strong>${event._user.name}</strong> assigned this ticket to
-        <strong>${event.assignee.name}</strong>
+      // Self-assignment ("took the ticket") reads naturally as one
+      // user link + verb, rather than "<user> assigned to <same user>".
+      // Match on uuid when present, falling back to email — depending
+      // on the API surface a user payload may carry one or the other.
+      const sameUser =
+        (event._user.uuid && event._user.uuid === event.assignee.uuid) ||
+        (event._user.email && event._user.email === event.assignee.email);
+      if (sameUser) {
+        return html`<div style=${eventLineStyle}>
+          ${userLink(event._user)} took this ${ticketLink}
+        </div>`;
+      }
+      return html`<div style=${eventLineStyle}>
+        ${userLink(event._user)} assigned this ${ticketLink} to
+        ${userLink(event.assignee)}
       </div>`;
     } else {
-      return html`<div>
-        <strong>${event._user.name}</strong> unassigned this ticket
+      return html`<div style=${eventLineStyle}>
+        ${userLink(event._user)} unassigned this ${ticketLink}
       </div>`;
     }
   } else {
     if (event.assignee) {
-      return html`<div>
-        This ticket was assigned to <strong>${event.assignee.name}</strong>
+      return html`<div style=${eventLineStyle}>
+        ${ticketLinkCapitalized} was assigned to ${userLink(event.assignee)}
       </div>`;
     } else {
-      return html`<div>This ticket was unassigned</div>`;
+      return html`<div style=${eventLineStyle}>
+        ${ticketLinkCapitalized} was unassigned
+      </div>`;
     }
   }
 };
 
 export const renderTicketOpened = (event: TicketEvent): TemplateResult => {
-  return html`<div>${event.ticket.topic.name} ticket was opened</div>`;
+  const ticketUUID = event.ticket.uuid;
+  const href = `/ticket/all/open/${ticketUUID}/`;
+  // ticket.topic is optional in events.ts — guard so a payload
+  // without one degrades to "A ticket was opened" rather than
+  // throwing inside topicPill.
+  const topic = event.ticket.topic;
+  const tail = topic ? html` in ${topicPill(topic)}` : null;
+  return event._user
+    ? html`<div style=${eventLineStyle}>
+        ${userLink(event._user)} opened a <a href=${href}>ticket</a>${tail}
+      </div>`
+    : html`<div style=${eventLineStyle}>
+        A <a href=${href}>ticket</a> was opened${tail}
+      </div>`;
 };
 
 export const renderContactGroupsEvent = (
   event: ContactGroupsEvent
 ): TemplateResult => {
-  const groupsEvent = event as ContactGroupsEvent;
-  if (groupsEvent.groups_added) {
-    return renderInfoList('Added to', 'Added to', groupsEvent.groups_added);
-  } else if (groupsEvent.groups_removed) {
-    return renderInfoList(
-      'Removed from',
-      'Removed from',
-      groupsEvent.groups_removed
-    );
+  if (event.groups_added) {
+    return renderInfoList('Added to', 'Added to', event.groups_added);
+  } else if (event.groups_removed) {
+    return renderInfoList('Removed from', 'Removed from', event.groups_removed);
   }
 };
 
@@ -299,23 +365,31 @@ export const renderAirtimeTransferredEvent = (
   if (parseFloat(event.amount) === 0) {
     return html`<div>Airtime transfer failed</div>`;
   }
-  return html`<div>
-    Transferred <strong>${event.amount}</strong> ${event.currency} of airtime
+  return html`<div style=${eventLineStyle}>
+    Transferred ${valueText(event.amount)} ${event.currency} of airtime
   </div>`;
 };
 
 export const renderContactLanguageChangedEvent = (
   event: ContactLanguageChangedEvent
 ): TemplateResult => {
-  return html`<div>
-    Language updated to <strong>${event.language}</strong>
+  if (!event.language) {
+    return html`<div style=${eventLineStyle}>Cleared language</div>`;
+  }
+  return html`<div style=${eventLineStyle}>
+    Language updated to ${valueText(getLanguageName(event.language))}
   </div>`;
 };
 
 export const renderContactStatusChangedEvent = (
   event: ContactStatusChangedEvent
 ): TemplateResult => {
-  return html`<div>Status updated to <strong>${event.status}</strong></div>`;
+  if (!event.status) {
+    return html`<div style=${eventLineStyle}>Cleared status</div>`;
+  }
+  return html`<div style=${eventLineStyle}>
+    Status updated to ${valueText(event.status)}
+  </div>`;
 };
 
 export const renderCallEvent = (event: CallEvent): TemplateResult => {
@@ -561,7 +635,7 @@ export const renderEvent = (
       content = renderTicketAction(event as TicketEvent, 'closed');
       break;
     case Events.TICKET_OPENED:
-      content = renderTicketAction(event as TicketEvent, 'opened');
+      content = renderTicketOpened(event as TicketEvent);
       break;
     case Events.TICKET_NOTE_ADDED:
       content = renderTicketAction(event as TicketEvent, 'noted');
@@ -569,11 +643,17 @@ export const renderEvent = (
     case Events.TICKET_REOPENED:
       content = renderTicketAction(event as TicketEvent, 'reopened');
       break;
-    case Events.TICKET_TOPIC_CHANGED:
-      content = html`<div>
-        Topic changed to <strong>${(event as TicketEvent).topic.name}</strong>
-      </div>`;
+    case Events.TICKET_TOPIC_CHANGED: {
+      // event.topic is optional — guard so a payload without one
+      // degrades cleanly instead of throwing inside topicPill.
+      const newTopic = (event as TicketEvent).topic;
+      content = newTopic
+        ? html`<div style=${eventLineStyle}>
+            Topic changed to ${topicPill(newTopic)}
+          </div>`
+        : null;
       break;
+    }
     default:
       return null;
   }

package/src/flow/AutoTranslate.ts

@@ -6,7 +6,7 @@ import { getStore } from '../store/Store';
 import { AppState, fromStore, zustand } from '../store/AppState';
 import { FlowDefinition } from '../store/flow-definition';
 import { TranslationEntry, buildTranslationBundles } from './flow-translations';
-import { getLanguageDisplayName } from './utils';
+import { getLanguageName } from '../languages';
 import { LLMModel, hasLLMRole } from './flow-utils';
 
 interface TranslationModel {
@@ -701,7 +701,7 @@ export class AutoTranslate extends RapidElement {
     }
 
     const selected = this.selectedModel ? [this.selectedModel] : [];
-    const languageName = getLanguageDisplayName(this.languageCode);
+    const languageName = getLanguageName(this.languageCode);
     const aiClause = this.brand
       ? html`${this.brand} uses AI for automatic translation, which can make
         mistakes,`

package/src/flow/CanvasNode.ts

@@ -219,13 +219,18 @@ export class CanvasNode extends RapidElement {
         background: repeating-linear-gradient(120deg, tomato, tomato 6px, #ff7056 0, #ff7056 18px) !important;
       }
 
-      /* Disable links on actions/nodes with issues */
+      /* Disable links on actions/nodes with issues so clicks fall through
+         to open the editor instead of navigating. */
       .action-content.has-issues .linked-name div,
       .node.has-issues > .router .linked-name div {
         text-decoration: none !important;
         cursor: default !important;
         pointer-events: none;
       }
+      .action-content.has-issues .linked-pill,
+      .node.has-issues > .router .linked-pill {
+        pointer-events: none;
+      }
 
       .action.sortable {
         display: flex;
@@ -1094,13 +1099,16 @@ export class CanvasNode extends RapidElement {
   }
 
   /**
-   * Returns true if the click target is inside a `.linked-name` that is
-   * still active (i.e. the containing action/node has no issues).
-   * When an action/node has issues, links are visually disabled and clicks
-   * should fall through to open the editor instead.
+   * Returns true if the click target is inside a `.linked-name` or
+   * `.linked-pill` whose containing action/node has no issues. Active
+   * links handle their own navigation, so click-vs-drag and node-edit
+   * handlers bail out on them. When the action/node has issues, links are
+   * visually disabled (see CSS) and clicks fall through to open the
+   * editor instead.
    */
   private isActiveLink(target: HTMLElement, action?: Action): boolean {
-    if (!target.closest('.linked-name')) return false;
+    if (!target.closest('.linked-name') && !target.closest('.linked-pill'))
+      return false;
     if (action) return !this.issuesByAction?.has(action.uuid);
     return !(
       this.issuesByNode?.has(this.node.uuid) ||

package/src/flow/DragManager.ts

@@ -127,7 +127,8 @@ export class DragManager {
     if (
       target.classList.contains('exit') ||
       target.closest('.exit') ||
-      target.closest('.linked-name')
+      target.closest('.linked-name') ||
+      target.closest('.linked-pill')
     ) {
       return;
     }
@@ -186,7 +187,8 @@ export class DragManager {
     if (
       target.classList.contains('exit') ||
       target.closest('.exit') ||
-      target.closest('.linked-name')
+      target.closest('.linked-name') ||
+      target.closest('.linked-pill')
     ) {
       return;
     }

package/src/flow/Editor.ts

@@ -22,12 +22,12 @@ import {
 } from '../utils';
 import { TEMBA_COMPONENTS_VERSION } from '../version';
 import {
-  getLanguageDisplayName,
   getNodeBounds,
   calculateReflowPositions,
   NodeBounds,
   snapToGrid
 } from './utils';
+import { getLanguageName } from '../languages';
 import { ACTION_CONFIG, NODE_CONFIG } from './config';
 import { PRIMARY_LANGUAGE_OPTION_VALUE } from './EditorToolbar';
 import {
@@ -1711,7 +1711,7 @@ export class Editor extends RapidElement {
     // Use languages from workspace if available
     if (this.workspace?.languages && this.workspace.languages.length > 0) {
       return this.workspace.languages
-        .map((code) => ({ code, name: getLanguageDisplayName(code) }))
+        .map((code) => ({ code, name: getLanguageName(code) }))
         .filter((lang) => lang.code && lang.name);
     }
 
@@ -1722,7 +1722,7 @@ export class Editor extends RapidElement {
     ) {
       return this.definition._ui.languages.map((lang: any) => {
         const code = typeof lang === 'string' ? lang : lang.iso || lang.code;
-        return { code, name: getLanguageDisplayName(code) };
+        return { code, name: getLanguageName(code) };
       });
     }
 
@@ -3644,7 +3644,7 @@ export class Editor extends RapidElement {
     const baseLanguage = this.definition?.language;
     const baseLanguageName =
       availableLanguages.find((lang) => lang.code === baseLanguage)?.name ||
-      (baseLanguage ? getLanguageDisplayName(baseLanguage) : '') ||
+      (baseLanguage ? getLanguageName(baseLanguage) : '') ||
       'Primary language';
     const isBaseSelected =
       !this.languageCode ||

package/src/flow/NodeEditor.ts

@@ -37,7 +37,7 @@ import {
   fromStore,
   zustand
 } from '../store/AppState';
-import { getStore } from '../store/Store';
+import { getLanguageName } from '../languages';
 
 export class NodeEditor extends RapidElement {
   static get styles() {
@@ -2656,7 +2656,7 @@ export class NodeEditor extends RapidElement {
     const dialogSize = config?.dialogSize || 'medium'; // Default to 'large' if not specified
 
     const languageName = this.isTranslating
-      ? getStore().getLanguageName(this.languageCode)
+      ? getLanguageName(this.languageCode)
       : '';
 
     let header = config?.name || 'Edit';

package/src/flow/NodeTypeSelector.ts

@@ -213,11 +213,6 @@ export class NodeTypeSelector extends RapidElement {
         background: rgba(0, 0, 0, 0.03);
         border-radius: 0 0 var(--curvature) var(--curvature);
       }
-
-      temba-button {
-        --button-y: 0.5em;
-        --button-x: 1.25em;
-      }
     `;
   }
 

package/src/flow/actions/set_contact_language.ts

@@ -8,14 +8,15 @@ import {
 } from '../types';
 import { Node, SetContactLanguage } from '../../store/flow-definition';
 import { getStore } from '../../store/Store';
-import { getLanguageDisplayName, renderClamped } from '../utils';
+import { renderClamped } from '../utils';
+import { getLanguageName } from '../../languages';
 
 export const set_contact_language: ActionConfig = {
   name: 'Update Language',
   group: ACTION_GROUPS.contacts,
   flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactLanguage) => {
-    const name = getLanguageDisplayName(action.language);
+    const name = getLanguageName(action.language);
     return renderClamped(
       html`Set to <strong>${name}</strong>`,
       `Set to ${name}`
@@ -37,7 +38,7 @@ export const set_contact_language: ActionConfig = {
         if (workspace?.languages && Array.isArray(workspace.languages)) {
           return workspace.languages.map((languageCode: string) => ({
             value: languageCode,
-            name: getLanguageDisplayName(languageCode)
+            name: getLanguageName(languageCode)
           }));
         }
         return [];
@@ -51,7 +52,7 @@ export const set_contact_language: ActionConfig = {
         language: [
           {
             value: action.language,
-            name: getLanguageDisplayName(action.language)
+            name: getLanguageName(action.language)
           }
         ],
         uuid: action.uuid

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -1,9 +1,4 @@
-import {
-  FormData,
-  NodeConfig,
-  ACTION_GROUPS,
-  FlowTypes
-} from '../types';
+import { FormData, NodeConfig, ACTION_GROUPS, FlowTypes } from '../types';
 import { CallLLM, Node } from '../../store/flow-definition';
 import { generateUUID, createMultiCategoryRouter } from '../../utils';
 import { html } from 'lit';

package/src/flow/utils.ts

@@ -1,7 +1,7 @@
 import { html, TemplateResult } from 'lit-html';
 import { iconToPillType } from '../styles/pillVariants';
 import { Action, NamedObject, FlowPosition } from '../store/flow-definition';
-import { FlowIssue, zustand } from '../store/AppState';
+import { FlowIssue } from '../store/AppState';
 import { CustomEventType } from '../interfaces';
 import { tokenize, TokenType } from '../excellent/tokenizer';
 import { TOKEN_COLORS } from '../excellent/token-styles';
@@ -107,25 +107,6 @@ export function resolveFromLocalizationFormData(
   return undefined;
 }
 
-const intlLanguageNames = new Intl.DisplayNames(['en'], { type: 'language' });
-
-export function getLanguageDisplayName(code: string): string {
-  if (code === 'und') return 'Unknown';
-
-  // Prefer names from the RapidPro languages endpoint, which supplies
-  // ISO 639-3 codes (e.g. prd, pst) that Intl.DisplayNames doesn't cover.
-  const storeName = zustand.getState().languageNames?.[code];
-  if (storeName) {
-    return storeName;
-  }
-
-  try {
-    return intlLanguageNames.of(code) || code;
-  } catch {
-    return code;
-  }
-}
-
 const IS_MAC =
   typeof navigator !== 'undefined' &&
   /Mac|iPod|iPhone|iPad/.test(navigator.platform);
@@ -405,6 +386,7 @@ const renderLinkedObject = (
 
   const pillType = iconToPillType(icon);
   return html`<temba-label
+    class="linked-pill"
     icon=${icon || ''}
     type=${pillType || 'neutral'}
     clickable

package/src/form/ColorPicker.ts

@@ -29,7 +29,6 @@ export class ColorPicker extends FieldElement {
       :host {
         color: var(--color-text);
         display: inline-block;
-        --curvature: 0.55em;
         width: 100%;
 
         --temba-textinput-padding: 0.4em;
@@ -37,13 +36,16 @@ export class ColorPicker extends FieldElement {
 
       temba-textinput {
         margin-left: 0.3em;
-        width: 5em;
+        width: 7em;
+        --temba-textinput-min-height: 0;
+        --temba-textinput-padding: 4px 8px;
+        --temba-textinput-font-size: 12.5px;
       }
 
       .wrapper {
         border: 1px solid var(--color-widget-border);
         padding: calc(var(--curvature) / 2);
-        border-radius: calc(var(--curvature) * 1.5);
+        border-radius: var(--curvature);
         transition: all calc(var(--transition-speed) * 2) var(--bounce);
 
         display: flex;

package/src/form/DatePicker.ts

@@ -19,6 +19,7 @@ export class DatePicker extends FieldElement {
       .container {
         border-radius: var(--curvature);
         border: 1px solid var(--color-widget-border);
+        background: var(--color-widget-bg);
         display: flex;
         cursor: pointer;
         box-shadow: var(--widget-box-shadow);
@@ -59,7 +60,7 @@ export class DatePicker extends FieldElement {
       }
 
       .tz-wrapper {
-        background: #efefef;
+        background: var(--sunken);
         display: flex;
         flex-direction: row;
         align-items: center;

package/src/form/select/Omnibox.ts

@@ -120,9 +120,7 @@ export class Omnibox extends Select<OmniOption> {
       option.count !== undefined &&
       option.count !== null
     ) {
-      return html`<div
-        style="display:flex; align-items:center; gap:6px;"
-      >
+      return html`<div style="display:flex; align-items:center; gap:6px;">
         ${base}<span
           style="opacity:0.7; font-size:11px; font-variant-numeric: tabular-nums; font-weight: var(--w-medium);"
           >${option.count.toLocaleString()}</span