@dumiflex/wp-kit 0.15.1 → 0.15.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.15.2](https://github.com/DumiFlex/wp-kit/compare/v0.15.1...v0.15.2) (2026-11-09)
+
+
+### Bug Fixes
+
+* colour picker edges and thumb drift, uncut Segmented descenders, no false more-below hint ([#119](https://github.com/DumiFlex/wp-kit/issues/119)) ([d4728bb](https://github.com/DumiFlex/wp-kit/commit/d4728bb70ae90bedc68fc61a662cc848788b41a0))
+
 ## [0.15.1](https://github.com/DumiFlex/wp-kit/compare/v0.15.0...v0.15.1) (2026-11-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dumiflex/wp-kit",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "description": "Vue 3 component kit shared by the Wildcard Pipeline manager, canvas and community site.",
   "keywords": [
     "vue",

package/src/ColorField.vue

@@ -199,6 +199,9 @@ function pickNone(): void {
   border-radius: min(3px, var(--wp-radius-cap, 999px));
   /* Checks show through a see-through colour. */
   background: repeating-conic-gradient(var(--wp-bg-4) 0 25%, var(--wp-bg-1) 0 50%) 0 0 / 8px 8px;
+  /* Not under the see-through border, or the checks show round the colour
+     as a jagged edge. */
+  background-clip: padding-box;
 }
 .wp-color-field--md .wp-color-field__chip { width: 20px; height: 20px; border-radius: min(4px, var(--wp-radius-cap, 999px)); }
 .wp-color-field--compact { padding: 0 3px; }

package/src/HsvPicker.vue

@@ -38,6 +38,10 @@ const emit = defineEmits<{
 const hsv = ref<Hsv>({ h: 0, s: 1, v: 1 });
 
 function syncFromProp(hex: string) {
+  // Our own emit coming back: keep the exact position. A hex has only 256
+  // steps per channel, so near black (or grey) reading it back moves the
+  // thumb away from the pointer, and the hue jumps.
+  if (hex.toLowerCase() === hsvToHex(hsv.value).toLowerCase()) return;
   const parsed = hexToHsv(hex);
   if (!parsed) return;
   // Preserve the local hue when incoming RGB is pure black/white —
@@ -58,6 +62,18 @@ const hueBg = computed(() => `hsl(${hsv.value.h}, 100%, 50%)`);
 const svEl = ref<HTMLDivElement | null>(null);
 const hueEl = ref<HTMLDivElement | null>(null);
 
+/** Where `evt` sits inside `el`'s padding box (what the gradient and the
+ *  thumb are drawn in), as 0..1 fractions; the border is not part of it. */
+function fraction(el: HTMLElement, evt: PointerEvent): { x: number; y: number } {
+  const rect = el.getBoundingClientRect();
+  const left = rect.left + el.clientLeft;
+  const top = rect.top + el.clientTop;
+  const w = el.clientWidth || rect.width;
+  const h = el.clientHeight || rect.height;
+  const clamp = (n: number) => Math.max(0, Math.min(1, n));
+  return { x: w ? clamp((evt.clientX - left) / w) : 0, y: h ? clamp((evt.clientY - top) / h) : 0 };
+}
+
 /** Document-level drag state. Only one drag can be active at a time
  *  (one mouse / one finger), so a single `activeDrag` ref tracking
  *  which surface owns the current pointer is sufficient. */
@@ -66,19 +82,16 @@ let activeDrag: "sv" | "hue" | null = null;
 function handleSvMove(evt: PointerEvent) {
   const el = svEl.value;
   if (!el) return;
-  const rect = el.getBoundingClientRect();
-  const x = Math.max(0, Math.min(rect.width, evt.clientX - rect.left));
-  const y = Math.max(0, Math.min(rect.height, evt.clientY - rect.top));
-  hsv.value = { h: hsv.value.h, s: x / rect.width, v: 1 - (y / rect.height) };
+  const { x, y } = fraction(el, evt);
+  hsv.value = { h: hsv.value.h, s: x, v: 1 - y };
   emitHex();
 }
 
 function handleHueMove(evt: PointerEvent) {
   const el = hueEl.value;
   if (!el) return;
-  const rect = el.getBoundingClientRect();
-  const x = Math.max(0, Math.min(rect.width, evt.clientX - rect.left));
-  hsv.value = { h: (x / rect.width) * 360, s: hsv.value.s, v: hsv.value.v };
+  const { x } = fraction(el, evt);
+  hsv.value = { h: x * 360, s: hsv.value.s, v: hsv.value.v };
   emitHex();
 }
 
@@ -162,6 +175,11 @@ const hueCursorStyle = computed(() => ({
     linear-gradient(to top, #000, transparent),
     linear-gradient(to right, #fff, transparent),
     var(--wp-hsv-hue, hsl(0, 100%, 50%));
+  /* The gradients are sized to the padding box; without these they repeat
+     under the see-through border: a white line down the right edge, the
+     hue along the bottom. */
+  background-repeat: no-repeat;
+  background-clip: padding-box;
 }
 .wp-hsv-picker__sv-cursor {
   position: absolute;
@@ -192,6 +210,8 @@ const hueCursorStyle = computed(() => ({
     hsl(300, 100%, 50%),
     hsl(360, 100%, 50%)
   );
+  background-repeat: no-repeat;
+  background-clip: padding-box;
 }
 .wp-hsv-picker__hue-cursor {
   position: absolute;

package/src/WpSegmented.vue

@@ -158,7 +158,9 @@ function onKeydown(ev: KeyboardEvent): void {
 .wp-segmented[data-size="lg"] .wp-segmented__opt { padding: 0 var(--wp-space-6); font-size: var(--wp-text-base); }
 .wp-segmented[data-block] { display: flex; width: 100%; align-self: stretch; }
 .wp-segmented[data-block] .wp-segmented__opt { flex: 1 1 0; }
-.wp-segmented__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+/* The option sets line-height 1; the label clips (for the ellipsis), so it
+   needs a taller line or it cuts g, p, q and y. */
+.wp-segmented__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
 .wp-segmented[data-icon-only] .wp-segmented__opt { aspect-ratio: 1; padding: 0; }
 .wp-segmented__opt:hover:not(:disabled) { color: var(--wp-text); background: var(--wp-bg-3); }
 .wp-segmented__opt[data-active="true"] {

package/src/useGrowableField.ts

@@ -74,8 +74,12 @@ export function useGrowableField(
   function updateOverflowHint(): void {
     const el = getEl();
     if (!el) return;
-    // 2px slack absorbs sub-pixel rounding at the exact bottom.
-    hasMoreBelow.value = el.scrollHeight - el.scrollTop - el.clientHeight > 2;
+    // Only text counts: the bottom padding scrolling out of view hides
+    // nothing, so it is allowed for (a box a few px short of its padding
+    // showed the hint under a fully visible last line). 2px slack absorbs
+    // sub-pixel rounding at the exact bottom.
+    const pad = parseFloat(getComputedStyle(el).paddingBottom) || 0;
+    hasMoreBelow.value = el.scrollHeight - el.scrollTop - el.clientHeight > pad + 2;
   }
 
   function scheduleOverflowHint(): void {