@intechstudio/grid-uikit 1.20260922.1001 → 1.20260922.1144

package/dist/ContextMenu.svelte

@@ -93,7 +93,7 @@
     flex-direction: column;
     align-items: flex-start;
     border: 1px solid var(--foreground-muted);
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-medium);
     position: absolute;
     z-index: 40;
     color: var(--foreground-muted);

package/dist/IconButton.svelte

@@ -112,7 +112,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius);
+    border-radius: var(--radius-medium);
     cursor: pointer;
     pointer-events: auto;
     padding: 0.5rem;

package/dist/MeltCombo.svelte

@@ -375,7 +375,7 @@
     background-color: var(--popover-background);
     color: var(--foreground-muted);
     border: 1px solid var(--foreground-muted);
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-medium);
     z-index: 40;
     max-height: 8em;
     display: flex;

package/dist/MeltSelect.svelte

@@ -133,7 +133,7 @@
     background-color: var(--popover-background);
     color: var(--foreground-muted);
     border: 1px solid var(--foreground-muted);
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-medium);
     z-index: 40;
     overflow: hidden;
   }

package/dist/MeltSlider.svelte

@@ -10,6 +10,13 @@
   export let max: number;
   export let step: number;
   export let disabled = false;
+  // Optional custom track background (e.g. a color gradient). When set, the
+  // track shows this background and the selected-range fill is hidden so the
+  // full background stays visible.
+  export let trackBackground: string | undefined = undefined;
+  // Optional custom thumb background (e.g. the color at the thumb's value on a
+  // color slider). When unset the thumb uses the default theme color.
+  export let thumbBackground: string | undefined = undefined;
 
   const {
     elements: { root, range, thumbs },
@@ -55,8 +62,19 @@
 </script>
 
 <span {...$root} use:root class="container" class:disabled>
-  <span class="range-full" class:disabled>
-    <span {...$range} use:range class="range-selected" class:disabled />
+  <span
+    class="range-full"
+    class:disabled
+    class:has-background={trackBackground}
+    style:background={trackBackground}
+  >
+    <span
+      {...$range}
+      use:range
+      class="range-selected"
+      class:disabled
+      class:hidden={trackBackground}
+    />
   </span>
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <span
@@ -64,6 +82,8 @@
     use:thumbs
     class="thumb"
     class:disabled
+    class:has-color={thumbBackground}
+    style:background={disabled ? undefined : thumbBackground}
     on:blur={handleThumbBlur}
   />
 </span>
@@ -91,11 +111,17 @@
     height: 8px;
     border-radius: var(--radius);
   }
+  span.range-full.has-background {
+    background-color: transparent;
+  }
   span.range-selected {
     height: 8px;
     background-color: var(--foreground-disabled);
     border-radius: var(--radius);
   }
+  span.range-selected.hidden {
+    background-color: transparent;
+  }
   span.thumb {
     display: block;
     height: var(--thumb-size);
@@ -103,6 +129,10 @@
     background-color: var(--foreground-muted);
     border-radius: var(--radius);
   }
+  span.thumb.has-color {
+    width: var(--thumb-size);
+    border-radius: var(--radius-full);
+  }
   span.thumb:focus {
     outline: var(--focus-outline);
     outline-offset: var(--focus-offset);

package/dist/MeltSlider.svelte.d.ts

@@ -17,6 +17,8 @@ declare const MeltSlider: $$__sveltets_2_IsomorphicComponent<{
     max: number;
     step: number;
     disabled?: boolean;
+    trackBackground?: string | undefined;
+    thumbBackground?: string | undefined;
 }, {
     change: CustomEvent<any>;
     blur: CustomEvent<any>;

package/dist/MoltenPushButtonGroup.svelte

@@ -206,7 +206,7 @@
     background-color: var(--popover-background);
     color: var(--foreground-muted);
     border: 1px solid var(--foreground-muted);
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-medium);
     overflow: hidden;
   }
 

package/dist/MoltenTooltip.svelte

@@ -355,7 +355,7 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    border-radius: var(--radius-large);
+    border-radius: var(--radius-medium);
     overflow: hidden;
     z-index: 99;
     padding: 0.5rem;

package/dist/SliderColorPicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
   import { Color } from "./color";
-  import ColorSlider from "./ColorSlider.svelte";
+  import MeltSlider from "./MeltSlider.svelte";
 
   function getRandom(a: number, b: number) {
     return 0;
@@ -42,37 +42,38 @@
     dispatch("change", { color: color });
   }
 
-  function getGradient(color: Color.HSL | undefined, channel: Channel) {
+  function getGradient(
+    color: Color.HSL | undefined,
+    channel: Channel,
+  ): string | undefined {
     if (typeof color === "undefined") {
-      return "background-color: white;";
+      return undefined;
     }
 
     const stops = {
-      h: [0, 60, 120, 180, 240, 360].map((h) =>
+      h: [0, 60, 120, 180, 240, 300, 360].map((h) =>
         new Color.HSL(h, color.s, color.l).toHEX(),
       ),
       s: [0, 100].map((s) => new Color.HSL(color.h, s, color.l).toHEX()),
       l: [0, 50, 100].map((l) => new Color.HSL(color.h, color.s, l).toHEX()),
     };
-    return `background: linear-gradient(to right, ${stops[channel].join(
-      ", ",
-    )});`;
+    return `linear-gradient(to right, ${stops[channel].join(", ")})`;
   }
 </script>
 
 <div class="slider-grid">
   {#each sliders as { label, key, max }}
     <span class="slider-label">{label}:</span>
-    <ColorSlider
-      value={color ? color[key] : undefined}
+    <MeltSlider
+      target={color ? color[key] : 0}
+      min={0}
       {max}
-      direction="horizontal"
-      round={true}
-      on:input={(e) => handleInput(key, e.detail.value)}
-      on:change={handleChange}
-    >
-      <div class="slider-gradient" style={getGradient(color, key)} />
-    </ColorSlider>
+      step={1}
+      trackBackground={getGradient(color, key)}
+      thumbBackground={color ? color.toHEX() : undefined}
+      on:change={(e) => handleInput(key, e.detail.value)}
+      on:commit={handleChange}
+    />
   {/each}
 </div>
 
@@ -86,12 +87,7 @@
   }
 
   .slider-label {
-    color: white;
+    color: var(--foreground);
     font-size: 0.875rem;
   }
-
-  .slider-gradient {
-    width: 100%;
-    height: 100%;
-  }
 </style>

package/dist/theme.css

@@ -49,6 +49,9 @@
   --radius-small: min(var(--radius), 0.25em);
   --radius-medium: min(var(--radius), 0.5em);
   --radius-large: min(var(--radius), 1em);
+  /* Always fully rounded (pill/circle), independent of --radius — for elements
+     that are round by design, e.g. the color-preview slider knob. */
+  --radius-full: 9999px;
   --border-thickness: 1px;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intechstudio/grid-uikit",
-  "version": "1.20260922.1001",
+  "version": "1.20260922.1144",
   "repository": {
     "type": "git",
     "url": "https://github.com/intechstudio/grid-uikit.git"

package/src/lib/theme.css

@@ -49,6 +49,9 @@
   --radius-small: min(var(--radius), 0.25em);
   --radius-medium: min(var(--radius), 0.5em);
   --radius-large: min(var(--radius), 1em);
+  /* Always fully rounded (pill/circle), independent of --radius — for elements
+     that are round by design, e.g. the color-preview slider knob. */
+  --radius-full: 9999px;
   --border-thickness: 1px;
 }