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

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

@@ -1,10 +1,7 @@
 .#{$n}-chat-status {
   display: flex;
-  z-index: 1;
-  top: $spacer;
-  right: 0;
-  left: 0;
-  align-items: center;
+  align-items: flex-start;
+  gap: $spacer * 0.5;
   width: 100%;
   min-height: $buttonsize;
   margin: $spacer;
@@ -14,44 +11,31 @@
   box-shadow: $boxshadow;
 
   &--condensed {
-    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;
-    }
+    align-items: center;
+    padding: $spacer * 0.25 $spacer * 0.5 $spacer * 0.25 $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-direction: column;
-  flex-grow: 1;
-  align-items: flex-start;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: $spacer * 0.5;
+  align-items: center;
   justify-content: flex-start;
 }
 
 .#{$n}-chat-status__title {
   display: flex;
-  margin: 0 $spacer * 0.5 0 0;
+  margin: 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 {
@@ -67,28 +51,33 @@
   min-height: $buttonsize-small;
   padding: $spacer * 0.25 $spacer * 0.5;
   color: $white;
+}
 
-  .#{$n}-icon {
-    margin-right: $spacer * 0.25;
-
-    svg {
-      width: 100%;
-      height: 100%;
+.#{$n}-chat-status__button .#{$n}-icon {
+  svg {
+    width: 100%;
+    height: 100%;
 
-      path {
-        fill: $white;
-      }
+    path {
+      fill: $white;
     }
   }
 }
 
 .#{$n}-chat-status__close {
   display: inline-flex;
-  align-self: flex-start;
+  flex: 0 0 auto;
   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/_choice-prompt.scss

@@ -1,18 +1,13 @@
 .#{$n}-choice-prompt {
   display: flex;
   flex-direction: column;
+  gap: $spacer * 0.25;
   padding: 0;
 }
 
 .#{$n}-choice-prompt__item {
   display: block;
   width: 100%;
-  margin-top: $spacer * 0.25;
-  margin-left: 0;
-
-  &:first-child {
-    margin-top: 0;
-  }
 }
 
 .#{$n}-choice-prompt__item .#{$n}-button {
@@ -29,11 +24,14 @@
 .#{$n}-button--choose-again {
   display: flex;
   align-items: center;
-  margin: $spacer * 0.25 0 $spacer * 0.5;
+  gap: $spacer * 0.5;
+  margin: $spacer * 0.25 0;
   padding: 0;
+  transition: margin $transition, color $transition;
+  line-height: 1;
 
-  &:last-child {
-    margin-bottom: 0;
+  &[aria-expanded='true'] {
+    margin: $spacer 0 $spacer * 0.5;
   }
 }
 
@@ -44,7 +42,8 @@
   justify-content: center;
   width: $iconsize-small * 0.5;
   height: $iconsize-small * 0.5;
-  margin: 0 $spacer * 0.5;
+  margin: 0;
+  padding: 0;
   transform-origin: 50% 50%;
   transition: transform $transition;
 }

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

@@ -1,13 +1,11 @@
 .#{$n}-conversation__container {
   display: flex;
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   flex: 1 1 100%;
   flex-direction: column;
   justify-content: space-between;
+  gap: $spacer * 0.5;
   height: 100%;
   max-height: 100%;
 }
@@ -15,6 +13,10 @@
 .#{$n}-conversation {
   @include unList;
 
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: $spacer * 0.5;
   width: 100%;
   margin: auto 0 0;
   padding: $spacer $spacer 0;
@@ -23,80 +25,25 @@
   &::after {
     content: '';
     display: block;
-    flex: 0 0 100%;
+    flex: 0 0 $spacer;
     width: 100%;
     height: $spacer;
   }
 }
 
-.#{$n}-chat-status ~ .#{$n}-chat__container .#{$n}-conversation {
-  padding-top: $buttonsize + $spacer * 2;
-}
-
-.#{$n}-chat-status
-  ~ .#{$n}-chat__container__scroll-area
-  .#{$n}-disclaimer
-  + .#{$n}-conversation {
-  padding-top: 0;
-}
-
 .#{$n}-chat--layout-inline .#{$n}-conversation {
   position: relative;
 }
 
 .#{$n}-conversation__item {
+  display: block;
   width: 100%;
-  min-height: 0;
-  margin-top: $spacer * 0.5;
 }
 
 .#{$n}-conversation__item--new-participant {
-  margin-top: $spacer;
+  margin-top: $spacer * 0.5;
 
   &:first-child {
     margin-top: 0;
   }
 }
-
-.#{$n}-conversation__item--source-info {
-  margin-top: $spacer;
-  margin-bottom: $spacer;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.#{$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/_disclaimer.scss

@@ -1,6 +1,8 @@
 .#{$n}-disclaimer {
-  display: block;
+  display: flex;
   flex: 0 0 auto;
+  flex-direction: column;
+  gap: $spacer * 0.25;
   width: 100%;
   height: auto;
   padding: $spacer;
@@ -11,9 +13,15 @@
   padding-right: $buttonsize + $spacer * 2;
 }
 
-.#{$n}-disclaimer__title {
-  margin: 0 0 $spacer * 0.25;
+.#{$n}-chat--layout-window
+  .#{$n}-chat__container__header:has(.#{$n}-chat-status)
+  ~ .#{$n}-chat__body
+  .#{$n}-disclaimer {
   padding-right: $spacer;
+}
+
+.#{$n}-disclaimer__title {
+  margin: 0;
   font-size: $fontsize-small;
   font-weight: $fontweight-bold;
   line-height: 1;

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

@@ -6,7 +6,7 @@
 .#{$n}-error {
   display: block;
   width: 100%;
-  margin: 0 0 $spacer * 0.25;
+  margin: 0;
 
   &:empty {
     display: none;
@@ -17,12 +17,13 @@
     flex: 0 0 16px;
     width: 16px;
     height: 16px;
-    margin-right: $spacer * 0.25;
   }
 
   .#{$n}-error__message {
     display: flex;
+    flex-direction: row;
     align-items: flex-start;
+    gap: $spacer * 0.25;
     width: 100%;
     padding: $spacer * 0.25 $spacer * 0.5;
     border-radius: $borderradius-small;

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

@@ -3,27 +3,22 @@
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+  gap: $spacer * 0.5;
   max-height: initial;
   padding: $spacer * 0.5;
 }
 
 .#{$n}-idle__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}-idle__count-container {
   display: block;
   width: 100%;
   height: 2.75em;
-  margin-bottom: $spacer * 0.5;
   font-size: $fontsize-small;
 }
 
@@ -40,6 +35,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+  gap: $spacer * 0.25;
   width: 100%;
   margin: 0;
   padding: 0;
@@ -47,7 +43,6 @@
 }
 
 .#{$n}-idle__options .#{$n}-button {
-  margin: $spacer * 0.25 $spacer * 0.25 0;
   text-align: center;
   white-space: normal;
 }

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

@@ -5,31 +5,52 @@
   height: 100%;
 }
 
+.#{$n}-entry-form {
+  display: flex;
+  align-items: flex-end;
+  gap: $spacer * 0.25;
+}
+
 .#{$n}-input--text__container {
   display: flex;
   position: relative;
   flex: 1 1 100%;
   height: 100%;
-  margin-right: $spacer * 0.25;
+}
+
+.#{$n}-entry-form .#{$n}-form-control__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 0.25;
+  width: 100%;
+}
+
+.#{$n}-input__label {
+  font-size: $fontsize-medium;
+  font-weight: $fontweight-bold;
 }
 
 .#{$n}-input__text {
   appearance: none;
   flex-grow: 4;
   height: $buttonsize;
-  margin-right: $spacer * 0.25;
   padding: $spacer * 0.5;
+  overflow: hidden;
   transition: padding $transition;
-  border: $thin-border solid transparent;
+  border: $thin-border solid $grey-b;
   border-radius: $borderradius-small;
   color: $grey-e;
   font-size: $fontsize-default;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   resize: none;
 
   @include stylePlaceholder {
-    overflow: visible;
+    overflow: hidden;
     color: $grey-c;
     line-height: $spacer;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
@@ -57,16 +78,16 @@
   padding: 0;
   border-radius: $borderradius-small;
 
-  &[aria-disabled='true'] {
-    cursor: auto;
+  .#{$n}-icon path {
+    transition: fill $transition;
+    fill: $interaction;
   }
-}
 
-.#{$n}-input__submit .#{$n}-icon path {
-  transition: fill $transition;
-  fill: $interaction;
-}
+  &[aria-disabled='true'] {
+    cursor: auto;
 
-.#{$n}-input__submit[aria-disabled='true'] .#{$n}-icon path {
-  fill: $grey-c;
+    .#{$n}-icon path {
+      fill: $grey-c;
+    }
+  }
 }

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

@@ -1,10 +1,7 @@
 .#{$n}-interrupt {
   display: flex;
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   background: $white;
 }
 
@@ -24,6 +21,7 @@
   flex-direction: column;
   align-items: left;
   justify-content: center;
+  gap: $spacer * 0.5;
   padding: $spacer * 2;
   text-align: left;
 }
@@ -33,18 +31,13 @@
 }
 
 .#{$n}-interrupt__title {
-  margin: 0 0 $spacer;
+  margin: 0;
   font-size: $fontsize-default;
   font-weight: bold;
 }
 
 .#{$n}-interrupt__message {
-  margin-bottom: $spacer * 2;
   font-size: $fontsize-default;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 .#{$n}-interrupt__actions {

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

@@ -6,6 +6,7 @@ $loader-quarter-duration: $loader-animation-duration * 0.2;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
+  gap: $spacer * 0.25;
   height: $spacer;
   padding: $spacer * 0.125 $spacer * 0.25;
   animation: #{$app-name}-fadeIn $loader-animation-duration * 0.5 linear;
@@ -15,7 +16,6 @@ $loader-quarter-duration: $loader-animation-duration * 0.2;
   display: inline-block;
   width: $spacer * 0.3333;
   height: 100%;
-  margin-right: $spacer * 0.25;
   transform: scaleY(0.45);
   animation-name: #{$app-name}-loader;
   animation-duration: $loader-animation-duration;
@@ -40,7 +40,6 @@ $loader-quarter-duration: $loader-animation-duration * 0.2;
   }
 
   &.#{$n}-four {
-    margin-right: 0;
     animation-delay: $loader-quarter-duration * 4;
   }
 }

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

@@ -3,9 +3,9 @@
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
+  gap: $spacer * 0.25;
   width: 100%;
-  margin-bottom: 0.3rem;
-  padding: 0 $spacer * 0.5;
+  padding: 0;
   font-weight: $fontweight-bold;
 }
 
@@ -16,7 +16,6 @@
 .#{$n}-message__avatar {
   width: $avatarsize * 0.5;
   height: $avatarsize * 0.5;
-  margin: 0 0.5em 0 0;
 
   .#{$n}-avatar {
     display: block;
@@ -32,7 +31,6 @@
 
 .#{$n}-message--source-user .#{$n}-message__avatar {
   order: 2;
-  margin: 0 0 0 $spacer * 0.5;
 }
 
 .#{$n}-message--source-user .#{$n}-message__author-name {

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

@@ -2,7 +2,6 @@
   display: block;
   position: relative;
   max-width: 100%;
-  margin-bottom: $spacer * 0.25;
   padding: $spacer * 0.5 $spacer * 0.75;
   border-radius: $borderradius;
   background-color: $threadlist-agent-text-bgcolor;
@@ -157,6 +156,7 @@
   .#{$n}-download {
     display: flex;
     align-items: center;
+    gap: $spacer * 0.5;
     padding: $spacer * 0.5 $spacer * 0.75;
     border-radius: $borderradius;
     color: inherit;
@@ -166,17 +166,36 @@
 
   .#{$n}-download-link {
     text-decoration: underline;
+    cursor: pointer;
   }
 
-  .#{$n}-download:not(.#{$n}-download-link) .#{$n}-file-download {
-    text-decoration: line-through;
+  .#{$n}-download--preview {
+    flex-flow: column wrap;
+    align-items: flex-end;
+    gap: 0;
+    padding: 0;
+
+    > img {
+      width: 100%;
+      height: auto;
+      border-top-left-radius: $borderradius;
+      border-top-right-radius: $borderradius;
+      object-fit: cover;
+    }
+
+    .#{$n}-file-download {
+      display: flex;
+      flex: 0 0 auto;
+      justify-content: flex-end;
+      width: 100%;
+      padding: $spacer * 0.5 $spacer * 0.75;
+    }
   }
 
   .#{$n}-icon {
     flex: 0 0 $iconsize-small;
     width: $iconsize-small;
     height: $iconsize-small;
-    margin-right: $spacer * 0.5;
   }
 
   .#{$n}-icon svg {
@@ -185,11 +204,14 @@
   }
 }
 
-.#{$n}-conversation__item--source-agent
-  .#{$n}-message--type-upload
-  .#{$n}-icon
-  path {
-  fill: $interaction;
+.#{$n}-conversation__item--source-agent .#{$n}-message--type-upload {
+  .#{$n}-download--preview .#{$n}-file-download {
+    justify-content: flex-start;
+  }
+
+  .#{$n}-icon path {
+    fill: $interaction;
+  }
 }
 
 .#{$n}-message .#{$n}-message__info {
@@ -203,8 +225,9 @@
 .#{$n}-message--type-cta .#{$n}-message__body {
   display: flex;
   flex-direction: column;
+  gap: $spacer * 0.5;
   width: 100%;
-  padding: $spacer * 0.5 $spacer * 0.75 $spacer * 0.75;
+  padding: $spacer * 0.75;
   background-color: $brand2;
 }
 

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

@@ -19,6 +19,7 @@
   display: flex;
   flex: 1 1 auto;
   flex-wrap: wrap;
+  gap: $spacer * 0.5;
   padding: $spacer * 0.5 $spacer * 0.75 $spacer * 0.75;
 }
 
@@ -26,24 +27,15 @@
   display: block;
   flex: 0 0 100%;
   width: 100%;
-  margin: 0 0 $spacer * 0.25;
+  margin: 0;
   padding: 0;
   font-size: $fontsize-default;
   font-weight: $fontweight-bold;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 .#{$n}-card__description {
   display: block;
   width: 100%;
-  margin-bottom: $spacer;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 .#{$n}-card__content .#{$n}-button {

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

@@ -43,6 +43,7 @@
   position: relative;
   align-items: center;
   justify-content: space-between;
+  gap: $spacer * 0.5;
   width: 100%;
   height: fit-content;
   padding: 0;
@@ -76,10 +77,10 @@
   height: $iconsize-small;
   padding: 0;
   border: 0;
-}
 
-.#{$n}-carousel__controls .#{$n}-button .#{$n}-icon svg path {
-  fill: $interaction;
+  svg path {
+    fill: $interaction;
+  }
 }
 /* stylelint-enable */
 
@@ -88,7 +89,6 @@
   position: relative;
   align-items: center;
   justify-content: center;
-  padding: 0 $spacer * 0.5;
 }
 
 .#{$n}-carousel-pagination__wrapper {

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

@@ -1,5 +1,4 @@
 .#{$n}-cta__content {
-  margin-bottom: $spacer * 0.5;
   color: $white;
   font-size: $fontsize-medium;
   line-height: 1.5;
@@ -13,11 +12,6 @@
 }
 
 .#{$n}-message--type-cta .#{$n}-button {
-  margin-bottom: $spacer * 0.5;
   line-height: 2;
   text-decoration: none;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
 }