@streamscloud/kit 0.40.2 → 0.40.3

package/dist/ui/textarea/cmp.textarea.svelte

@@ -13,14 +13,14 @@ const resize = () => {
     if (!textareaEl || !autoresize) {
         return;
     }
-    textareaEl.style.overflow = 'hidden';
+    textareaEl.style.overflowY = 'hidden';
     textareaEl.style.height = 'auto';
     const styles = getComputedStyle(textareaEl);
     const lineHeight = parseFloat(styles.lineHeight) || parseFloat(styles.fontSize) * 1.4;
     const paddingY = parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
     const max = lineHeight * maxRows + paddingY;
     textareaEl.style.height = Math.min(textareaEl.scrollHeight, max) + 'px';
-    textareaEl.style.overflow = '';
+    textareaEl.style.overflowY = '';
 };
 const initTextarea = (node) => {
     textareaEl = node;
@@ -139,7 +139,9 @@ const focusTextarea = () => textareaEl?.focus();
     onfocus={() => on?.focus?.()}></textarea>
 
   {#if emoji}
-    <InputEmojiPicker size={size} on={{ select: handleEmojiSelect }} />
+    <span class="textarea__emoji">
+      <InputEmojiPicker size={size} on={{ select: handleEmojiSelect }} />
+    </span>
   {/if}
 </div>
 
@@ -202,7 +204,8 @@ what the field shows. Blank lines inside the text are left alone. Typing is unto
   align-items: flex-end;
   width: var(--_ta--width);
   max-width: 100%;
-  padding: var(--_ta--padding-block) var(--_ta--padding-inline);
+  padding-block: var(--_ta--padding-block);
+  padding-inline-start: var(--_ta--padding-inline);
   background: var(--_ta--background);
   border: 1px solid var(--_ta--border-color);
   border-radius: var(--_ta--border-radius);
@@ -262,7 +265,9 @@ what the field shows. Blank lines inside the text are left alone. Typing is unto
   flex: 1;
   width: 100%;
   min-width: 0;
-  padding: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: var(--_ta--padding-inline);
   margin: 0;
   border: none;
   outline: none;
@@ -272,10 +277,39 @@ what the field shows. Blank lines inside the text are left alone. Typing is unto
   font-size: inherit;
   line-height: inherit;
   resize: none;
+  overflow-y: auto;
+  --_cross-browser-scrollbar--thumb-color: transparent;
+  --_cross-browser-scrollbar--track-color: transparent;
+}
+.textarea__el:hover {
+  --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border--strong);
+  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
+}
+.textarea__el::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.textarea__el::-webkit-scrollbar-track {
+  background: var(--_cross-browser-scrollbar--track-color);
+  border-radius: 100vw;
+}
+.textarea__el::-webkit-scrollbar-thumb {
+  background: var(--_cross-browser-scrollbar--thumb-color);
+  border-radius: 100vw;
+}
+@supports (scrollbar-color: transparent transparent) {
+  .textarea__el {
+    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
+    scrollbar-width: thin;
+  }
 }
 .textarea__el::placeholder {
   color: var(--_ta--placeholder-color);
 }
 .textarea__el:disabled {
   cursor: default;
+}
+.textarea__emoji {
+  flex-shrink: 0;
+  margin-inline-end: var(--_ta--padding-inline);
 }</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.40.2",
+  "version": "0.40.3",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",