@seamly/web-ui 21.0.5-beta.2 → 21.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "21.0.5-beta.2",
+  "version": "21.0.5",
   "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/_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 {