@nyaruka/temba-components 0.156.18 → 0.157.1

package/src/display/Label.ts

@@ -1,13 +1,27 @@
 import { LitElement, TemplateResult, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
 import { getClasses } from '../utils';
 import { styleMap } from 'lit-html/directives/style-map.js';
+import { designTokens } from '../styles/designTokens';
+import {
+  pillVariants,
+  PILL_TYPES,
+  PILL_TYPE_ICONS
+} from '../styles/pillVariants';
 
 export default class Label extends LitElement {
   static get styles() {
     return css`
+      ${designTokens}
+
       :host {
         display: inline-block;
+        /* Cap at parent width so a pill sitting in a constrained
+           container (e.g. a flow canvas node body) shrinks to fit
+           rather than overflowing. The slot/mask below have the
+           min-width:0 needed to let the ellipsis engage. */
+        max-width: 100%;
       }
 
       slot {
@@ -15,12 +29,19 @@ export default class Label extends LitElement {
         overflow-x: hidden;
         text-overflow: ellipsis;
         display: block;
+        /* Without min-width:0 the slot — as a flex item inside .mask —
+           refuses to shrink below its content size, defeating the
+           overflow/ellipsis. */
+        min-width: 0;
       }
 
       .mask {
         padding: 3px 8px;
         border-radius: 12px;
         display: flex;
+        /* Same reason as slot — let the mask shrink below its content
+           size so the inner slot can ellipsize. */
+        min-width: 0;
       }
 
       temba-icon {
@@ -43,6 +64,72 @@ export default class Label extends LitElement {
         text-shadow: none;
       }
 
+      /* DS pill mode — engaged when the consumer sets [type]. Overrides
+         the legacy chip chrome (shadow) and shape (12px radius) with
+         the design-system pill (flat, type-colored via .pill-{type},
+         1px border, 999px radius). Background/foreground/icon-color
+         are owned by pillVariants — we only set non-color chrome here
+         so we don't outrank the variant. */
+      .label[class*='pill-'] {
+        font-size: 11.5px;
+        font-weight: var(--w-regular);
+        /* border color is owned by .pill-{type} in pillVariants — only
+           set width/style here so we don't outrank the variant. */
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 999px;
+        box-shadow: none;
+      }
+      .label[class*='pill-'] .mask {
+        padding: 0 7px;
+        height: 20px;
+        align-items: center;
+        gap: 4px;
+        border-radius: 999px;
+      }
+      /* Hover tint pulled from the pill's own foreground (which is the
+         dark variant shade), so flow stays bluish, group stays purplish,
+         etc. — no grey wash. */
+      .label[class*='pill-'].clickable .mask:hover {
+        background: color-mix(in oklab, currentColor 10%, transparent);
+      }
+      .label[class*='pill-'] temba-icon {
+        margin-right: 0;
+        padding-bottom: 0;
+      }
+
+      /* Chip-style X button — matches the multi-select chip's
+         .remove-item. currentColor-tinted bg so it picks up the
+         pill variant's hue. Sits on the left, ahead of the icon. */
+      .label[class*='pill-'] .remove {
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        border-radius: 999px;
+        background: color-mix(in oklab, currentColor 25%, transparent);
+        color: inherit;
+        opacity: 0.8;
+        --icon-color: currentColor;
+      }
+      .label[class*='pill-'] .remove:hover {
+        opacity: 1;
+        background: color-mix(in oklab, currentColor 45%, transparent);
+      }
+
+      /* When a removable X is present, tighten the mask's left padding
+         so the X sits snug against the pill edge (matches the
+         multi-select chip's 4px left padding). Right padding stays so
+         the trailing icon/name keep their breathing room. */
+      .label[class*='pill-']:has(.remove) .mask {
+        padding-left: 4px;
+      }
+
       .danger {
         background: tomato;
         color: #fff;
@@ -79,6 +166,11 @@ export default class Label extends LitElement {
       .shadow {
         box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
       }
+
+      /* DS pill variants come last so .pill-{type} wins on source
+         order against equal-specificity legacy rules above (.label,
+         .danger, .primary, etc.). */
+      ${pillVariants}
     `;
   }
 
@@ -106,12 +198,47 @@ export default class Label extends LitElement {
   @property({ type: String })
   icon: string;
 
+  /**
+   * Design-system pill variant — `flow`, `group`, `contact`, `field`,
+   * `keyword`, `label`, or `neutral`. When set, switches the chrome to
+   * a flat DS pill (rounded 999px, type-colored). Stays the legacy
+   * shadowed label when unset, so existing consumers are unaffected.
+   */
+  @property({ type: String })
+  type: string;
+
+  /**
+   * Render a chip-style X button on the left of the pill. Clicking it
+   * fires a `temba-remove` event; the rest of the pill stays clickable
+   * for navigation as usual.
+   */
+  @property({ type: Boolean })
+  removable: boolean;
+
+  /**
+   * Accessible label for the remove button. Defaults to a localized
+   * "Remove", but consumers whose action verb differs (e.g.
+   * "Interrupt flow") should pass their own — the X button is the
+   * affordance for whatever action `temba-remove` triggers, so the
+   * accessible name should match.
+   */
+  @property({ type: String })
+  removeLabel: string;
+
   @property()
   backgroundColor: string;
 
   @property()
   textColor: string;
 
+  private handleRemove(e: MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.dispatchEvent(
+      new CustomEvent('temba-remove', { bubbles: true, composed: true })
+    );
+  }
+
   public render(): TemplateResult {
     const labelStyle = {};
 
@@ -124,6 +251,22 @@ export default class Label extends LitElement {
       labelStyle['--icon-color'] = this.textColor;
     }
 
+    // Only emit `pill-${this.type}` if it's a recognized variant.
+    // An unknown value (or one containing whitespace, e.g.
+    // `"flow danger"` from a malformed template) would otherwise split
+    // into multiple classes and collide with internal modifiers
+    // (`.danger`, `.shadow`, `.clickable`, etc.) defined on `.label`.
+    const validType = this.type && PILL_TYPES.has(this.type);
+    const variantClass = validType ? `pill-${this.type}` : '';
+    // When the consumer sets a recognized `type` (group / flow / etc.)
+    // but doesn't supply an explicit `icon`, fall back to the type's
+    // default icon from PILL_TYPE_ICONS. Call sites then only need
+    // `type="group"` instead of `type="group" icon="group"`.
+    const resolvedIcon =
+      this.icon || (validType ? PILL_TYPE_ICONS[this.type] : undefined);
+
+    const removeAriaLabel = this.removeLabel || msg('Remove');
+
     return html`
       <div
         class="label ${getClasses({
@@ -134,11 +277,20 @@ export default class Label extends LitElement {
           shadow: this.shadow,
           danger: this.danger,
           dark: this.dark
-        })}"
+        })} ${variantClass}"
         style=${styleMap(labelStyle)}
       >
         <div class="mask">
-          ${this.icon ? html`<temba-icon name=${this.icon} />` : null}
+          ${this.removable
+            ? html`<button
+                class="remove"
+                @click=${this.handleRemove}
+                aria-label=${removeAriaLabel}
+              >
+                <temba-icon name="x" size="0.85"></temba-icon>
+              </button>`
+            : null}
+          ${resolvedIcon ? html`<temba-icon name=${resolvedIcon} />` : null}
           <slot></slot>
         </div>
       </div>

package/src/display/LeafletMap.ts

@@ -1,13 +1,14 @@
 import { Feature, Geometry } from 'geojson';
-import {
+import type {
   GeoJSON,
-  geoJSON,
   LeafletEvent,
   LeafletMouseEvent,
   Map as RenderedMap,
-  map as createMap,
   Path
 } from 'leaflet';
+import * as L from 'leaflet';
+
+const { geoJSON, map: createMap } = L;
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 

package/src/display/Options.ts

@@ -5,10 +5,13 @@ import { RapidElement, EventHandler } from '../RapidElement';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { getClasses, getScrollParent, throttle } from '../utils';
 import { msg } from '@lit/localize';
+import { designTokens } from '../styles/designTokens';
 
 export class Options extends RapidElement {
   static get styles() {
     return css`
+      ${designTokens}
+
       :host {
         --transition-speed: 0;
       }
@@ -41,6 +44,10 @@ export class Options extends RapidElement {
         flex-grow: 1;
         height: 100%;
         border: none;
+        /* Block-mode is inline (ticket sidebar, etc.) — drop the
+           z-index so floating popups (selects, dropdowns) opened over
+           the block list always stack above its options. */
+        z-index: auto;
       }
 
       :host([block]) .options-scroll {
@@ -96,25 +103,75 @@ export class Options extends RapidElement {
         border: none;
       }
 
+      /* When shown, the popup is opaque and clickable. Keep the
+         high z-index from .options-container so the popup stacks
+         above neighboring widgets — e.g. embedded prefix labels of
+         later form fields, which sit absolutely positioned at the
+         top edge of their host element. */
       .show {
-        border: 1px solid var(--color-widget-border);
         opacity: 1;
-        z-index: 1;
         pointer-events: auto;
         margin-top: var(--options-margin-top);
       }
 
+      /* Floating popup border uses --focus-muted (not --color-focus)
+         so a parent field's error state — which overrides
+         --color-focus to red via .has-error — doesn't turn the
+         popup red. The popup stays blue regardless. Single source
+         of truth: --focus in designTokens. No halo here — the
+         dropdown is an attached panel, not its own focus indicator
+         (the parent select keeps its own halo). Block-mode renders
+         inline and skips this rule entirely. */
+      :host(:not([block])) .show {
+        border: 1px solid var(--temba-options-focus-border, var(--focus-muted));
+      }
+
+      /* Each option is a DS-style list row: flat, fixed height,
+         tight padding, no inter-item margin. Full-bleed background on
+         hover/focus → no border-radius (rounded corners would leave
+         visible gaps at the dropdown edges). */
       .option {
-        font-size: var(--temba-options-font-size);
-        padding: var(--temba-options-option-padding, 5px 10px);
-        border-radius: var(--temba-options-option-radius, 4px);
-        margin: var(--temba-options-option-margin, 0.3em);
+        font-size: var(--temba-options-font-size, 13.5px);
+        padding: var(--temba-options-option-padding, 0 var(--pad));
+        border-radius: var(--temba-options-option-radius, 0);
+        margin: var(--temba-options-option-margin, 0);
+        min-height: var(--temba-options-option-min-height, 32px);
+        display: flex;
+        align-items: center;
         cursor: pointer;
-        color: var(--color-text-dark);
+        color: var(--text-1);
         scroll-margin: 5px 0px;
         text-align: left;
       }
 
+      /* A single wrapping renderOption child stretches to fill the row
+         so custom templates (e.g. ones using justify-content:
+         space-between to right-align trailing badges) get the full
+         width to lay out in. Scoped to :only-child so a renderOption
+         that emits multiple top-level siblings keeps its natural
+         layout instead of getting an equal-width flex partition. */
+      .option > :only-child {
+        flex: 1;
+        min-width: 0;
+      }
+
+      /* Block-mode (inline, always-visible lists like the ticket
+         sidebar): inset every option uniformly from the container
+         and from each other (padding + flex gap), and re-add the
+         radius so the focused/active wash reads as a rounded pill
+         instead of a stripe. Rich custom renderOption content
+         (multi-line ticket cards, etc.) also wants more vertical
+         padding than the dropdown's compact rows. */
+      :host([block]) .options-scroll {
+        padding: 4px;
+        gap: 4px;
+      }
+      :host([block]) .option {
+        margin: 0;
+        padding: 8px var(--pad);
+        border-radius: var(--r-sm);
+      }
+
       .option * {
         user-select: none;
         -webkit-user-select: none;
@@ -169,20 +226,18 @@ export class Options extends RapidElement {
         max-height: 1.1em;
       }
 
-      .option:hover {
-        background: var(
-          --temba-options-option-hover-bg,
-          var(--option-hover-bg)
-        );
-        color: var(--temba-options-option-hover-text, var(--option-hover-text));
-      }
-
+      /* The component syncs cursorIndex to pointer position on
+         mousemove, so .focused already follows the mouse. A
+         separate :hover rule would just create a second highlight
+         that flickers between rows on transition — keep only the
+         single focused/active state. */
       .option.focused {
         background: var(
           --temba-options-option-focus-bg,
           var(--color-selection)
         );
-        color: var(--temba-options-option-focus-text, var(--color-text-dark));
+        color: var(--temba-options-option-focus-text, var(--accent-700));
+        --icon-color: var(--accent-700);
       }
 
       .option.no-options {

package/src/display/TembaUser.ts

@@ -11,14 +11,16 @@ export const getFullName = (user: {
   first_name?: string;
   last_name?: string;
 }) => {
-  return user.name || [user.first_name, user.last_name].join(' ');
+  if (user.first_name || user.last_name) {
+    return [user.first_name, user.last_name].filter(Boolean).join(' ');
+  }
+  return user.name || '';
 };
 
 export class TembaUser extends RapidElement {
   public static styles = css`
     :host {
       display: flex;
-      transform: scale(var(--temba-scale, 1));
       box-sizing: border-box;
     }
 
@@ -29,6 +31,10 @@ export class TembaUser extends RapidElement {
       flex-grow: 1;
     }
 
+    .avatar-circle {
+      transform-origin: left center;
+    }
+
     .name {
       flex-grow: 1;
       display: -webkit-box;
@@ -59,6 +65,12 @@ export class TembaUser extends RapidElement {
   @property({ type: String })
   name: string;
 
+  @property({ type: String })
+  first_name: string;
+
+  @property({ type: String })
+  last_name: string;
+
   @property({ type: String })
   email: string;
 
@@ -75,10 +87,19 @@ export class TembaUser extends RapidElement {
       this.bgimage = `url('${DEFAULT_AVATAR}') center / contain no-repeat`;
     }
 
-    if (changed.has('name')) {
-      if (this.name) {
-        this.bgcolor = colorHash.hex(this.name);
-        this.initials = extractInitials(this.name);
+    if (
+      changed.has('name') ||
+      changed.has('first_name') ||
+      changed.has('last_name')
+    ) {
+      const fullName = getFullName({
+        name: this.name,
+        first_name: this.first_name,
+        last_name: this.last_name
+      });
+      if (fullName) {
+        this.bgcolor = colorHash.hex(fullName);
+        this.initials = extractInitials(fullName);
       } else {
         this.bgcolor = '#e6e6e6';
         this.initials = '';
@@ -97,7 +118,7 @@ export class TembaUser extends RapidElement {
       <div
         class="avatar-circle"
         style="
-              transform:scale(${this.scale || 1});
+              transform:scale(calc(var(--temba-scale, 1) * ${this.scale || 1}));
               display: flex;
               min-height: 26px;
               min-width: 26px;
@@ -108,7 +129,10 @@ export class TembaUser extends RapidElement {
               font-weight: 400;
               overflow: hidden;
               font-size: 0.8em;
-              margin-right: 0.75em;
+              margin-right: max(
+                0px,
+                calc(0.75em - (1 - var(--temba-scale, 1)) * 26px)
+              );
               box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
               background:${this.bgimage || this.bgcolor};"
       >