@nyaruka/temba-components 0.156.17 → 0.157.0

package/src/form/select/WorkspaceSelect.ts

@@ -14,8 +14,14 @@ export class WorkspaceSelect extends Select<WorkspaceOption> {
     return css`
       ${super.styles}
 
+      /* Workspace chooser is embedded in the account menu, not a
+         standalone form widget — suppress the focus border + halo
+         on both the select itself and the dropdown popup. */
       :host {
-        border: 0px solid blue;
+        --temba-select-focus-border: transparent;
+        --temba-select-focus-halo: none;
+        --temba-options-focus-border: transparent;
+        --temba-options-focus-halo: none;
       }
     `;
   }

package/src/layout/Accordion.ts

@@ -7,8 +7,8 @@ export class Accordion extends LitElement {
     return css`
       :host {
         display: block;
-        border: 1px solid #e0e0e0;
-        border-radius: 6px;
+        border: 1px solid var(--color-widget-border);
+        border-radius: var(--curvature-widget);
         overflow: hidden;
       }
     `;

package/src/layout/Modax.ts

@@ -70,7 +70,7 @@ export class Modax extends RapidElement {
         color: tomato;
         padding: 10px;
         margin-bottom: 10px;
-        border-radius: 6px;
+        border-radius: var(--curvature);
       }
 
       .step-ball {

package/src/list/SortableList.ts

@@ -252,9 +252,168 @@ export class SortableList extends RapidElement {
     // Copy form values for the root element and all descendants
     copyFormValues(element, clone);
 
+    // Inline computed styles onto the clone so it renders faithfully
+    // once detached from its original shadow-DOM scope. The ghost is
+    // appended to document.body (see startDrag), which means the
+    // original's shadow-root-scoped CSS rules no longer apply — chips
+    // would lose their flex layout, the X button would lose its shape,
+    // and the pill --icon-color would stop inheriting. Walk the cloned
+    // light DOM in parallel with the original and inline the layout
+    // properties + a curated set of DS custom properties.
+    this.inlineComputedStyles(element, clone);
+
     return clone;
   }
 
+  /** CSS properties copied from the original to the ghost. Covers
+   * layout (flex/sizing/spacing), visual (colors, borders, radii,
+   * shadows), and text (font, white-space, alignment) — enough to
+   * make a faithful free-floating clone without resolving the entire
+   * ~400 properties getComputedStyle returns.
+   *
+   * Important: `getComputedStyle` returns LONGHAND values only —
+   * asking for shorthand like `padding` / `margin` / `border` returns
+   * an empty string in most browsers. We list longhands explicitly so
+   * inlined chip padding / borders survive the move to document.body.
+   *
+   * Width/height ARE included: nested elements that depend on
+   * shadow-root class rules for sized boxes (e.g. select's
+   * `.remove-item { width: 16px; height: 16px }`) collapse to their
+   * content size without it, leaving a stray gap inside the chip. */
+  private static GHOST_COPY_PROPS = [
+    'display',
+    'flex-grow',
+    'flex-shrink',
+    'flex-basis',
+    'flex-direction',
+    'flex-wrap',
+    'align-items',
+    'align-self',
+    'justify-content',
+    'gap',
+    'column-gap',
+    'row-gap',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'margin-top',
+    'margin-right',
+    'margin-bottom',
+    'margin-left',
+    'border-top-width',
+    'border-right-width',
+    'border-bottom-width',
+    'border-left-width',
+    'border-top-style',
+    'border-right-style',
+    'border-bottom-style',
+    'border-left-style',
+    'border-top-color',
+    'border-right-color',
+    'border-bottom-color',
+    'border-left-color',
+    'border-top-left-radius',
+    'border-top-right-radius',
+    'border-bottom-right-radius',
+    'border-bottom-left-radius',
+    'background-color',
+    'background-image',
+    'color',
+    'font-family',
+    'font-size',
+    'font-weight',
+    'font-style',
+    'line-height',
+    'letter-spacing',
+    'text-align',
+    'white-space',
+    'overflow',
+    'text-overflow',
+    'box-shadow',
+    'opacity',
+    'width',
+    'min-width',
+    'max-width',
+    'height',
+    'min-height',
+    'max-height',
+    'box-sizing',
+    'cursor',
+    'user-select',
+    'vertical-align'
+  ];
+
+  /** Design-system custom properties carried over to the ghost so
+   * nested custom elements (temba-icon's --icon-color, pill variants,
+   * etc.) read the correct values once detached from the original
+   * shadow-root scope. */
+  private static GHOST_COPY_CUSTOM_PROPS = [
+    '--icon-color',
+    '--color-widget-text',
+    '--color-text-help',
+    '--accent',
+    '--accent-100',
+    '--accent-200',
+    '--accent-700',
+    '--flow',
+    '--field',
+    '--channel',
+    '--text-1',
+    '--text-2',
+    '--sunken',
+    '--border',
+    '--border-strong',
+    '--font-family',
+    '--w-regular',
+    '--w-medium',
+    '--curvature',
+    '--curvature-widget'
+  ];
+
+  private inlineComputedStyles(original: Element, clone: Element): void {
+    if (
+      !(original instanceof HTMLElement) ||
+      !(clone instanceof HTMLElement)
+    ) {
+      return;
+    }
+
+    const apply = (orig: HTMLElement, cln: HTMLElement) => {
+      const cs = window.getComputedStyle(orig);
+      let inline = '';
+      for (const p of SortableList.GHOST_COPY_PROPS) {
+        const v = cs.getPropertyValue(p);
+        if (v) inline += `${p}:${v};`;
+      }
+      for (const p of SortableList.GHOST_COPY_CUSTOM_PROPS) {
+        const v = cs.getPropertyValue(p);
+        if (v) inline += `${p}:${v};`;
+      }
+      // existing inline style wins by sitting AFTER the inlined
+      // computed values — preserves anything we just authored elsewhere
+      // (e.g. .option-name's explicit display:flex).
+      cln.setAttribute('style', inline + (cln.getAttribute('style') || ''));
+    };
+
+    const walk = (orig: Element, cln: Element) => {
+      if (orig instanceof HTMLElement && cln instanceof HTMLElement) {
+        apply(orig, cln);
+      }
+      // Descend into both light-DOM and custom-element subtrees: the
+      // latter's slotted/light children still need styles inlined, and
+      // its own shadow DOM rebuilds itself when the clone upgrades.
+      const oc = Array.from(orig.children);
+      const cc = Array.from(cln.children);
+      const n = Math.min(oc.length, cc.length);
+      for (let i = 0; i < n; i++) {
+        walk(oc[i], cc[i]);
+      }
+    };
+
+    walk(original, clone);
+  }
+
   public getIds() {
     return this.getSortableElements().map((ele) => ele.id);
   }

package/src/live/ContactChat.ts

@@ -7,6 +7,7 @@ import {
   TemplateResult
 } from 'lit';
 import { property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
 import {
   Contact,
   CustomEventType,
@@ -313,45 +314,51 @@ export class ContactChat extends ContactStoreElement {
         border-color: #ccc;
       }
 
-      .action-bar {
-      }
-
+      /* "Currently in [flow]" treatment.
+         Lives in the chat footer to advertise the active run with an
+         optional Interrupt action (the chip's X). Sized to its
+         contents only (inline-flex) so the chat scrollbar to the
+         right remains clickable, and pointer-events:none on the
+         wrapping footer means the rest of the row doesn't intercept
+         scrollbar drags either. Translucent white bg + backdrop
+         blur keeps the chat history legible through the chip. */
       .in-flow {
-        border-radius: 0.8em;
-        align-items: center;
-        background: #666;
-        padding: 0.5em 1em;
-        margin: 1em;
-        margin-right: 2em;
         display: inline-flex;
-        opacity: 0.9;
+        align-items: center;
+        gap: 8px;
+        padding: 0.4em 0.75em;
+        margin: 0.5em;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.75);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        box-shadow: var(--shadow-1);
       }
 
       .flow-footer {
         text-align: center;
         pointer-events: none;
+        /* The chat history has a scrollbar on the right edge; the
+           footer overlay spans the full container width, so centering
+           inside it lands the chip slightly right-of-center relative
+           to the visible message area. Reserve the scrollbar width on
+           the right so the chip is centered to what the user sees. */
+        padding-right: 15px;
       }
 
       .flow-footer .in-flow {
         pointer-events: auto;
       }
 
-      .in-flow:hover {
-        opacity: 1;
-      }
-
       .in-flow .flow-name {
-        display: flex;
-        color: #fff;
-      }
-
-      .in-flow a {
-        font-weight: bold;
-        color: #fff;
-      }
-
-      .in-flow .interrupt-button {
-        margin-left: 1em;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        /* Match the chat history event text — same hue + size — so
+           the "Currently in" line reads as one of the events rather
+           than its own UI chrome. */
+        font-size: 13.5px;
+        color: #8e8e93;
       }
 
       .in-flow .interrupt {
@@ -1420,26 +1427,21 @@ export class ContactChat extends ContactStoreElement {
                       <div slot="footer" class="flow-footer">
                         <div class="in-flow">
                           <div class="flow-name">
-                            <temba-icon name="flow" size="1.2"></temba-icon>
-                            <div>
-                              Currently in
-                              <a
-                                href="/flow/editor/${this.currentContact.flow
-                                  .uuid}/"
-                                >${this.currentContact.flow.name}</a
-                              >
-                            </div>
+                            <span>Currently in</span>
+                            <a
+                              href="/flow/editor/${this.currentContact.flow
+                                .uuid}/"
+                              onclick="goto(event, this)"
+                              ><temba-label
+                                type="flow"
+                                clickable
+                                ?removable=${this.showInterrupt}
+                                removeLabel=${msg('Interrupt flow')}
+                                @temba-remove=${this.handleInterrupt}
+                                >${this.currentContact.flow.name}</temba-label
+                              ></a
+                            >
                           </div>
-                          ${this.showInterrupt
-                            ? html`<temba-button
-                                class="interrupt-button"
-                                destructive
-                                small
-                                @click=${this.handleInterrupt}
-                                name="Interrupt"
-                              >
-                              </temba-button>`
-                            : null}
                         </div>
                       </div>
                     `

package/src/live/ContactDetails.ts

@@ -75,6 +75,7 @@ export class ContactDetails extends ContactStoreElement {
                   onclick="goto(event)"
                   href="/contact/group/${group.uuid}/"
                   icon=${group.is_dynamic ? Icon.group_smart : Icon.group}
+                  type="group"
                   clickable
                 >
                   ${group.name}

package/src/live/ContactFieldEditor.ts

@@ -101,16 +101,20 @@ export class ContactFieldEditor extends RapidElement {
         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;
-        margin-top: -0.6em;
-        margin-left: 0.5em;
+        top: -0.6em;
+        left: 0.5em;
         pointer-events: none;
         background: #fff;
         border-radius: var(--curvature);
       }
 
       temba-select .prefix {
-        margin-top: -1em;
+        top: -0.7em;
       }
 
       .wrapper {
@@ -191,19 +195,22 @@ export class ContactFieldEditor extends RapidElement {
         display: none;
       }
 
+      /* Keep popper icons within the widget's 34px content area so
+         the field height doesn't change when the search/copy buttons
+         appear (i.e. when a value is set). Horizontal padding only —
+         vertical sizing comes from align-items: stretch on the
+         flex .input-container. Inner elements (icons, save button)
+         own their own horizontal spacing via margin, so the popper
+         itself doesn't add asymmetric padding (which would offset
+         its contents and prevent centering). */
       .popper temba-icon {
-        padding: 0.5em 0em;
-        padding-right: 1em;
+        padding: 0 0.6em 0 0;
       }
 
-      .popper:first-child {
-        padding: 0.5em 0em;
-        padding-right: 0.5em;
-        padding-left: 1em;
-      }
-
-      .popper:last-child {
-        padding-right: 0em;
+      /* First icon gets extra left padding so it doesn't hug the
+         popper's left edge — visually balances the inter-icon gap. */
+      .popper temba-icon:first-of-type {
+        padding-left: 0.6em;
       }
 
       .copy.clicked temba-icon {
@@ -223,8 +230,21 @@ export class ContactFieldEditor extends RapidElement {
         align-items: center;
       }
 
-      .save-button {
-        padding-right: 1em;
+      /* .save-button is the class on the <temba-button> element
+         itself. Use tag+class selector and !important to outrank
+         :host { align-self: stretch } from inside Button.ts. min/max
+         height pin the button size so it can't grow with the parent
+         line height (relevant in DatePicker, where the container
+         wraps and the line is ~50px tall). */
+      temba-button.save-button {
+        align-self: center !important;
+        height: 22px !important;
+        min-height: 22px !important;
+        max-height: 22px !important;
+        margin: 5px 6px;
+        --button-y: 0;
+        --button-x: 10px;
+        font-size: 12px;
       }
 
       .dirty .copy,
@@ -272,22 +292,6 @@ export class ContactFieldEditor extends RapidElement {
         padding: 0;
       }
 
-      .dirty temba-datepicker .popper:first-child {
-        padding-left: 1em;
-      }
-
-      .success temba-datepicker .popper:first-child {
-        padding-left: 1em;
-      }
-
-      .failure temba-datepicker .popper:first-child {
-        padding-left: 1em;
-      }
-
-      .saving temba-datepicker .popper:first-child {
-        padding-left: 1em;
-      }
-
       temba-datepicker .postfix {
         margin-left: 0;
       }
@@ -305,6 +309,9 @@ export class ContactFieldEditor extends RapidElement {
 
       temba-select {
         --color-widget-bg: white;
+        /* Let the slotted prefix label escape the widget's top edge
+           — same notched-border look as the textinput / datepicker. */
+        --temba-select-container-overflow: visible;
       }
 
       temba-option {

package/src/live/FieldManager.ts

@@ -247,14 +247,14 @@ export class FieldManager extends EndpointMonitorElement {
         <div
           style="display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em"
         >
-          <span
+          <temba-label
+            type="field"
+            clickable
             @click=${this.handleFieldAction}
             data-key=${field.key}
             data-action="update"
-            style="color: var(--color-link-primary); cursor:pointer;"
+            >${field.label}</temba-label
           >
-            ${field.label}
-          </span>
           ${this.hasUsages(field)
             ? html`
                 <temba-icon

package/src/styles/designTokens.ts

@@ -0,0 +1,145 @@
+import { css } from 'lit';
+
+/**
+ * TextIt Design System tokens — single source of truth.
+ *
+ * Embedded in component shadow DOMs (via FieldElement :host) so the
+ * tokens apply regardless of host-page stylesheet. Host pages may still
+ * override these by re-declaring the variable on the component element
+ * itself (e.g. `temba-select { --accent: ... }`), which beats `:host`.
+ *
+ * Mirrored in static/css/temba-components.css for hosts that want the
+ * tokens at :root scope; keep both in sync if the design system evolves.
+ */
+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);
+
+    /* neutrals */
+    --bg: #f6f7f9;
+    --surface: #ffffff;
+    --sunken: #f1f3f5;
+    --border: #e6e8ec;
+    --border-strong: #d2d6dc;
+    --text-1: #1a1f26;
+    --text-2: #4d5664;
+    --text-3: #7b8593;
+    --text-4: #a2abb8;
+
+    /* status — full set */
+    --success: #16a34a;
+    --success-bg: #e8f6ee;
+    --success-border: #bfe5cd;
+    --info: #2563eb;
+    --info-bg: #e8f0fe;
+    --info-border: #c7d7f8;
+    --warning: #b45309;
+    --warning-bg: #fdf3e2;
+    --warning-border: #f2d9a9;
+    --danger: #d03f3f;
+    --danger-bg: #fcebeb;
+    --danger-border: #f4c8c8;
+    --neutral: #6b7280;
+    --neutral-bg: #eef0f3;
+    --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.) */
+    --flow: #16a34a;
+    --channel: #6b21a8;
+    /* 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.
+       Yellow-700 doubles as the pill's icon color via .pill-field. */
+    --field: #a16207;
+
+    /* type */
+    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --font-mono:
+      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+    --w-regular: 400;
+    --w-medium: 500;
+    --w-semibold: 600;
+    --w-bold: 700;
+
+    /* shape */
+    --r: 8px;
+    --r-xs: 2px;
+    --r-sm: 4px;
+    --r-lg: 12px;
+
+    /* density */
+    --row-h: 36px;
+    --input-h: 34px;
+    --pad: 10px;
+    --gap: 14px;
+
+    /* shadows */
+    --shadow-1:
+      0 1px 1px rgba(15, 22, 36, 0.04), 0 1px 2px rgba(15, 22, 36, 0.04);
+    --shadow-2:
+      0 1px 1px rgba(15, 22, 36, 0.04), 0 4px 12px rgba(15, 22, 36, 0.06);
+    --shadow-3:
+      0 6px 20px rgba(15, 22, 36, 0.1), 0 2px 6px rgba(15, 22, 36, 0.06);
+
+    /* legacy aliases — point at the DS tokens above so existing
+       components pick up the new design language without code changes */
+    --font-family: var(--font);
+    --curvature: var(--r-sm);
+    --curvature-widget: var(--r-sm);
+    /* Focus styling.
+       --focus is the single hue, kept separate from --accent so
+       changing the focus color doesn't shift chip / recipient hues.
+       --focus-muted and --focus-halo are derived once here, so
+       everywhere that needs to draw a focus outline or ring can
+       consume the same values without re-doing the formula.
+       --color-focus / --widget-box-shadow-focused alias the muted
+       versions and are what most widgets reference — these get
+       overridden to error-red by FieldElement's .has-error rule.
+       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);
+    --color-focus: var(--focus-muted);
+    --widget-box-shadow-focused: var(--focus-halo);
+
+    --color-widget-bg: var(--surface);
+    --color-widget-bg-focused: var(--surface);
+    --color-widget-border: var(--border-strong);
+    --color-options-bg: var(--surface);
+    --color-selection: var(--accent-50);
+    --color-success: var(--success);
+    --widget-box-shadow: none;
+    --shadow: var(--shadow-1);
+    --shadow-widget: var(--shadow-1);
+    --color-text: var(--text-1);
+    --color-widget-text: var(--text-1);
+    --color-borders: var(--border);
+    --color-placeholder: var(--text-3);
+    --color-primary-light: var(--sunken);
+    --color-label: var(--text-1);
+    --color-text-help: var(--text-3);
+
+    --temba-textinput-padding: 7px var(--pad);
+    --temba-textinput-font-size: 13.5px;
+    --temba-textinput-min-height: var(--input-h);
+    --temba-select-selected-padding: 0 var(--pad);
+    --temba-select-selected-line-height: 1.4;
+    --temba-select-selected-font-size: 13.5px;
+    --temba-select-min-height: var(--input-h);
+  }
+`;