@streamscloud/kit 0.2.23 → 0.2.25

package/dist/styles/_input.scss

@@ -17,6 +17,7 @@
   --_input--text--font-size: var(--_--input--text--font-size, #{functions.em(14)});
   --_input--text--color: var(--_--input--text--color, light-dark(#{colors.$color-gray-800}, #{colors.$color-white}));
   --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
+  --input--placeholder--color: var(--_--input--placeholder--color);
 
   --_input--accent-color: var(--_--input--accent-color, light-dark(#{colors.$color-primary-500}, #{colors.$color-primary-400}));
 

package/dist/ui/color-picker/cmp.color-picker.svelte

@@ -8,33 +8,30 @@ import IconColorF from '@fluentui/svg-icons/icons/color_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
 import { colord } from 'colord';
 import AwesomeColorPicker from 'svelte-awesome-color-picker';
-let { value, enableReset = false, on, children, defaultPreviewIcon } = $props();
+let { value, defaultColor, enableReset = false, on, children, defaultPreviewIcon } = $props();
 const loc = new ColorPickerLocalization();
+const displayColor = $derived(value || defaultColor || '');
 const textColor = $derived.by(() => {
-    if (!value) {
+    if (!displayColor) {
         return null;
     }
+    const hex = colord(displayColor).toHex();
+    const color = hex.substring(1, 7);
+    const red = parseInt(color.substring(0, 2), 16);
+    const green = parseInt(color.substring(2, 4), 16);
+    const blue = parseInt(color.substring(4, 6), 16);
+    if (red * 0.299 + green * 0.587 + blue * 0.114 > 149) {
+        return '#000000';
+    }
     else {
-        const hex = colord(value).toHex();
-        const color = hex.substring(1, 7);
-        const red = parseInt(color.substring(0, 2), 16);
-        const green = parseInt(color.substring(2, 4), 16);
-        const blue = parseInt(color.substring(4, 6), 16);
-        if (red * 0.299 + green * 0.587 + blue * 0.114 > 149) {
-            return '#000000';
-        }
-        else {
-            return '#ffffff';
-        }
+        return '#ffffff';
     }
 });
 const previewBackgroundColor = $derived.by(() => {
-    if (!value) {
+    if (!displayColor) {
         return '';
     }
-    else {
-        return colord(value).toHex().substring(0, 7);
-    }
+    return colord(displayColor).toHex().substring(0, 7);
 });
 const resetValue = (e) => {
     e.preventDefault();
@@ -62,18 +59,19 @@ const onColorPickerInput = ({ hex }) => {
             placeholder={loc.notSet}
             --sc-kit--input--background={previewBackgroundColor}
             --sc-kit--input--text--color={textColor}
-            --sc-kit--input--icon--color={textColor}>
+            --sc-kit--input--icon--color={textColor}
+            --sc-kit--input--placeholder--color={textColor}>
             {#snippet icon()}
               {#if defaultPreviewIcon}
                 {@render defaultPreviewIcon()}
               {:else}
-                <Icon src={IconColorF} color={value ? null : 'gray'} />
+                <Icon src={IconColorF} color={displayColor ? null : 'gray'} />
               {/if}
             {/snippet}
             {#snippet clearButton()}
               {#if !value}
                 <button type="button" inert={true}>
-                  <Icon src={IconChevronDown} color="gray" />
+                  <Icon src={IconChevronDown} color={displayColor ? null : 'gray'} />
                 </button>
               {:else}
                 <button type="button" inert={!enableReset} onclick={resetValue}>
@@ -91,7 +89,11 @@ const onColorPickerInput = ({ hex }) => {
     {/snippet}
 
     <div class="color-picker__panel">
-      <AwesomeColorPicker hex={value ? colord(value).toHex() : null} isDialog={false} onInput={onColorPickerInput} textInputModes={['hex']} />
+      <AwesomeColorPicker
+        hex={value ? colord(value).toHex() : defaultColor ? colord(defaultColor).toHex() : null}
+        isDialog={false}
+        onInput={onColorPickerInput}
+        textInputModes={['hex']} />
     </div>
   </Dropdown>
 </div>
@@ -121,6 +123,7 @@ A color picker that displays a swatch preview trigger and opens a dropdown panel
 }
 .color-picker__trigger {
   width: 100%;
+  transition: none;
   --sc-kit--input--text--font-size: var(--_color-picker--default-preview--font-size);
   --sc-kit--input--icon--size: var(--_color-picker--default-preview--icon-size);
   --sc-kit--input--height: var(--_color-picker--default-preview--height);

package/dist/ui/color-picker/cmp.color-picker.svelte.d.ts

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
 type Props = {
     value: string | null | undefined;
+    /** Default color shown in the picker when value is empty (does not set the value itself) */
+    defaultColor?: string;
     /** Show dismiss icon to clear the color value */
     enableReset?: boolean;
     on?: {

package/dist/ui/datetime-picker/cmp.datetime-picker.svelte

@@ -208,6 +208,7 @@ A date/time picker powered by flatpickr, supporting date, time, and datetime mod
   --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
   --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
   --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
+  --input--placeholder--color: var(--_--input--placeholder--color);
   --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
   --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
   --_input--padding--block: var(--_--input--padding--block, 0);

package/dist/ui/dialog/cmp.dialog-container.svelte

@@ -172,6 +172,7 @@ const isStretchContent = $derived(position === 'full-screen' || position === 'fu
   overflow: hidden;
 }
 .dialog-container__content {
+  container-type: inline-size;
   width: 100%;
   max-width: var(--_dialog-container--custom-width, var(--_dialog-container--max-width));
   border-radius: var(--_dialog-container--border-radius);

package/dist/ui/dialog/cmp.dialog.svelte

@@ -84,6 +84,12 @@ A structured dialog panel with header (title + close button), scrollable body, a
   color: var(--_dialog--color);
   border-radius: var(--_dialog--border-radius);
   box-shadow: 0 4px 24px var(--_dialog--shadow-color);
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 768px) {
+  .dialog {
+    --_dialog--padding-inline: var(--sc-kit--dialog--padding-inline, 1rem);
+  }
 }
 .dialog__header {
   display: flex;
@@ -93,6 +99,11 @@ A structured dialog panel with header (title + close button), scrollable body, a
   gap: 1rem;
   padding: var(--_dialog--header--padding-block) var(--_dialog--header--padding-inline);
   border-bottom: 1px solid var(--_dialog--border-color);
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.dialog__header :global([contenteditable]) {
+  user-select: text;
 }
 .dialog__title {
   flex: 1;
@@ -129,9 +140,15 @@ A structured dialog panel with header (title + close button), scrollable body, a
 .dialog__footer {
   display: flex;
   flex-shrink: 0;
+  margin-top: auto;
   align-items: center;
   justify-content: flex-end;
   gap: 0.75rem;
   padding: var(--_dialog--padding-block) var(--_dialog--padding-inline);
   border-top: 1px solid var(--_dialog--border-color);
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.dialog__footer :global([contenteditable]) {
+  user-select: text;
 }</style>

package/dist/ui/inputs/input/cmp.input.svelte

@@ -152,6 +152,7 @@ Text/password input with optional clear button, icon, and emoji picker.
   --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
   --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
   --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
+  --input--placeholder--color: var(--_--input--placeholder--color);
   --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
   --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
   --_input--padding--block: var(--_--input--padding--block, 0);

package/dist/ui/inputs/numeral-input/cmp.numeral-input.svelte

@@ -169,6 +169,7 @@ Uses cleave-zen for formatting and cursor tracking.
   --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
   --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
   --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
+  --input--placeholder--color: var(--_--input--placeholder--color);
   --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
   --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
   --_input--padding--block: var(--_--input--padding--block, 0);

package/dist/ui/inputs/rich-text-input/tinymce-input.svelte

@@ -168,6 +168,7 @@ const setEditorValue = (editor, val) => {
   --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
   --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
   --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
+  --input--placeholder--color: var(--_--input--placeholder--color);
   --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
   --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
   --_input--padding--block: var(--_--input--padding--block, 0);

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

@@ -155,6 +155,7 @@ Auto-resizing textarea with optional emoji picker, single-line mode, and submit-
   --_input--text--font-size: var(--_--input--text--font-size, 0.875em);
   --_input--text--color: var(--_--input--text--color, light-dark(#2e2e2e, #ffffff));
   --_input--placeholder--color: var(--_--input--placeholder--color, light-dark(#d1d5db, #4b5563));
+  --input--placeholder--color: var(--_--input--placeholder--color);
   --_input--accent-color: var(--_--input--accent-color, light-dark(#144ab0, #5a8dec));
   --_input--padding--inline: var(--_--input--padding--inline, 0.5em);
   --_input--padding--block: var(--_--input--padding--block, 0);

package/package.json

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