@telia-ace/widget-conversation-flamingo 1.1.72-rc.19 → 1.1.72-rc.20

package/index.js

@@ -125,11 +125,16 @@
         font-family: TeliaSans, Helvetica, Arial, Lucida Grande, sans-serif;
       }
 
+      :focus {
+        outline-color: var(--focus-color);
+      }
+
       .trigger-container {
         display: flex;
         align-items: center;
         gap: 1rem;
       }
+
       .trigger-container.hidden {
         display: none;
       }
@@ -157,19 +162,24 @@
         box-sizing: border-box;
         transition: transform 200ms ease-out;
       }
+
       .trigger:active {
         transform: scale(0.8) !important;
       }
+
       .trigger:hover:not(:active) {
         transform: scale(1.1) !important;
       }
+
       .trigger.rendered {
         transform: scale(1);
       }
+
       .trigger.active .trigger-icon {
         opacity: 0;
         transform: rotate(-180deg) scale(0);
       }
+
       .trigger.active .trigger-close {
         opacity: 1;
         transform: rotate(0deg) scale(1);
@@ -187,6 +197,7 @@
           var(--text-on-primary-background)
         );
       }
+
       .trigger-close {
         opacity: 0;
         transition: transform 200ms ease-out;
@@ -200,6 +211,7 @@
         justify-content: center;
         align-items: center;
       }
+
       .trigger-close svg path {
         fill: var(
           --interactive-text-on-primary-background,
@@ -587,6 +599,7 @@
       :host {
         display: block;
       }
+
       .conversation-feed {
         display: flex;
         flex-direction: column;
@@ -594,6 +607,10 @@
         min-height: 100%;
         padding: var(--spacing-md);
       }
+
+      .conversation-entry:focus {
+        outline-color: var(--focus-color);
+      }
     `];gi([w({attribute:!1})],mt.prototype,"entries",2);gi([w({type:Boolean})],mt.prototype,"loading",2);/**
  * @license
  * Copyright 2021 Google LLC
@@ -665,17 +682,25 @@
       :host {
         box-sizing: border-box;
       }
+
+      :focus {
+        outline-color: var(--focus-color);
+      }
+
       * {
         box-sizing: border-box;
       }
+
       p {
         margin: 0;
         padding: 0;
         word-break: break-word;
       }
+
       a {
         word-break: break-all;
       }
+
       img {
         cursor: pointer;
         width: 100%;
@@ -740,20 +765,29 @@ Please report this to https://github.com/markedjs/marked.`,e){const i="<p>An err
       :host {
         box-sizing: border-box;
       }
+
+      :focus {
+        outline-color: var(--focus-color);
+      }
+
       * {
         box-sizing: border-box;
       }
+
       p {
         margin: 0;
         padding: 0;
         word-break: break-word;
       }
+
       p:not(:first-of-type) {
         margin-top: var(--spacing-sm);
       }
+
       a {
         word-break: break-all;
       }
+
       img {
         cursor: pointer;
         width: 100%;
@@ -770,6 +804,10 @@ Please report this to https://github.com/markedjs/marked.`,e){const i="<p>An err
       </button>
       <img src="${this.imageUrl}" alt="${this.altText??""}" />
     </div> `}}wn.styles=[E`
+      :focus {
+        outline-color: var(--focus-color);
+      }
+
       .lightbox {
         position: fixed;
         z-index: 9999;
@@ -924,14 +962,21 @@ Please report this to https://github.com/markedjs/marked.`,e){const i="<p>An err
         scrollbar-width: thin; /* Firefox */
         scrollbar-color: #7f7f7f transparent; /* Firefox */
       }
+
+      :focus {
+        outline-color: var(--focus-color);
+      }
+
       ::-webkit-scrollbar {
         width: 3px !important;
         background-color: transparent;
         border-left: none;
       }
+
       ::-webkit-scrollbar-thumb {
         background-color: #7f7f7f;
       }
+
       ::-webkit-scrollbar-track {
         -webkit-box-shadow: none !important;
         box-shadow: none !important;
@@ -976,7 +1021,6 @@ Please report this to https://github.com/markedjs/marked.`,e){const i="<p>An err
         padding: var(--spacing-sm);
         border-radius: var(--spacing-sm);
         left: -10000000px;
-        outline: none;
       }
       .skip-to-latest-message-button:focus-visible {
         left: 50%;

package/index.mjs

@@ -3333,11 +3333,16 @@ X.styles = [
         font-family: TeliaSans, Helvetica, Arial, Lucida Grande, sans-serif;
       }
 
+      :focus {
+        outline-color: var(--focus-color);
+      }
+
       .trigger-container {
         display: flex;
         align-items: center;
         gap: 1rem;
       }
+
       .trigger-container.hidden {
         display: none;
       }
@@ -3365,19 +3370,24 @@ X.styles = [
         box-sizing: border-box;
         transition: transform 200ms ease-out;
       }
+
       .trigger:active {
         transform: scale(0.8) !important;
       }
+
       .trigger:hover:not(:active) {
         transform: scale(1.1) !important;
       }
+
       .trigger.rendered {
         transform: scale(1);
       }
+
       .trigger.active .trigger-icon {
         opacity: 0;
         transform: rotate(-180deg) scale(0);
       }
+
       .trigger.active .trigger-close {
         opacity: 1;
         transform: rotate(0deg) scale(1);
@@ -3395,6 +3405,7 @@ X.styles = [
           var(--text-on-primary-background)
         );
       }
+
       .trigger-close {
         opacity: 0;
         transition: transform 200ms ease-out;
@@ -3408,6 +3419,7 @@ X.styles = [
         justify-content: center;
         align-items: center;
       }
+
       .trigger-close svg path {
         fill: var(
           --interactive-text-on-primary-background,
@@ -4399,6 +4411,7 @@ mt.styles = [
       :host {
         display: block;
       }
+
       .conversation-feed {
         display: flex;
         flex-direction: column;
@@ -4406,6 +4419,10 @@ mt.styles = [
         min-height: 100%;
         padding: var(--spacing-md);
       }
+
+      .conversation-entry:focus {
+        outline-color: var(--focus-color);
+      }
     `
 ];
 pi([
@@ -4567,17 +4584,25 @@ dn.styles = [
       :host {
         box-sizing: border-box;
       }
+
+      :focus {
+        outline-color: var(--focus-color);
+      }
+
       * {
         box-sizing: border-box;
       }
+
       p {
         margin: 0;
         padding: 0;
         word-break: break-word;
       }
+
       a {
         word-break: break-all;
       }
+
       img {
         cursor: pointer;
         width: 100%;
@@ -6116,20 +6141,29 @@ bt.styles = [
       :host {
         box-sizing: border-box;
       }
+
+      :focus {
+        outline-color: var(--focus-color);
+      }
+
       * {
         box-sizing: border-box;
       }
+
       p {
         margin: 0;
         padding: 0;
         word-break: break-word;
       }
+
       p:not(:first-of-type) {
         margin-top: var(--spacing-sm);
       }
+
       a {
         word-break: break-all;
       }
+
       img {
         cursor: pointer;
         width: 100%;
@@ -6194,6 +6228,10 @@ class xn extends k {
 }
 xn.styles = [
   E`
+      :focus {
+        outline-color: var(--focus-color);
+      }
+
       .lightbox {
         position: fixed;
         z-index: 9999;
@@ -6535,14 +6573,21 @@ R.styles = [
         scrollbar-width: thin; /* Firefox */
         scrollbar-color: #7f7f7f transparent; /* Firefox */
       }
+
+      :focus {
+        outline-color: var(--focus-color);
+      }
+
       ::-webkit-scrollbar {
         width: 3px !important;
         background-color: transparent;
         border-left: none;
       }
+
       ::-webkit-scrollbar-thumb {
         background-color: #7f7f7f;
       }
+
       ::-webkit-scrollbar-track {
         -webkit-box-shadow: none !important;
         box-shadow: none !important;
@@ -6587,7 +6632,6 @@ R.styles = [
         padding: var(--spacing-sm);
         border-radius: var(--spacing-sm);
         left: -10000000px;
-        outline: none;
       }
       .skip-to-latest-message-button:focus-visible {
         left: 50%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-conversation-flamingo",
-  "version": "1.1.72-rc.19",
+  "version": "1.1.72-rc.20",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
@@ -9,7 +9,7 @@
     "@lit-labs/motion": "^1.0.4",
     "@teliads/icons": "^8.4.0",
     "@teliads/components": "^22.1.1",
-    "@telia-ace/widget-core-flamingo": "1.1.72-rc.19",
+    "@telia-ace/widget-core-flamingo": "1.1.72-rc.20",
     "lit-html": "^3.0.2",
     "rxjs": "^7.8.1",
     "marked": "^12.0.2"