@muten/shadcn 0.2.3 → 0.2.5

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
@@ -1496,6 +1496,18 @@ p.cx-text { margin: 0; }
 .cx-thumb[aria-pressed="true"] { background: transparent; box-shadow: 0 0 0 2px var(--selected); }
 .cx-car-card .cn-card-header { padding: 12px 12px 4px; }
 @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; }
+}
 
 /* filters on the phone: search fills the row, «Filtros» beside it; chips scroll sideways */
 .cx-dt-host:has(.cx-fbtn-m) .cx-dt-tools { width: 100%; flex-wrap: nowrap; }

package/package.json

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

package/registry/carousel.muten

@@ -1,11 +1,14 @@
 # Carousel - one component, options instead of copies. The slides are your muten content (CarouselSlide).
 #   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
+#   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) ·
+#   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") {
-  Section class("cx-car") 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")
   }