@streamscloud/kit 0.2.20 → 0.2.22

package/dist/core/utils/color-helper.d.ts

@@ -2,8 +2,8 @@ export declare class ColorHelper {
     /**
      * Normalize a color value to a clean hex string.
      * - Strips 100% alpha (`#FF0000FF` → `#FF0000`)
-     * - Returns `''` for transparent / empty / invalid values
-     * - Preserves partial alpha (`#FF000080` stays as-is)
+     * - Returns `''` for empty / invalid values
+     * - Preserves partial and zero alpha (`#FF000080`, `#FF000000` stay as-is)
      */
     static normalizeHex(value: string | null | undefined): string;
     /**

package/dist/core/utils/color-helper.js

@@ -5,8 +5,8 @@ export class ColorHelper {
     /**
      * Normalize a color value to a clean hex string.
      * - Strips 100% alpha (`#FF0000FF` → `#FF0000`)
-     * - Returns `''` for transparent / empty / invalid values
-     * - Preserves partial alpha (`#FF000080` stays as-is)
+     * - Returns `''` for empty / invalid values
+     * - Preserves partial and zero alpha (`#FF000080`, `#FF000000` stay as-is)
      */
     static normalizeHex(value) {
         if (!value) {
@@ -17,9 +17,6 @@ export class ColorHelper {
             return '';
         }
         const alpha = parsed.alpha();
-        if (alpha === 0) {
-            return '';
-        }
         const hex = parsed.toHex().toUpperCase();
         if (alpha === 1) {
             return hex.substring(0, 7);

package/dist/ui/page-toolbar/cmp.toolbar-segmented-control.svelte.d.ts

@@ -3,6 +3,7 @@ declare function $$render<T extends string | number>(): {
         segments: {
             id: T;
             label: string;
+            invalid?: boolean;
         }[];
         selected: T;
         /** localStorage key for persisting selection */

package/dist/ui/segmented-control/cmp.segmented-control.svelte

@@ -7,6 +7,7 @@
       type="button"
       class="segmented-control__segment"
       class:segmented-control__segment--selected={selected === segment.id}
+      class:segmented-control__segment--invalid={segment.invalid}
       onclick={() => on?.change?.(segment.id)}>
       <span class="segmented-control__label">{segment.label}</span>
     </button>
@@ -32,6 +33,8 @@ A segmented control for switching between a set of options. Each segment is a bu
 | `--sc-kit--segmented-control--selected--background` | Selected segment background | `var(--sc-color--bg-menu-active, light-dark(primary-50, dark-400))` |
 | `--sc-kit--segmented-control--selected--box-shadow` | Selected segment box shadow | `0px 1px 3px rgba(0,0,0,0.1)` |
 | `--sc-kit--segmented-control--selected--color` | Selected segment text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+| `--sc-kit--segmented-control--invalid--color` | Inactive segment text color when invalid | `light-dark(destructive-500, destructive-400)` |
+| `--sc-kit--segmented-control--invalid--selected--color` | Selected segment text color when invalid | `light-dark(destructive-500, destructive-400)` |
 -->
 
 <style>.segmented-control {
@@ -65,6 +68,14 @@ A segmented control for switching between a set of options. Each segment is a bu
     --sc-kit--segmented-control--selected--color,
     var(--sc-color--text-primary, light-dark(#000000, #ffffff))
   );
+  --_segmented-control--invalid--color: var(
+    --sc-kit--segmented-control--invalid--color,
+    light-dark(#e71d36, #f17e8b)
+  );
+  --_segmented-control--invalid--selected--color: var(
+    --sc-kit--segmented-control--invalid--selected--color,
+    light-dark(#e71d36, #f17e8b)
+  );
   display: flex;
   width: 100%;
   font-size: var(--_segmented-control--root--font-size);
@@ -91,6 +102,9 @@ A segmented control for switching between a set of options. Each segment is a bu
 .segmented-control__segment:last-child {
   border-right: none;
 }
+.segmented-control__segment--invalid {
+  color: var(--_segmented-control--invalid--color);
+}
 .segmented-control__segment--selected {
   box-shadow: var(--_segmented-control--selected--box-shadow);
 }
@@ -98,6 +112,9 @@ A segmented control for switching between a set of options. Each segment is a bu
   background: var(--_segmented-control--selected--background);
   color: var(--_segmented-control--selected--color);
 }
+.segmented-control__segment--invalid.segmented-control__segment--selected, .segmented-control__segment--invalid:hover {
+  color: var(--_segmented-control--invalid--selected--color);
+}
 .segmented-control__label {
   font-size: var(--_segmented-control--label--font-size);
 }</style>

package/dist/ui/segmented-control/cmp.segmented-control.svelte.d.ts

@@ -3,6 +3,7 @@ declare function $$render<T extends string | number>(): {
         segments: {
             id: T;
             label: string;
+            invalid?: boolean;
         }[];
         selected: T;
         on?: {
@@ -46,6 +47,8 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--segmented-control--selected--background` | Selected segment background | `var(--sc-color--bg-menu-active, light-dark(primary-50, dark-400))` |
  * | `--sc-kit--segmented-control--selected--box-shadow` | Selected segment box shadow | `0px 1px 3px rgba(0,0,0,0.1)` |
  * | `--sc-kit--segmented-control--selected--color` | Selected segment text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ * | `--sc-kit--segmented-control--invalid--color` | Inactive segment text color when invalid | `light-dark(destructive-500, destructive-400)` |
+ * | `--sc-kit--segmented-control--invalid--selected--color` | Selected segment text color when invalid | `light-dark(destructive-500, destructive-400)` |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends string | number> = InstanceType<typeof Cmp<T>>;

package/package.json

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