@nyaruka/temba-components 0.156.12 → 0.156.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nyaruka/temba-components",
3
- "version": "0.156.12",
3
+ "version": "0.156.14",
4
4
  "description": "Web components to support rapidpro and related projects",
5
5
  "author": "Nyaruka <code@nyaruka.coim>",
6
6
  "main": "dist/index.js",
@@ -53,16 +53,20 @@ export class Button extends LitElement {
53
53
  background: rgba(0, 0, 0, 0.05);
54
54
  }
55
55
 
56
+ .button-mask:active {
57
+ background: rgba(0, 0, 0, 0.12);
58
+ }
59
+
56
60
  .button-container:focus {
57
61
  outline: none;
58
- margin: 0;
59
62
  }
60
63
 
61
- .button-container:focus {
64
+ /* Only show the focus ring for keyboard navigation, never on click. */
65
+ .button-container:focus-visible {
62
66
  box-shadow: var(--widget-box-shadow-focused);
63
67
  }
64
68
 
65
- .button-container.secondary-button:focus .button-mask {
69
+ .button-container.secondary-button:focus-visible .button-mask {
66
70
  background: transparent;
67
71
  }
68
72
 
@@ -103,7 +107,8 @@ export class Button extends LitElement {
103
107
  border: 1px solid transparent;
104
108
  }
105
109
 
106
- .button-container.secondary-button.active-button:focus .button-mask {
110
+ .button-container.secondary-button.active-button:focus-visible
111
+ .button-mask {
107
112
  background: transparent;
108
113
  box-shadow: none;
109
114
  }
@@ -562,6 +562,19 @@ export class Options extends RapidElement {
562
562
  return;
563
563
  }
564
564
 
565
+ // Only intercept keys when the event originated within our owning component.
566
+ // Without this, any temba-options with populated options would swallow arrow
567
+ // keys document-wide, breaking cursor movement in unrelated text editors.
568
+ // All current usages render temba-options inside another custom element's
569
+ // shadow root, so scoping by host correctly distinguishes between editors.
570
+ if (!this.block) {
571
+ const root = this.getRootNode();
572
+ const host = root instanceof ShadowRoot ? root.host : null;
573
+ if (host && !evt.composedPath().includes(host)) {
574
+ return;
575
+ }
576
+ }
577
+
565
578
  if (this.options && this.options.length > 0) {
566
579
  if ((evt.ctrlKey && evt.key === 'n') || evt.key === 'ArrowDown') {
567
580
  this.moveCursor(1);