@seamly/web-ui 21.0.8 → 22.0.0-beta.1

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

@@ -1,6 +1,7 @@
 .#{$n}-message {
   display: flex;
   flex-flow: row wrap;
+  gap: $spacer * 0.25;
   width: 80%;
 }
 

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

@@ -4,10 +4,7 @@
   display: flex;
   position: fixed;
   z-index: 99;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   align-items: center;
   justify-content: center;
   width: 100%;
@@ -59,6 +56,7 @@
   top: $spacer;
   right: $spacer;
   align-items: center;
+  gap: $spacer * 0.5;
   min-height: $buttonsize;
   padding: $spacer * 0.25 $spacer * 0.75;
   border: 0 none;
@@ -71,7 +69,6 @@
     flex: 0 0 $iconsize-small;
     width: $iconsize-small;
     height: $iconsize-small;
-    margin-right: $spacer * 0.5;
 
     svg {
       width: inherit;

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

@@ -4,6 +4,7 @@
   flex: 0;
   align-items: center;
   justify-content: flex-end;
+  gap: $spacer * 0.5;
   width: 100%;
   padding: $spacer * 0.25;
   border-top: $thin-border solid $grey-b;
@@ -17,6 +18,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  gap: $spacer * 0.25;
   padding: $spacer * 0.25 $spacer * 0.5;
   border-radius: $borderradius-small;
 }
@@ -25,7 +27,6 @@
   flex: 0 0 $iconsize-small;
   width: $iconsize-small;
   height: $iconsize-small;
-  margin-right: $spacer * 0.25;
 }
 
 .#{$n}-chat__options__button .#{$n}-icon svg {
@@ -44,6 +45,8 @@
   position: absolute;
   right: $spacer * 0.5;
   bottom: calc(100% + (#{$spacer} * 0.5));
+  flex-direction: column;
+  gap: $spacer * 0.25;
   max-width: $spacer * 15;
   max-height: $spacer * 20;
   margin: 0;
@@ -60,7 +63,7 @@
 }
 
 .#{$n}-options__menu.#{$n}-transition--visible {
-  display: block;
+  display: flex;
 }
 
 .#{$n}-options__menu.#{$n}-transition--in {
@@ -69,7 +72,6 @@
 }
 
 .#{$n}-options__menu__item {
-  margin-bottom: $spacer * 0.25;
   transition: opacity 0.1s 0.1s ease;
   opacity: 0;
 
@@ -146,7 +148,8 @@
 .#{$n}-options__body {
   display: flex;
   flex-direction: column;
-  max-height: $spacer * 15;
+  gap: $spacer * 0.5;
+  max-height: $spacer * 16;
   transition: opacity 0.1s 0.1s ease;
   opacity: 0;
 }
@@ -161,7 +164,7 @@
   align-items: center;
   width: calc(100% - #{$buttonsize} - (#{$spacer} * 0.5));
   margin: 0;
-  padding: $spacer $spacer $spacer * 0.5;
+  padding: $spacer 0 0 $spacer;
   color: $brand2;
   font-size: $fontsize-default;
   font-weight: $fontweight-bold;
@@ -174,6 +177,7 @@
   right: $spacer * 0.5;
   align-items: center;
   justify-content: center;
+  gap: 0;
   width: $buttonsize;
   height: $buttonsize;
   color: $interaction;
@@ -184,15 +188,17 @@
   flex: 0 0 $iconsize-small;
   width: $iconsize-small;
   height: $iconsize-small;
-}
 
-.#{$n}-options__close .#{$n}-icon path {
-  fill: currentcolor;
+  path {
+    fill: currentcolor;
+  }
 }
 
 .#{$n}-options__form {
+  display: flex;
   flex: 1 1 auto;
   flex-direction: column;
+  gap: $spacer * 0.5;
 }
 
 .#{$n}-options__wrapper {
@@ -200,6 +206,7 @@
   flex: 1 1 auto;
   flex-wrap: wrap;
   align-items: flex-start;
+  gap: $spacer * 0.5;
   width: 100%;
   padding: 0 $spacer;
   overflow: auto;
@@ -208,7 +215,7 @@
   &:last-child::after {
     content: '';
     display: block;
-    flex: 0 0 100%;
+    flex: 0 0 $spacer;
     width: 100%;
     height: $spacer;
   }
@@ -224,7 +231,6 @@
 .#{$n}-options__description {
   display: block;
   width: 100%;
-  margin-bottom: $spacer * 0.5;
   padding: 0 $spacer;
   font-size: $fontsize-medium;
 }
@@ -238,7 +244,7 @@
   border-radius: $borderradius-small;
   font-size: $fontsize-default;
 
-  &:focus {
+  &:focus-visible {
     border: $thin-border solid $grey-b;
   }
 
@@ -249,25 +255,14 @@
   }
 }
 
-.#{$n}-options__active-language {
-  color: $grey-e;
-  font-size: $fontsize-medium;
-}
-
 .#{$n}-options__actions {
   display: flex;
   flex: 0 0 auto;
   justify-content: flex-end;
   width: 100%;
-  margin-top: $spacer * 0.5;
   padding: 0;
 }
 
 .#{$n}-options__actions .#{$n}-button {
   width: 100%;
-  margin-right: $spacer * 0.5;
-
-  &:last-child {
-    margin-right: 0;
-  }
 }

package/src/stylesheets/5-components/_pre-chat-messages.scss

@@ -1,6 +1,8 @@
 .#{$n}-pre-chat-messages {
   @include unList;
 
+  flex-direction: column;
+  gap: $spacer * 0.5;
   margin: 0;
   padding: 0;
 }
@@ -10,7 +12,7 @@
 }
 
 .#{$n}-unstarted-wrapper.#{$n}-transition--visible .#{$n}-pre-chat-messages {
-  display: block;
+  display: flex;
 }
 
 .#{$n}-unstarted-wrapper--inline .#{$n}-pre-chat-messages {

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

@@ -3,26 +3,23 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+  gap: $spacer * 0.5;
   max-height: initial;
   padding: $spacer * 0.5;
 }
 
 .#{$n}-prompt__title {
-  margin-top: 0;
-  margin-bottom: $spacer * 0.25;
+  margin: 0;
   font-size: $fontsize-default;
   font-weight: bold;
   text-align: center;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 .#{$n}-prompt__options {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  gap: $spacer * 0.25;
   width: 100%;
   margin: 0;
   padding: 0;
@@ -30,7 +27,6 @@
 }
 
 .#{$n}-prompt__options .#{$n}-button {
-  margin: $spacer * 0.25 $spacer * 0.25 0;
   text-align: center;
   white-space: normal;
 }

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

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

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

@@ -6,6 +6,7 @@
 
 .#{$n}-suggestions--aside {
   flex-direction: column;
+  gap: $spacer * 0.5;
   max-height: $chat-suggestions-maxheight;
   padding: $spacer;
   overflow: hidden;
@@ -44,7 +45,6 @@
 
 .#{$n}-suggestions__heading {
   flex: 0 0 auto;
-  margin: 0 0 $spacer * 0.5;
   color: $brand1;
   font-size: $fontsize-large;
   font-weight: $fontweight-bold;
@@ -56,6 +56,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
+  gap: $spacer * 0.25;
   width: 100%;
   height: auto;
   overscroll-behavior: contain;
@@ -73,7 +74,6 @@
   display: block;
   flex: 0 0 auto;
   max-width: 100%;
-  margin: 0 $spacer * 0.25 $spacer * 0.25 0;
 }
 
 .#{$n}-suggestions--aside .#{$n}-suggestions__item {

package/src/stylesheets/5-components/_translation-options.scss

@@ -1,4 +1,7 @@
 .#{$n}-translation-options {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.25;
   width: 100%;
   margin: 0;
 
@@ -10,6 +13,7 @@
 .#{$n}-translation-options__item {
   display: flex;
   align-items: center;
+  gap: $spacer * 0.5;
   width: 100%;
   padding: calc($spacer * 0.25) 0;
   color: $brand3;
@@ -22,14 +26,13 @@
   }
 
   > span {
-    margin-left: 0.5em;
+    margin-left: -0.5em;
   }
 
   .#{$n}-icon {
     display: flex;
     width: $iconsize-small;
     height: $iconsize-small;
-    margin-right: calc($spacer / 2);
     opacity: 0;
   }
 

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

@@ -0,0 +1,33 @@
+.#{$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;
+    }
+  }
+}

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

@@ -7,9 +7,7 @@
 }
 
 .#{$n}-upload-toggle-wrapper.#{$n}-transition--in {
-  width: calc(
-    #{$buttonsize} + (#{$spacer} * 0.5)
-  ); // INSTEAD OF MARGIN CAUSING DOUBLE ANIMATIONS
+  width: $buttonsize;
 }
 
 .#{$n}-upload-toggle {
@@ -50,16 +48,20 @@
 // UPLOAD DIALOG
 .#{$n}-upload {
   width: 100%;
-  padding: $spacer * 0.5 $spacer * 0.5 0;
+  padding: $spacer * 0.5;
 }
 
 .#{$n}-upload-form {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.5;
 }
 
 .#{$n}-upload__container {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.5;
   width: 100%;
-  margin-bottom: $spacer * 0.5;
 }
 
 .#{$n}-upload__visible-label--text {
@@ -72,8 +74,6 @@
 .#{$n}-upload__content-hint {
   display: block;
   width: 100%;
-  margin-bottom: $spacer * 0.5;
-  padding-right: $spacer;
   font-size: $fontsize-small;
 }
 
@@ -84,9 +84,9 @@
   border-radius: $borderradius-small;
 }
 
-.#{$n}-file-upload.#{$n}-focus-within {
+.#{$n}-file-upload.#{$n}-focus-within:has(.#{$n}-upload__input:focus-visible) {
   outline: 1px dotted #212121;
-  outline: 5px auto -webkit-focus-ring-color;
+  outline: 1px auto -webkit-focus-ring-color;
 }
 
 // VISUALLY HIDDEN
@@ -102,6 +102,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  gap: $spacer * 0.5;
   width: 100%;
   padding: $spacer * 0.5;
   color: $interaction;
@@ -112,7 +113,6 @@
   flex: 0 0 $iconsize-large;
   width: $iconsize-large;
   height: $iconsize-large;
-  margin-right: $spacer * 0.5;
 }
 
 .#{$n}-upload__label .#{$n}-icon path {
@@ -145,28 +145,28 @@
   display: flex;
   flex: 0 0 100%;
   justify-content: flex-end;
+  gap: $spacer * 0.25;
 }
 
 .#{$n}-upload__cancel {
-  margin-right: $spacer * 0.25;
   padding: $spacer * 0.5;
-
-  &:last-child {
-    margin-right: 0;
-  }
 }
 
 // PROGRESS
+.#{$n}-progress_container {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.5;
+}
+
 .#{$n}-progress__text {
   display: flex;
   align-items: flex-end;
+  gap: $spacer * 0.5;
   justify-content: space-between;
-  margin-bottom: $spacer * 0.25;
 }
 
 .#{$n}-progress__text--file-name {
-  max-width: calc(100% - (#{$spacer} * 2));
-  padding-right: $spacer;
   overflow: hidden;
   font-size: $fontsize-medium;
   font-weight: $fontweight-bold;
@@ -176,19 +176,12 @@
 }
 
 .#{$n}-progress__text--percentage {
+  flex: 0 0 auto;
   color: $grey-d;
   font-size: $fontsize-medium;
   line-height: 1;
 }
 
-.#{$n}-progress .#{$n}-error {
-  margin-top: $spacer * 0.5;
-
-  &:empty {
-    display: none;
-  }
-}
-
 .#{$n}-progress__bar {
   appearance: none;
   width: 100%;

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

@@ -13,7 +13,7 @@
         transition: fill $transition;
       }
 
-      &:hover svg path {
+      &:hover .#{$n}-icon svg path {
         fill: $white;
       }
     }
@@ -49,7 +49,7 @@
       }
     }
 
-    .#{$n}-message__body a {
+    .#{$n}-message__body :is(a, [role='button']) {
       transition: background-color $transition, color $transition;
 
       &:hover {
@@ -57,7 +57,9 @@
       }
     }
 
-    .#{$n}-conversation__item--source-agent .#{$n}-message__body a:hover {
+    .#{$n}-conversation__item--source-agent
+      .#{$n}-message__body
+      .#{$n}-download-link:hover {
       color: $interaction-dark;
     }
 
@@ -69,11 +71,18 @@
       color: $white;
     }
 
-    .#{$n}-message--type-upload .#{$n}-icon path {
+    .#{$n}-download-link:hover .#{$n}-icon svg path {
+      fill: $white;
+    }
+
+    .#{$n}-message--type-upload .#{$n}-icon svg path {
       transition: fill $transition;
     }
 
-    .#{$n}-download-link:hover .#{$n}-icon path {
+    .#{$n}-conversation__item--source-agent
+      .#{$n}-download.#{$n}-download-link:hover
+      .#{$n}-icon
+      path {
       fill: $white;
     }
 
@@ -83,10 +92,6 @@
       &:hover {
         border-color: $interaction-dark;
       }
-
-      &:focus {
-        border-color: transparent;
-      }
     }
 
     .#{$n}-input__submit:not([aria-disabled='true']):hover .#{$n}-icon path {
@@ -121,14 +126,6 @@
       background-color: $interaction-dark;
     }
 
-    .#{$n}-file-upload {
-      transition: border $transition;
-
-      &:hover {
-        border-color: $interaction-dark;
-      }
-    }
-
     .#{$n}-upload__label {
       transition: color $transition;
 

package/src/stylesheets/7-deprecated/1-settings/_config.scss

@@ -73,6 +73,7 @@ $thin-border: 1px !default;
 // BORDER-RADIUS
 $borderradius: $spacer * 0.5 !default;
 $borderradius-small: $borderradius * 0.5 !default;
+$borderradius-large: $borderradius * 2 !default;
 
 // DIMENSIONS
 $app-initial-width: 195px !default;
@@ -86,6 +87,22 @@ $viewport-width: 100vw !default;
 $viewport-height: 100vh !default;
 $badge-touch-size: 32px !default;
 
+// ICON SIZES
+$iconsize-small: 16px !default;
+$iconsize: 24px !default;
+$iconsize-large: 32px !default;
+
+// BUTTON SIZED
+$buttonsize-small: 32px !default;
+$buttonsize: 40px !default;
+
+// AVATAR SIZES
+$avatarsize: 32px !default;
+$avatarsize-large: 48px !default;
+
+// DIVIDER
+$dividersize: 32px !default;
+
 // Z-INDEX
 $z-index: 1 !default;
 

package/src/stylesheets/7-deprecated/3-app/_app.scss

@@ -13,6 +13,7 @@ $app-header-bgcolor: $brand3;
   bottom: $flex-spacer;
   flex-direction: column;
   width: $app-started-width;
+  max-width: calc(100% - #{$flex-spacer * 2});
   height: $app-full-height;
   overflow: hidden;
   transition: height $transition-slow, width $transition-slow;
@@ -172,6 +173,7 @@ $app-header-bgcolor: $brand3;
   position: relative;
   flex-grow: 1;
   justify-content: center;
+  border-bottom: $thin-border solid $grey-b;
 
   &__scroll-area {
     display: flex;
@@ -196,7 +198,6 @@ $app-header-bgcolor: $brand3;
   position: relative;
   flex-grow: 4;
   padding: 0;
-  border-bottom: $thin-border solid $grey-b;
 }
 
 .#{$n}-app--collapsed.#{$n}-app--deprecated .#{$n}-chat__body {

package/src/stylesheets/7-deprecated/5-components/_card.scss

@@ -50,4 +50,5 @@
   display: block;
   align-self: flex-end;
   width: 100%;
+  text-decoration: none;
 }