@seamly/web-ui 21.0.5-beta.1 → 21.0.5-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "21.0.5-beta.1",
+  "version": "21.0.5-beta.3",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "module": "",

package/src/stylesheets/4-base/_formelements.scss

@@ -3,9 +3,45 @@
 
 // PARTS
 // ----
+.#{$n}-input__checkbox {
+  margin-right: $spacer * 0.5;
+
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+  }
+}
+
 .#{$n}-label {
   display: block;
+  margin-bottom: $spacer * 0.25;
   color: $brand3;
   font-size: $fontsize-medium;
   font-weight: $fontweight-bold;
 }
+
+.#{$n}-input__checkbox[aria-disabled='true'] + .#{$n}-label {
+  opacity: 0.5;
+}
+
+.#{$n}-input__select {
+  appearance: none;
+  width: 100%;
+  min-height: $buttonsize;
+  padding: $spacer * 0.5;
+  border: $thin-border solid $grey-b;
+  border-radius: $borderradius-small;
+  background-color: $white;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxkZWZzLz48cGF0aCBmaWxsPSIjNEE0OEMxIiBkPSJNMi45OTgsNi41MDNjMC0wLjI0NywwLjA5MS0wLjQ5NCwwLjI3My0wLjY4N2MwLjM4LTAuNDAxLDEuMDEzLTAuNDE5LDEuNDE0LTAuMDRsMi41ODUsMi40NDYJYzAuMzk0LDAuMzczLDEuMDYsMC4zNzMsMS40NTQsMGwyLjU4Ni0yLjQ0NmMwLjQtMC4zNzksMS4wMzMtMC4zNjIsMS40MTMsMC4wNGMwLjM3OSwwLjQsMC4zNjIsMS4wMzQtMC4wMzksMS40MTRsLTIuNTg2LDIuNDQ2CWMtMS4xNTksMS4wOTYtMy4wNDMsMS4wOTYtNC4yMDMsMEwzLjMxLDcuMjI5QzMuMTAyLDcuMDMzLDIuOTk4LDYuNzY4LDIuOTk4LDYuNTAzeiIvPjwvc3ZnPg==');
+  background-repeat: no-repeat;
+  background-position: right $spacer * 0.5 top 50%;
+  background-size: $spacer * 0.75 auto;
+  color: $grey-e;
+  font-size: $fontsize-default;
+  resize: none;
+
+  &[aria-disabled='true'] {
+    border: $thin-border solid $grey-c;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxkZWZzLz48cGF0aCBmaWxsPSIjYTNiNGJmIiBkPSJNMi45OTgsNi41MDNjMC0wLjI0NywwLjA5MS0wLjQ5NCwwLjI3My0wLjY4N2MwLjM4LTAuNDAxLDEuMDEzLTAuNDE5LDEuNDE0LTAuMDRsMi41ODUsMi40NDYJYzAuMzk0LDAuMzczLDEuMDYsMC4zNzMsMS40NTQsMGwyLjU4Ni0yLjQ0NmMwLjQtMC4zNzksMS4wMzMtMC4zNjIsMS40MTMsMC4wNGMwLjM3OSwwLjQsMC4zNjIsMS4wMzQtMC4wMzksMS40MTRsLTIuNTg2LDIuNDQ2CWMtMS4xNTksMS4wOTYtMy4wNDMsMS4wOTYtNC4yMDMsMEwzLjMxLDcuMjI5QzMuMTAyLDcuMDMzLDIuOTk4LDYuNzY4LDIuOTk4LDYuNTAzeiIvPjwvc3ZnPg==');
+    color: $grey-c;
+  }
+}

package/src/stylesheets/5-components/_buttons.scss

@@ -1,16 +1,3 @@
-a,
-input,
-button {
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: 1px dotted #212121;
-    outline: 1px auto -webkit-focus-ring-color;
-  }
-}
-
 .#{$n}-button {
   display: inline-block;
   margin: 0;

package/src/stylesheets/5-components/_chat-status.scss

@@ -1,7 +1,10 @@
 .#{$n}-chat-status {
   display: flex;
-  align-items: flex-start;
-  gap: $spacer * 0.5;
+  z-index: 1;
+  top: $spacer;
+  right: 0;
+  left: 0;
+  align-items: center;
   width: 100%;
   min-height: $buttonsize;
   margin: $spacer;
@@ -11,31 +14,44 @@
   box-shadow: $boxshadow;
 
   &--condensed {
-    align-items: center;
-    padding: $spacer * 0.25 $spacer * 0.5 $spacer * 0.25 $spacer * 0.25;
+    padding: $spacer * 0.25;
+
+    .#{$n}-chat-status__title {
+      padding-left: $spacer * 0.25;
+    }
+
+    .#{$n}-chat-status__close {
+      min-height: $buttonsize-small;
+      padding-right: $spacer * 0.25;
+    }
   }
 }
 
-.#{$n}-chat--layout-window .#{$n}-chat-status {
-  margin-right: $buttonsize + $spacer * 2;
+.#{$n}-chat--layout-window {
+  .#{$n}-chat-status {
+    margin-right: $buttonsize + $spacer * 2;
+  }
 }
 
 .#{$n}-chat-status__body {
   display: flex;
-  flex: 1 1 auto;
-  flex-wrap: wrap;
-  gap: $spacer * 0.5;
-  align-items: center;
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: flex-start;
   justify-content: flex-start;
 }
 
 .#{$n}-chat-status__title {
   display: flex;
-  margin: 0;
+  margin: 0 $spacer * 0.5 0 0;
   color: $grey-e;
   font-size: $fontsize-medium;
   font-weight: $fontweight-bold;
   line-height: 1.25;
+
+  + .#{$n}-chat-status__button {
+    margin-top: $spacer * 0.5;
+  }
 }
 
 .#{$n}-chat-status .#{$n}-icon {
@@ -51,33 +67,28 @@
   min-height: $buttonsize-small;
   padding: $spacer * 0.25 $spacer * 0.5;
   color: $white;
-}
 
-.#{$n}-chat-status__button .#{$n}-icon {
-  svg {
-    width: 100%;
-    height: 100%;
+  .#{$n}-icon {
+    margin-right: $spacer * 0.25;
+
+    svg {
+      width: 100%;
+      height: 100%;
 
-    path {
-      fill: $white;
+      path {
+        fill: $white;
+      }
     }
   }
 }
 
 .#{$n}-chat-status__close {
   display: inline-flex;
-  flex: 0 0 auto;
+  align-self: flex-start;
   justify-content: center;
-  min-width: $buttonsize-small - $spacer * 0.5;
   min-height: $buttonsize-small - $spacer * 0.5;
   color: $brand3;
 
-  &:has(.#{$n}-icon) {
-    flex: 0 0 $buttonsize-small - $spacer * 0.5;
-    width: $buttonsize-small - $spacer * 0.5;
-    padding: 0;
-  }
-
   .#{$n}-icon {
     align-self: center;
   }

package/src/stylesheets/5-components/_conversation.scss

@@ -67,3 +67,36 @@
   }
 }
 
+.#{$n}-unread-messages {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  align-items: center;
+  justify-content: center;
+  margin: $spacer;
+  opacity: 0;
+
+  > .#{$n}-button {
+    display: flex;
+    align-items: center;
+
+    > .#{$n}-icon {
+      width: $spacer;
+      height: $spacer;
+      margin-left: calc($spacer / 2);
+
+      svg path {
+        fill: $white;
+      }
+    }
+  }
+}
+
+.#{$n}-unread-messages.#{$n}-transition--visible {
+  display: flex;
+}
+
+.#{$n}-unread-messages.#{$n}-transition--in {
+  transition: opacity $transition 1000ms;
+  opacity: 1;
+}

package/src/stylesheets/5-components/_options.scss

@@ -238,7 +238,7 @@
   border-radius: $borderradius-small;
   font-size: $fontsize-default;
 
-  &:focus-visible {
+  &:focus {
     border: $thin-border solid $grey-b;
   }
 
@@ -249,6 +249,11 @@
   }
 }
 
+.#{$n}-options__active-language {
+  color: $grey-e;
+  font-size: $fontsize-medium;
+}
+
 .#{$n}-options__actions {
   display: flex;
   flex: 0 0 auto;

package/src/stylesheets/5-components/_skip-link.scss

@@ -14,9 +14,8 @@
   color: $white;
   font-size: $fontsize-small;
 
-  &:focus-visible {
+  &:focus {
     transform: translate(-50%, 0%) scale(1);
-    outline: none;
     opacity: 1;
   }
 }

package/src/stylesheets/5-components/_upload.scss

@@ -84,9 +84,9 @@
   border-radius: $borderradius-small;
 }
 
-.#{$n}-file-upload.#{$n}-focus-within:has(.#{$n}-upload__input:focus-visible) {
+.#{$n}-file-upload.#{$n}-focus-within {
   outline: 1px dotted #212121;
-  outline: 1px auto -webkit-focus-ring-color;
+  outline: 5px auto -webkit-focus-ring-color;
 }
 
 // VISUALLY HIDDEN

package/src/stylesheets/6-default-implementation/_hover.scss

@@ -13,7 +13,7 @@
         transition: fill $transition;
       }
 
-      &:hover .#{$n}-icon svg path {
+      &:hover svg path {
         fill: $white;
       }
     }
@@ -77,19 +77,16 @@
       fill: $white;
     }
 
-    .#{$n}-conversation__item--source-agent
-      .#{$n}-download.#{$n}-download-link:hover
-      .#{$n}-icon
-      path {
-      fill: $white;
-    }
-
     .#{$n}-input__text {
       transition: padding $transition, border $transition;
 
       &:hover {
         border-color: $interaction-dark;
       }
+
+      &:focus {
+        border-color: transparent;
+      }
     }
 
     .#{$n}-input__submit:not([aria-disabled='true']):hover .#{$n}-icon path {

package/src/stylesheets/styles.scss

@@ -45,7 +45,6 @@
   @import '5-components/window-open-button';
   @import '5-components/pre-chat-messages';
   @import '5-components/unstarted';
-  @import '5-components/unread-messages';
 }
 
 .#{$n}-app,

package/src/stylesheets/5-components/_unread-messages.scss

@@ -1,33 +0,0 @@
-.#{$n}-unread-messages {
-  display: none;
-  position: absolute;
-  bottom: $spacer;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  opacity: 0;
-
-  &.#{$n}-transition--visible {
-    display: flex;
-  }
-
-  &.#{$n}-transition--in {
-    transition: opacity $transition 1s;
-    opacity: 1;
-  }
-
-  .#{$n}-button {
-    display: flex;
-    align-items: center;
-    gap: $spacer * 0.5;
-  }
-
-  .#{$n}-icon {
-    width: $spacer;
-    height: $spacer;
-
-    svg path {
-      fill: $white;
-    }
-  }
-}