@streamscloud/kit 0.2.22 → 0.2.24

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

@@ -59,6 +59,7 @@ const size = $derived(dialog.controller.containerSettings.size);
 const position = $derived(dialog.controller.containerSettings.position);
 const isCustomWidth = $derived(!DIALOG_SIZES.includes(size));
 const customWidth = $derived(isCustomWidth ? size : null);
+const isStretchContent = $derived(position === 'full-screen' || position === 'full-height');
 </script>
 
 <dialog
@@ -79,7 +80,7 @@ const customWidth = $derived(isCustomWidth ? size : null);
   oncancel={handleCancel}
   onclick={handleBackdropClick}
   style:--dialog-container--custom-width={customWidth}>
-  <div class="dialog-container__content">
+  <div class="dialog-container__content" class:dialog-container__content--stretch={isStretchContent}>
     <DialogView controller={dialog.controller} data={dialog.data as TData} />
   </div>
 </dialog>
@@ -176,9 +177,9 @@ const customWidth = $derived(isCustomWidth ? size : null);
   border-radius: var(--_dialog-container--border-radius);
   pointer-events: auto;
 }
-
-.dialog-container--position-full-screen .dialog-container__content,
-.dialog-container--position-full-height .dialog-container__content {
+.dialog-container__content--stretch {
+  display: flex;
+  flex-direction: column;
   flex: 1;
   min-height: 0;
 }</style>

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

@@ -75,6 +75,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
   --_dialog--header--padding-block: var(--sc-kit--dialog--header--padding-block, var(--_dialog--padding-block));
   --_dialog--header--padding-inline: var(--sc-kit--dialog--header--padding-inline, var(--_dialog--padding-inline));
   display: flex;
+  flex: 1;
   flex-direction: column;
   height: var(--_dialog--height);
   min-height: var(--_dialog--min-height);

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.22",
+  "version": "0.2.24",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",