@muten/shadcn 0.2.4 → 0.2.6

package/kit.css

@@ -1471,7 +1471,7 @@ p.cx-text { margin: 0; }
 .cx-car-slide { scroll-snap-align: start; min-width: 0; }
 /* a scrolling track clips both axes: 6 px of room above and below keeps a card's ring and shadow whole (it was cut at
    the top), taken back with a negative margin so the carousel does not grow */
-.cx-car-track { padding-block: 6px; margin-block: -6px; }
+.cx-car-track { padding-block: var(--car-room, 6px); margin-block: calc(-1 * var(--car-room, 6px)); }
 /* while the mouse drags the track it follows the hand; on release kit core settles it on the nearest page */
 .cx-car-track.dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
 /* centred like Embla's containScroll: the first slide sits at the start and the last at the end (no empty strip
@@ -1498,6 +1498,12 @@ p.cx-text { margin: 0; }
 @media (max-width: 640px) { .cx-car { --per: var(--per-sm) !important; } }
 /* only: "phone": swiped on a phone; on anything wider the same slides stand still in a grid of the wide perView, with
    no dots and no arrows (data-only is on the root from the first paint, so a wide screen never sees a track) */
+/* bleed: "on": a scrolling track clips at its own edges, so on a phone the slide that peeks was cut at the text's margin.
+   The track reaches out to the screen's edges by --car-bleed (the page's side gutter) and pads it back: the first slide
+   still lines up with the text, the next one runs off the screen as it should */
+@media (max-width: 640px) {
+  .cx-car[data-bleed="on"] .cx-car-track { margin-inline: calc(-1 * var(--car-bleed, 16px)); padding-inline: var(--car-bleed, 16px); scroll-padding-inline: var(--car-bleed, 16px); }
+}
 @media (min-width: 641px) {
   .cx-car[data-only="phone"] .cx-car-track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(var(--per, 3), minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; padding-block: 0; margin-block: 0; }
   .cx-car[data-only="phone"] .cx-car-bar, .cx-car[data-only="phone"] .cx-car-arrow { display: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muten/shadcn",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "shadcn-style component registry for muten - own-the-source parts you add with `muten add`.",
   "repository": {
     "type": "git",

package/registry/carousel.muten

@@ -2,11 +2,13 @@
 #   perView "4" or "2,4" (phone, wider) · center "on" (the active one centred, neighbours peeking) · loop "on" ·
 #   autoplay ms (pauses on hover, focus, touch, hidden tab; off with reduced motion; its own pause button) ·
 #   indicator dots | progress | count | thumbs · arrows bar | overlay | none ·
-#   only "phone" (a carousel on a phone; on a wider screen the same slides sit still in a grid of perView's wide count)
+#   only "phone" (a carousel on a phone; on a wider screen the same slides sit still in a grid of perView's wide count) ·
+#   bleed "on" (on a phone the track reaches the screen's edges instead of stopping at the text's margin; the margin is
+#   --car-bleed, 16px by default) · --car-room on the carousel: the room above and below for shadows (6px)
 #   Carousel(label: "Products", perView: "2,4") { each products as p { CarouselSlide { … } } }
 # shadcn-for-muten · part + Custom (CarouselBehavior, kit collections) · kit.css (.cx-car).
-part Carousel(label: text, perView: text = "1", center: text = "", loop: text = "", autoplay: number = 0, indicator: text = "dots", arrows: text = "bar", only: text = "") {
-  Section class("cx-car") data(only: $only) aria(label: $label, roledescription: "carrusel") {
+part Carousel(label: text, perView: text = "1", center: text = "", loop: text = "", autoplay: number = 0, indicator: text = "dots", arrows: text = "bar", only: text = "", bleed: text = "") {
+  Section class("cx-car") data(only: $only, bleed: $bleed) aria(label: $label, roledescription: "carrusel") {
     Stack class("cx-car-view") { Stack class("cx-car-track") { slot } }
     Custom Carousel inputs(perView: $perView, center: $center, loop: $loop, autoplay: $autoplay, indicator: $indicator, arrows: $arrows) class("cx-car-behavior")
   }

package/registry/kit/collections.js

@@ -134,8 +134,13 @@ export function carouselBehavior(root, i, core) {
   track.tabIndex = 0;
   track.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight') { e.preventDefault(); go(current() + 1); } if (e.key === 'ArrowLeft') { e.preventDefault(); go(current() - 1); } });
   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; });
+  // a track with nothing to scroll (only: "phone" on a wide screen) is not dragged at all
+  track.addEventListener('pointerdown', (e) => { if (e.pointerType !== 'mouse' || e.button > 0 || track.scrollWidth <= track.clientWidth + 1) return; drag = { x: e.clientX, left: track.scrollLeft, moved: false }; track.classList.add('dragging'); });
+  // A slide that is a link or a picture starts the browser's own drag: it ends in pointercancel, never pointerup, and the
+  // track went on following the mouse with the button already up. So the browser's drag is refused inside the track,
+  // and a move with no button down (released outside the window, or a lost pointerup) ends the drag too.
+  track.addEventListener('dragstart', (e) => e.preventDefault());
+  addEventListener('pointermove', (e) => { if (!drag) return; if (!(e.buttons & 1)) { release(); return; } const dx = e.clientX - drag.x; if (Math.abs(dx) > 4) drag.moved = true; track.scrollLeft = drag.left - dx; });
   // 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 = () => {
@@ -143,7 +148,11 @@ export function carouselBehavior(root, i, core) {
     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 }); } });
+  function release() { if (!drag) return; const moved = drag.moved; drag = null; track.classList.remove('dragging'); if (moved) { go(nearest()); swallowClick(); } }
+  // the click that ends a drag is not a tap on the slide; only that one: a drag that ended without a click (pointercancel)
+  // must not leave the next real tap swallowed
+  function swallowClick() { const eat = (e) => { e.preventDefault(); e.stopPropagation(); }; track.addEventListener('click', eat, { capture: true, once: true }); setTimeout(() => track.removeEventListener('click', eat, { capture: true }), 0); }
+  ['pointerup', 'pointercancel', 'blur'].forEach((type) => addEventListener(type, release));
   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', T('Play')); }