@muten/shadcn 0.1.0 → 0.1.2

package/registry/gradient-blinds.js

@@ -1,129 +1,128 @@
-// GradientBlinds - ported from React Bits (reactbits.dev) to a muten Custom. A WebGL fragment shader (via `ogl`)
-// draws diagonal blinds over an animated gradient with a spotlight that FOLLOWS THE MOUSE + grain. Faithful and
-// GPU-fast. A Custom (graphics = the vanilla-JS escape); ogl loads via dynamic import() (a Custom is inlined into
-// an IIFE, so a top-level import is illegal). Inputs mirror the React props: colors, angle, noise, blindCount,
-// blindMinWidth, spotlightRadius/Softness/Opacity, mouseDampening, distort, shineDirection, mirror. Needs `ogl`.
+// GradientBlinds - first ported from React Bits (reactbits.dev), then made calm: a WebGL fragment shader (via `ogl`)
+// lays a gradient that is born on one side of the hero (`from`) and dissolves into the page over a long, eased fall,
+// with soft blinds that only shade it (never down to black), a light that follows the pointer and only adds, and a
+// fine grain. The fall is the canvas's own alpha, so it melts into any page background, light or dark.
+// A Custom (graphics = the vanilla-JS escape); ogl loads via dynamic import() (a Custom is inlined into an IIFE, so a
+// top-level import is illegal). Inputs: colors, from (top | bottom | left | right | center), angle, blindCount,
+// blindMinWidth, strength (how much the blinds shade, 0..1), noise. It draws only while on screen; with reduced
+// motion it is still (no drift, the light stays put). Needs `ogl`.
 const MAX_COLORS = 8;
+const FROM = { top: 0, bottom: 1, left: 2, right: 3, center: 4 };
 const hexToRGB = (hex) => {
   const c = String(hex).replace("#", "").padEnd(6, "0");
   return [parseInt(c.slice(0, 2), 16) / 255, parseInt(c.slice(2, 4), 16) / 255, parseInt(c.slice(4, 6), 16) / 255];
 };
 const prepStops = (stops) => {
-  const base = (stops && stops.length ? stops : ["#FF9FFC", "#5227FF"]).slice(0, MAX_COLORS);
+  const base = (stops.length ? stops : ["#9B80FF", "#6B46F2"]).slice(0, MAX_COLORS);
   if (base.length === 1) base.push(base[0]);
+  const count = base.length;
   while (base.length < MAX_COLORS) base.push(base[base.length - 1]);
-  return { arr: base.map(hexToRGB), count: Math.max(2, Math.min(MAX_COLORS, stops && stops.length ? stops.length : 2)) };
+  return { arr: base.map(hexToRGB), count };
 };
 
-export function mount(el, inputs) {
-  const num = (v, d) => { const n = Number(v); return Number.isFinite(n) ? n : d; };
-  const I = inputs || {};
-  const colors = (I.colors ? String(I.colors) : "#FF9FFC,#5227FF").split(",").map((s) => s.trim()).filter(Boolean);
-  const angle = num(I.angle, -25), noise = num(I.noise, 0.22);
-  const blindCount = num(I.blindCount, 16), blindMinWidth = num(I.blindMinWidth, 55);
-  const spotRadius = num(I.spotlightRadius, 0.6), spotSoft = num(I.spotlightSoftness, 1), spotOpacity = num(I.spotlightOpacity, 0.75);
-  const damp = num(I.mouseDampening, 0.15), distort = num(I.distort, 0);
-  const shineFlip = I.shineDirection === "right" ? 1 : 0, mirror = I.mirror ? 1 : 0;
-
-  import("ogl").then(({ Renderer, Program, Mesh, Triangle }) => {
-    const renderer = new Renderer({ dpr: Math.min(2, window.devicePixelRatio || 1), alpha: true, antialias: true });
-    const gl = renderer.gl;
-    const canvas = gl.canvas;
-    canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(to bottom,#000 42%,transparent 94%);mask-image:linear-gradient(to bottom,#000 42%,transparent 94%)";
-    el.appendChild(canvas);
-
-    const vertex = "attribute vec2 position;attribute vec2 uv;varying vec2 vUv;void main(){vUv=uv;gl_Position=vec4(position,0.0,1.0);}";
-    const fragment = `#ifdef GL_ES
-precision mediump float;
-#endif
+const vertex = "attribute vec2 position;attribute vec2 uv;varying vec2 vUv;void main(){vUv=uv;gl_Position=vec4(position,0.0,1.0);}";
+const fragment = `precision mediump float;
 uniform vec3 iResolution; uniform vec2 iMouse; uniform float iTime;
-uniform float uAngle, uNoise, uBlindCount, uSpotlightRadius, uSpotlightSoftness, uSpotlightOpacity, uMirror, uDistort, uShineFlip;
+uniform float uAngle, uNoise, uBlindCount, uStrength, uFrom;
 uniform vec3 uColor0,uColor1,uColor2,uColor3,uColor4,uColor5,uColor6,uColor7; uniform int uColorCount;
 varying vec2 vUv;
 float rand(vec2 co){ return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453); }
 vec2 rotate2D(vec2 p, float a){ float c=cos(a), s=sin(a); return mat2(c,-s,s,c)*p; }
-vec3 getGradientColor(float t){
-  float tt=clamp(t,0.0,1.0); int count=uColorCount; if(count<2) count=2;
-  float scaled=tt*float(count-1); float seg=floor(scaled); float f=fract(scaled);
+vec3 gradient(float t){
+  float scaled = clamp(t,0.0,1.0) * float(uColorCount-1); float seg = floor(scaled); float f = smoothstep(0.0,1.0,fract(scaled));
   if(seg<1.0) return mix(uColor0,uColor1,f);
-  if(seg<2.0 && count>2) return mix(uColor1,uColor2,f);
-  if(seg<3.0 && count>3) return mix(uColor2,uColor3,f);
-  if(seg<4.0 && count>4) return mix(uColor3,uColor4,f);
-  if(seg<5.0 && count>5) return mix(uColor4,uColor5,f);
-  if(seg<6.0 && count>6) return mix(uColor5,uColor6,f);
-  if(seg<7.0 && count>7) return mix(uColor6,uColor7,f);
-  if(count>7) return uColor7; if(count>6) return uColor6; if(count>5) return uColor5;
-  if(count>4) return uColor4; if(count>3) return uColor3; if(count>2) return uColor2; return uColor1;
+  if(seg<2.0) return mix(uColor1,uColor2,f);
+  if(seg<3.0) return mix(uColor2,uColor3,f);
+  if(seg<4.0) return mix(uColor3,uColor4,f);
+  if(seg<5.0) return mix(uColor4,uColor5,f);
+  if(seg<6.0) return mix(uColor5,uColor6,f);
+  return mix(uColor6,uColor7,f);
 }
-void mainImage(out vec4 fragColor, in vec2 fragCoord){
-  vec2 uv0 = fragCoord.xy / iResolution.xy;
-  float aspect = iResolution.x / iResolution.y;
-  vec2 p = uv0*2.0-1.0; p.x*=aspect; vec2 pr = rotate2D(p, uAngle); pr.x/=aspect; vec2 uv = pr*0.5+0.5;
-  vec2 uvMod = uv;
-  if(uDistort>0.0){ float a=uvMod.y*6.0, b=uvMod.x*6.0, w=0.01*uDistort; uvMod.x+=sin(a)*w; uvMod.y+=cos(b)*w; }
-  float t = uvMod.x; if(uMirror>0.5){ t = 1.0 - abs(1.0 - 2.0*fract(t)); }
-  vec3 base = getGradientColor(t);
-  vec2 offset = vec2(iMouse.x/iResolution.x, iMouse.y/iResolution.y);
-  float d = length(uv0-offset); float r = max(uSpotlightRadius, 1e-4); float dn = d/r;
-  float spot = (1.0 - 2.0*pow(dn, uSpotlightSoftness)) * uSpotlightOpacity;
-  vec3 cir = vec3(spot);
-  float stripe = fract(uvMod.x * max(uBlindCount,1.0)); if(uShineFlip>0.5) stripe = 1.0-stripe;
-  vec3 ran = vec3(stripe);
-  vec3 col = cir + base - ran;
-  col += (rand(gl_FragCoord.xy + iTime) - 0.5) * uNoise;
-  fragColor = vec4(col, 1.0);
+// how far a point is from the side the colour is born on: 0 there, 1 at the far side
+float away(vec2 uv){
+  if(uFrom<0.5) return 1.0-uv.y;
+  if(uFrom<1.5) return uv.y;
+  if(uFrom<2.5) return uv.x;
+  if(uFrom<3.5) return 1.0-uv.x;
+  vec2 d = (uv-0.5)*vec2(iResolution.x/iResolution.y,1.0); return clamp(length(d)*0.9,0.0,1.0);
 }
-void main(){ vec4 color; mainImage(color, vUv*iResolution.xy); gl_FragColor = color; }`;
+void main(){
+  vec2 uv0 = vUv;
+  float aspect = iResolution.x / iResolution.y;
+  vec2 p = uv0*2.0-1.0; p.x *= aspect; vec2 pr = rotate2D(p, uAngle); pr.x /= aspect; vec2 uv = pr*0.5+0.5;
+  float t = uv.x + iTime*0.012;
+  float wave = fract(t*0.5)*2.0; wave = wave > 1.0 ? 2.0-wave : wave;   // there and back, so the colours never jump
+  vec3 col = gradient(wave);
+  // blinds: a rounded light-to-shade profile per blind, shading the colour by at most uStrength
+  float stripe = fract(t * uBlindCount);
+  float shade = 0.5 - 0.5*cos(stripe*6.28318);
+  col *= 1.0 - uStrength*shade;
+  // the light under the pointer: a wide, soft lift
+  vec2 m = iMouse / iResolution.xy; vec2 dm = (uv0-m)*vec2(aspect,1.0);
+  col += exp(-dot(dm,dm)*3.5) * 0.18;
+  col += (rand(gl_FragCoord.xy + floor(iTime*24.0)) - 0.5) * uNoise;
+  // the fall into the page: full near the side it comes from, gone by the far side, eased so there is no edge
+  float a = 1.0 - smoothstep(0.0, 1.0, away(uv0));
+  a = a*a*(3.0-2.0*a);
+  gl_FragColor = vec4(col*a, a);
+}`;
+
+export function mount(el, inputs) {
+  const num = (v, d) => { const n = Number(v); return Number.isFinite(n) ? n : d; };
+  const I = inputs || {};
+  const colors = String(I.colors || "").split(",").map((s) => s.trim()).filter(Boolean);
+  const from = FROM[I.from] ?? FROM.top;
+  const angle = num(I.angle, -25), noise = num(I.noise, 0.035), strength = num(I.strength, 0.22);
+  const blindCount = num(I.blindCount, 12), blindMinWidth = num(I.blindMinWidth, 80);
+  const still = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  import("ogl").then(({ Renderer, Program, Mesh, Triangle }) => {
+    const renderer = new Renderer({ dpr: Math.min(2, window.devicePixelRatio || 1), alpha: true, premultipliedAlpha: true });
+    const gl = renderer.gl;
+    const canvas = gl.canvas;
+    canvas.style.cssText = "position:absolute;inset:0;width:100%;height:100%;display:block";
+    el.appendChild(canvas);
 
     const { arr, count } = prepStops(colors);
     const uniforms = {
-      iResolution: { value: [gl.drawingBufferWidth, gl.drawingBufferHeight, 1] },
-      iMouse: { value: [0, 0] }, iTime: { value: 0 },
-      uAngle: { value: (angle * Math.PI) / 180 }, uNoise: { value: noise },
-      uBlindCount: { value: Math.max(1, blindCount) },
-      uSpotlightRadius: { value: spotRadius }, uSpotlightSoftness: { value: spotSoft }, uSpotlightOpacity: { value: spotOpacity },
-      uMirror: { value: mirror }, uDistort: { value: distort }, uShineFlip: { value: shineFlip },
+      iResolution: { value: [1, 1, 1] }, iMouse: { value: [0, 0] }, iTime: { value: 0 },
+      uAngle: { value: (angle * Math.PI) / 180 }, uNoise: { value: noise }, uStrength: { value: strength },
+      uBlindCount: { value: blindCount }, uFrom: { value: from }, uColorCount: { value: count },
       uColor0: { value: arr[0] }, uColor1: { value: arr[1] }, uColor2: { value: arr[2] }, uColor3: { value: arr[3] },
       uColor4: { value: arr[4] }, uColor5: { value: arr[5] }, uColor6: { value: arr[6] }, uColor7: { value: arr[7] },
-      uColorCount: { value: count },
     };
-    const program = new Program(gl, { vertex, fragment, uniforms });
-    const mesh = new Mesh(gl, { geometry: new Triangle(gl), program });
+    const mesh = new Mesh(gl, { geometry: new Triangle(gl), program: new Program(gl, { vertex, fragment, uniforms, transparent: true }) });
 
-    let first = true;
+    let tx = 0, ty = 0, last = 0, seen = true, placed = false;
+    const draw = () => { try { renderer.render({ scene: mesh }); } catch (_) { /* context lost */ } };
     const resize = () => {
       const rect = el.getBoundingClientRect();
       renderer.setSize(rect.width || 1, rect.height || 1);
       uniforms.iResolution.value = [gl.drawingBufferWidth, gl.drawingBufferHeight, 1];
-      const maxByMin = blindMinWidth > 0 ? Math.max(1, Math.floor((rect.width || 1) / blindMinWidth)) : blindCount;
-      uniforms.uBlindCount.value = Math.max(1, blindCount ? Math.min(blindCount, maxByMin) : maxByMin);
-      if (first) { first = false; const cx = gl.drawingBufferWidth / 2, cy = gl.drawingBufferHeight / 2; uniforms.iMouse.value = [cx, cy]; tx = cx; ty = cy; }
+      uniforms.uBlindCount.value = Math.max(1, Math.min(blindCount, Math.floor((rect.width || 1) / blindMinWidth)));
+      if (!placed) { placed = true; tx = gl.drawingBufferWidth / 2; ty = gl.drawingBufferHeight * 0.7; uniforms.iMouse.value = [tx, ty]; }
+      draw();
     };
-    let tx = 0, ty = 0, last = 0;
     resize();
     try { new ResizeObserver(resize).observe(el); } catch (_) {}
+    try { new IntersectionObserver(([e]) => { seen = e.isIntersecting; }).observe(el); } catch (_) {}
 
-    // listen on window so the spotlight tracks the cursor even through the hero content overlaid on top.
+    if (still) return;
+    // on window, so the light follows the pointer even over the hero's content
     window.addEventListener("pointermove", (e) => {
-      const rect = canvas.getBoundingClientRect();
-      const scale = renderer.dpr || 1;
+      const rect = canvas.getBoundingClientRect(), scale = renderer.dpr || 1;
       tx = (e.clientX - rect.left) * scale;
       ty = (rect.height - (e.clientY - rect.top)) * scale;
-      if (damp <= 0) uniforms.iMouse.value = [tx, ty];
-    });
-
-    const loop = (t) => {
+    }, { passive: true });
+    const loop = (time) => {
       requestAnimationFrame(loop);
-      uniforms.iTime.value = t * 0.001;
-      if (damp > 0) {
-        if (!last) last = t;
-        const dt = (t - last) / 1000; last = t;
-        let factor = 1 - Math.exp(-dt / Math.max(1e-4, damp)); if (factor > 1) factor = 1;
-        const cur = uniforms.iMouse.value;
-        cur[0] += (tx - cur[0]) * factor; cur[1] += (ty - cur[1]) * factor;
-      }
-      try { renderer.render({ scene: mesh }); } catch (e) { /* context lost */ }
+      if (!seen || document.hidden) { last = time; return; }
+      const dt = last ? (time - last) / 1000 : 0; last = time;
+      const ease = 1 - Math.exp(-dt / 0.35), cur = uniforms.iMouse.value;
+      cur[0] += (tx - cur[0]) * ease; cur[1] += (ty - cur[1]) * ease;
+      uniforms.iTime.value = time * 0.001;
+      draw();
     };
     requestAnimationFrame(loop);
-  }).catch(() => { /* no ogl - the hero just has a flat background */ });
+  }).catch(() => { /* no ogl: the hero keeps its flat background */ });
 }

package/registry/gradient-blinds.muten

@@ -1,6 +1,13 @@
-# GradientBlinds - an animated gradient behind a hero: diagonal blinds and a light that follows the pointer, drawn on
-# the GPU (WebGL, through `ogl`: npm i ogl). Make it the first child of the hero and it fills the hero, fading out
-# at the bottom into the page; the content goes on top. colors: hex stops separated by commas.
+# GradientBlinds - an animated gradient behind a hero, drawn on the GPU (WebGL, through `ogl`: npm i ogl): the colour is
+# born on one side (`from`) and melts into the page over a long, eased fall, with soft diagonal blinds, a light that
+# follows the pointer and a fine grain. Make it the first child of the hero (`cx-hero-blinds`) and it fills it; the
+# content goes on top. It melts into any page background, light or dark, and is still under reduced motion.
 #   Stack class("cx-hero-blinds") { GradientBlinds(colors: "#9B80FF,#6B46F2")  Stack class("…") { … } }
+#   GradientBlinds(colors: "#FFB38A,#FF6F91,#9B80FF", from: "left", angle: 30, strength: 0.4, blinds: 8)
+# colors: hex stops separated by commas. from: top | bottom | left | right | center. angle: the blinds' tilt in degrees
+# (-25). strength: how much they shade, 0 (none) to 1 (0.22). blinds: how many at most (12; fewer on a narrow hero).
+# noise: the grain, 0 to 0.2 (0.035).
 # shadcn-for-muten · Custom · needs ogl · host JS gradient-blinds.js.
-part GradientBlinds(colors: text = "#9B80FF,#6B46F2") { Custom GradientBlinds inputs(colors: $colors) class("cx-blinds") }
+part GradientBlinds(colors: text = "#9B80FF,#6B46F2", from: text = "top", angle: number = -25, strength: number = 0.22, blinds: number = 12, noise: number = 0.035) {
+  Custom GradientBlinds inputs(colors: $colors, from: $from, angle: $angle, strength: $strength, blindCount: $blinds, noise: $noise) class("cx-blinds")
+}

package/registry/inbox-play.muten

@@ -0,0 +1,56 @@
+# InboxPlay - a messages list shown, not used: the shop's inbox as the channel's app draws it (skin: instagram |
+# whatsapp), with the unread ones in bold and their dot. For a landing, beside «nobody answered them»; the real inbox
+# is Messaging. The rows are a picture (aria-hidden); `label` says what it shows.
+#   InboxPlay(title: "brumabarberia", tabs: "Principal", requests: "Solicitudes (12)", label: "…") {
+#     InboxPlayRow(name: "lau.mtz", text: "precio??", time: "2 h", unread: "yes")
+#     InboxPlayRow(name: "carlos.r", text: "Visto", time: "1 d", photo: "/face.webp")
+#   }
+# search (a placeholder) draws the app's search bar; InboxPlayNotes, InboxPlayTabs and InboxPlayFilters go in the list
+# in that order. A row takes ring (yes: a story ring), badge (WhatsApp's unread count), tag (who answered: «Asistente»);
+# and Instagram rows show the camera at the end.
+# shadcn-for-muten · part · no deps · kit.css (.cx-ip).
+part InboxPlay(title: text, tabs: text = "", requests: text = "", skin: text = "instagram", label: text = "", search: text = "") {
+  Stack class("cx-ip cx-play") data(skin: $skin) aria(role: "img", label: $label) {
+    Stack class("cx-ip-head") aria(hidden: true) {
+      Span "{$title}" class("cx-ip-t")
+      Icon "lucide:chevron-down"
+      Stack class("cx-ip-ic") { Icon "lucide:square-pen" }
+    }
+    when $search != "" { Stack class("cx-ip-search") aria(hidden: true) { Icon "lucide:search"  Span "{$search}" } }
+    when $tabs != "" { Stack class("cx-ip-tabs") aria(hidden: true) { Span "{$tabs}" data(on: "yes")  Span "{$requests}" } }
+    Stack class("cx-ip-list") aria(hidden: true) { slot }
+  }
+}
+part InboxPlayRow(name: text, text: text, time: text = "", photo: text = "", unread: text = "", ring: text = "", badge: text = "", tag: text = "") {
+  Stack class("cx-ip-row") data(unread: $unread, ring: $ring) {
+    Stack class("cx-ip-avw") {
+      when $photo != "" { Image "{$photo}" alt("") class("cx-ip-av") }
+      when $photo == "" { Span "{initial($name)}" class("cx-ip-av cx-ip-init") }
+    }
+    Stack class("cx-ip-tx") {
+      Stack class("cx-ip-top") { Span "{$name}" class("cx-ip-n")  Span "{$time}" class("cx-ip-tr") }
+      Stack class("cx-ip-l") {
+        when $tag != "" { Span "{$tag}" class("cx-ip-tag") }
+        Span "{$text}" class("cx-ip-m")
+        Span "· {$time}" class("cx-ip-time")
+        when $badge != "" { Span "{$badge}" class("cx-ip-badge") }
+      }
+    }
+    Span "" class("cx-ip-dot")
+    Stack class("cx-ip-cam") { Icon "lucide:camera" }
+  }
+}
+# Instagram's notes over the list: a face with its short note above it.
+part InboxPlayNotes() { Stack class("cx-ip-notes") { slot } }
+part InboxPlayNote(name: text, note: text = "", photo: text = "") {
+  Stack class("cx-ip-note") {
+    when $note != "" { Span "{$note}" class("cx-ip-bub") }
+    when $photo != "" { Image "{$photo}" alt("") class("cx-ip-av") }
+    when $photo == "" { Span "{initial($name)}" class("cx-ip-av cx-ip-init") }
+    Span "{$name}" class("cx-ip-nn")
+  }
+}
+# Tabs as the app draws them (Instagram: Principal · General … Solicitudes) and WhatsApp's filter chips.
+part InboxPlayTabs(primary: text, general: text = "", requests: text = "") { Stack class("cx-ip-tabs") { Span "{$primary}" data(on: "yes")  when $general != "" { Span "{$general}" }  when $requests != "" { Span "{$requests}" class("cx-ip-req") } } }
+part InboxPlayFilters() { Stack class("cx-ip-filters") { slot } }
+part InboxPlayFilter(label: text, on: text = "") { Span "{$label}" class("cx-ip-filter") data(on: $on) }

package/registry/input-group.muten

@@ -9,7 +9,9 @@
 # shadcn-for-muten · part · no deps · Nova (.cn-input-group).
 part InputGroup(size: text = "default", variant: text = "default") { Stack class("cn-input-group group/input-group") data(slot: "input-group", size: $size, variant: $variant) aria(role: "group") { slot } }
 part InputAddon(align: text = "inline-start") { Stack class("cn-input-group-addon cn-input-group-addon-align-{$align}") data(slot: "input-group-addon", align: $align) { slot } }
-part GroupInput(value: text, placeholder: text = "") { SearchField bind($value) "{$placeholder}" class("cn-input cn-input-group-input cx-num") data(slot: "input-group-control") }
+# GroupInput - the field inside an InputGroup. `label` names it for a screen reader when the group shows no label of its own
+# (a literal: an interpolated arg cannot reach aria(); without it the placeholder names the field).
+part GroupInput(value: text, placeholder: text = "", label: text = "") { SearchField bind($value) "{$placeholder}" class("cn-input cn-input-group-input cx-num") data(slot: "input-group-control") aria(label: $label) }
 part SearchInput(value: text, placeholder: text = "Buscar", onClear: action, size: text = "default", variant: text = "default") {
   Stack class("cn-input-group group/input-group") data(slot: "input-group", size: $size, variant: $variant) aria(role: "group") {
     Stack class("cn-input-group-addon cn-input-group-addon-align-inline-start") data(slot: "input-group-addon", align: "inline-start") { Icon "lucide:search" }

package/registry/kit/board.js

@@ -91,7 +91,7 @@ export function orderBoard(root, i, core, on) {
     const groups = GROUP_ORDER.filter((k) => c[k]).map((k) => GROUPS[k](c[k], c));
     const next = c.actions.find(([a]) => a === 'advance');
     return `<div data-slot="card-header" class="cn-card-header">${person}</div>`
-      + (groups.length ? `<div data-slot="card-content" class="cn-card-content"><div data-slot="item-group" class="cn-item-group" role="list">${groups.join(ui.itemSeparator())}</div></div>` : '')
+      + (groups.length ? `<div data-slot="card-content" class="cn-card-content"><div data-slot="item-group" class="cn-item-group">${groups.join(ui.itemSeparator())}</div></div>` : '')
       + (next ? `<div data-slot="card-footer" class="cn-card-footer">${ui.button({ label: `${next[1]}<svg><use href="#right"/></svg>`, variant: 'default', size: 'default', attrs: 'data-bact="advance"', cls: 'cx-fill' })}</div>` : '');
   };
 

package/registry/kit/collections.js

@@ -115,7 +115,8 @@ export function carouselBehavior(root, i, core) {
   const thumbOf = (k) => { const media = cards[k].querySelector('img, [role=img], .cx-gallery-img'); const bg = media ? getComputedStyle(media).backgroundImage : ''; return media?.tagName === 'IMG' ? `<img src="${media.src}" alt="">` : `<span class="cx-thumb-fill" style="background-image:${bg}"></span>`; };
   const paint = () => {
     const n = pages(), cur = current();
-    if (indicator === 'dots') { if (ind.childElementCount !== n) ind.innerHTML = Array.from({ length: n }, (_, k) => ui.button({ variant: 'ghost', size: 'icon-xs', cls: 'cx-dotb', attrs: `role="tab" data-go="${k}" aria-label="Ir a ${k + 1} de ${n}"`, label: '<span class="cx-dot-mark"></span>' })).join(''); $$('[data-go]', ind).forEach((d, k) => d.setAttribute('aria-selected', k === cur)); }
+    // the dots are tabs, so their holder is the tablist (a tab without one fails the a11y check)
+    if (indicator === 'dots') { ind.setAttribute('role', 'tablist'); ind.setAttribute('aria-label', 'Diapositivas'); if (ind.childElementCount !== n) ind.innerHTML = Array.from({ length: n }, (_, k) => ui.button({ variant: 'ghost', size: 'icon-xs', cls: 'cx-dotb', attrs: `role="tab" data-go="${k}" aria-label="Ir a ${k + 1} de ${n}"`, label: '<span class="cx-dot-mark"></span>' })).join(''); $$('[data-go]', ind).forEach((d, k) => d.setAttribute('aria-selected', k === cur)); }
     if (indicator === 'progress') ind.innerHTML = `<div class="cx-hstack" style="gap:10px;flex-wrap:nowrap">${ui.progress(((cur + 1) / n) * 100, `Diapositiva ${cur + 1} de ${n}`)}${ui.text(`${cur + 1} / ${n}`, 'caption')}</div>`;
     if (indicator === 'count') ind.innerHTML = ui.text(`${cur + 1} de ${n}`, 'caption');
     if (indicator === 'thumbs') { if (!ind.childElementCount) ind.innerHTML = `<div class="cx-hstack" role="tablist" aria-label="Miniaturas">${cards.map((_, k) => ui.button({ variant: 'ghost', size: 'icon-lg', cls: 'cx-thumb', attrs: `role="tab" data-go="${k}" aria-label="Foto ${k + 1}"`, label: thumbOf(k) })).join('')}</div>`; $$('[data-go]', ind).forEach((d, k) => { d.setAttribute('aria-selected', k === cur); d.setAttribute('aria-pressed', k === cur); }); }
@@ -135,7 +136,14 @@ export function carouselBehavior(root, i, core) {
   let drag = null;
   track.addEventListener('pointerdown', (e) => { if (e.pointerType !== 'mouse' || e.button > 0) return; drag = { x: e.clientX, left: track.scrollLeft, moved: false }; track.classList.add('dragging'); });
   addEventListener('pointermove', (e) => { if (!drag) return; const dx = e.clientX - drag.x; if (Math.abs(dx) > 4) drag.moved = true; track.scrollLeft = drag.left - dx; });
-  addEventListener('pointerup', () => { if (!drag) return; const moved = drag.moved; drag = null; track.classList.remove('dragging'); if (moved) track.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); }, { capture: true, once: true }); });
+  // A drag lets go between two pages (snapping is off while dragging): settle on the nearest one, as a swipe does,
+  // or the track rests half-way and the dots and arrows disagree about where it is.
+  const nearest = () => {
+    if (center) return current();
+    if (track.scrollLeft >= track.scrollWidth - track.clientWidth - 4) return pages() - 1;
+    return Math.max(0, Math.min(pages() - 1, Math.round(track.scrollLeft / (step() * perPage()))));
+  };
+  addEventListener('pointerup', () => { if (!drag) return; const moved = drag.moved; drag = null; track.classList.remove('dragging'); if (moved) { go(nearest()); track.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); }, { capture: true, once: true }); } });
   let playing = !!autoplay && !matchMedia('(prefers-reduced-motion: reduce)').matches, hold = false;
   if (autoplay) {
     if (!playing) { const b = $('[data-car="play"]', root); b.innerHTML = ui.icon('play'); b.setAttribute('aria-label', 'Reproducir'); }