@dumiflex/wp-kit 0.15.0 → 0.15.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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)
+
+
+### Bug Fixes
+
+* **PostCard:** show sample values as one line of text ([#115](https://github.com/DumiFlex/wp-kit/issues/115)) ([ced88a1](https://github.com/DumiFlex/wp-kit/commit/ced88a1e4c54ac6c20859b9d858f30f79a4e9edf))
+
 ## [0.15.0](https://github.com/DumiFlex/wp-kit/compare/v0.14.0...v0.15.0) (2026-11-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dumiflex/wp-kit",
-  "version": "0.15.0",
+  "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/PostCard.vue

@@ -86,9 +86,13 @@ const samples = computed(() => (props.post.samples ?? []).filter((v) => v.trim()
       :names="post.bundleModules.names"
     />
 
-    <ul v-if="samples.length" class="wp-post-card__samples" aria-label="Sample values">
-      <li v-for="(v, i) in samples" :key="i" class="wp-post-card__sample">{{ v }}</li>
-    </ul>
+    <p v-if="samples.length" class="wp-post-card__samples" :title="samples.join(' · ')">
+      <span class="wp-post-card__samples-k">Rolls</span>
+      <template v-for="(v, i) in samples" :key="i">
+        <span v-if="i" class="wp-post-card__samples-sep" aria-hidden="true"> · </span>
+        <span class="wp-post-card__sample">{{ v }}</span>
+      </template>
+    </p>
 
     <p v-if="post.description" class="wp-post-card__desc">{{ post.description }}</p>
 
@@ -193,27 +197,22 @@ const samples = computed(() => (props.post.samples ?? []).filter((v) => v.trim()
   -webkit-box-orient: vertical;
 }
 .wp-post-card__samples {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
   margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.wp-post-card__sample {
-  max-width: 100%;
   overflow: hidden;
-  padding: 3px 9px;
-  font-family: var(--wp-font-mono);
-  font-size: 12px;
-  line-height: 1.4;
+  font-size: 13px;
+  line-height: 1.5;
   color: var(--wp-text);
   white-space: nowrap;
   text-overflow: ellipsis;
-  background: color-mix(in oklab, var(--post-card-c) 12%, var(--wp-bg-2));
-  border: 1px solid color-mix(in oklab, var(--post-card-c) 28%, var(--wp-border));
-  border-radius: min(6px, var(--wp-radius-cap, 999px));
 }
+.wp-post-card__samples-k {
+  margin-right: 8px;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--wp-text-muted);
+}
+.wp-post-card__samples-sep { color: var(--wp-text-muted); }
 .wp-post-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
 .wp-post-card__tags .wp-chip { padding: 2px 8px; font-size: 11px; }
 .wp-post-card__foot {

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 {