@streamscloud/kit 0.40.2 → 0.41.0

package/dist/core/theme/app-theme.svelte.d.ts

@@ -3,6 +3,7 @@ declare class AppThemeContainer {
     private _active;
     private _mediaQuery;
     private _isDarkMode;
+    private _transitionSuppressionId;
     get active(): AppThemeValue;
     /** Whether dark mode is currently active (resolves 'auto' based on system preference) */
     get isDarkMode(): boolean;

package/dist/core/theme/app-theme.svelte.js

@@ -1,10 +1,12 @@
 import { isBrowser } from '../utils';
 import { ThemeCookie } from './theme-cookie';
 import { getColorScheme } from './types';
+const NO_TRANSITION_CLASS = 'sc-kit-no-theme-transition';
 class AppThemeContainer {
     _active = $state('auto');
     _mediaQuery = null;
     _isDarkMode = $state(false);
+    _transitionSuppressionId = 0;
     get active() {
         return this._active;
     }
@@ -42,7 +44,15 @@ class AppThemeContainer {
         else {
             this._isDarkMode = this._active === 'dark';
         }
-        document.documentElement.style.colorScheme = getColorScheme(this._active);
+        const html = document.documentElement;
+        html.classList.add(NO_TRANSITION_CLASS);
+        html.style.colorScheme = getColorScheme(this._active);
+        const suppressionId = ++this._transitionSuppressionId;
+        requestAnimationFrame(() => requestAnimationFrame(() => {
+            if (suppressionId === this._transitionSuppressionId) {
+                html.classList.remove(NO_TRANSITION_CLASS);
+            }
+        }));
     };
 }
 export const AppTheme = new AppThemeContainer();

package/dist/styles/_index.scss

@@ -3,3 +3,4 @@
 @use 'normalize';
 @use 'reset';
 @use 'semantic';
+@use 'theme';

package/dist/styles/_semantic.scss

@@ -194,7 +194,8 @@
   --sc-kit--shadow--md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
   --sc-kit--shadow--lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
   --sc-kit--shadow--xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
-  --sc-kit--shadow--card: 0 1px 1px rgba(0, 0, 0, 0.1);
+  --sc-kit--shadow--card: 0 2px 16px rgba(0, 0, 0, 0.035);
+  --sc-kit--shadow--hairline: 0 1px 1px rgba(0, 0, 0, 0.1);
   --sc-kit--shadow--focus: var(--sc-kit--focus-ring);
 
   // ============================================================

package/dist/styles/_theme.scss

@@ -0,0 +1,8 @@
+// !important: must override component-scoped transition declarations, including
+// transitions.transition() mixin output.
+.sc-kit-no-theme-transition,
+.sc-kit-no-theme-transition *,
+.sc-kit-no-theme-transition *::before,
+.sc-kit-no-theme-transition *::after {
+  transition: none !important;
+}

package/dist/ui/cropper/img-cropper/cmp.img-cropper-controls.svelte

@@ -61,7 +61,7 @@ Can be placed anywhere in the layout.
   color: var(--sc-kit--color--text--primary);
   background: var(--sc-kit--color--bg--panel);
   border: 1px solid var(--sc-kit--color--border);
-  box-shadow: var(--sc-kit--shadow--card);
+  box-shadow: var(--sc-kit--shadow--hairline);
 }
 .img-cropper-controls__button--cancel:hover {
   background: var(--sc-kit--color--bg--hover);

package/dist/ui/rich-text-input/cmp.rich-text-input.svelte

@@ -12,6 +12,7 @@ let toolbarRef = $state.raw(undefined);
 let editorRef = $state.raw(null);
 let lastVal;
 let everFocused = false;
+const loc = new RichTextInputLocalization();
 /** Insert an emoji at the current selection (or at the end if the editor was never focused). */
 const insertEmoji = (emojiChar) => {
     if (!editorRef) {
@@ -48,13 +49,15 @@ const applyChange = (editor) => {
     on?.change?.(lastVal);
 };
 onMount(async () => {
-    const loc = new RichTextInputLocalization();
     const { default: hugerte } = await import('hugerte');
+    // Snapshotted once — the editor does not re-init on a later theme change.
+    const isDarkMode = AppTheme.isDarkMode;
+    const skinUrl = isDarkMode ? 'hugerte-5-dark' : 'hugerte-5';
     await Promise.all([
         import('hugerte/models/dom'),
         import('hugerte/themes/silver'),
-        AppTheme.isDarkMode ? import('hugerte/skins/ui/hugerte-5-dark/skin.js') : import('hugerte/skins/ui/hugerte-5/skin.js'),
-        import('hugerte/skins/ui/hugerte-5/content.inline.js'),
+        isDarkMode ? import('hugerte/skins/ui/hugerte-5-dark/skin.js') : import('hugerte/skins/ui/hugerte-5/skin.js'),
+        isDarkMode ? import('hugerte/skins/ui/hugerte-5-dark/content.inline.js') : import('hugerte/skins/ui/hugerte-5/content.inline.js'),
         import('hugerte/icons/default'),
         import('hugerte/plugins/advlist'),
         import('hugerte/plugins/link'),
@@ -65,7 +68,7 @@ onMount(async () => {
         target: elementRef,
         inline: true,
         // Must match the injected skin's resource key (`ui/<skin_url>/skin.css`) or HugeRTE fetches it over the network and 404s.
-        skin_url: 'hugerte-5',
+        skin_url: skinUrl,
         content_css: false,
         fixed_toolbar_container: options?.fixedToolbarId ? `#${options.fixedToolbarId}` : undefined,
         fixed_toolbar_container_target: options?.fixedToolbarId ? undefined : toolbarRef,

package/dist/ui/rich-text-input/hugerte.declarations.d.ts

@@ -4,6 +4,7 @@ declare module 'hugerte/icons/default';
 declare module 'hugerte/skins/ui/hugerte-5/skin.js';
 declare module 'hugerte/skins/ui/hugerte-5-dark/skin.js';
 declare module 'hugerte/skins/ui/hugerte-5/content.inline.js';
+declare module 'hugerte/skins/ui/hugerte-5-dark/content.inline.js';
 declare module 'hugerte/plugins/advlist';
 declare module 'hugerte/plugins/link';
 declare module 'hugerte/plugins/lists';

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.41.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",