barua-ui 0.10.0 → 0.11.1

package/css/components/marketing.css

@@ -197,28 +197,65 @@
 
   /* ---- Marquee: a row that keeps moving ------------------------------------
      For a line of marks too long to stand still: logos, integrations, the
-     names a product works with. The track holds the list TWICE and travels
-     exactly half its width, which is what makes the loop seamless; with one
-     copy it visibly snaps. It pauses under the pointer so a name can be read,
-     and it stops entirely for anyone who asked for less motion, where it
-     becomes an ordinary scrolling row instead. --b-marquee-time is the pace. */
+     names a product works with.
+
+     The track holds the list TWICE inside two .b-marquee__group elements and
+     travels exactly half its width, which puts group two where group one
+     started: that is what makes the loop seamless, and with one copy it
+     visibly snaps.
+
+     The groups exist because "twice" is not enough on its own. Half the track
+     is one group, so the loop is only seamless if a group is at least as wide
+     as the rail; seven short names in a 1280px row leave the second copy
+     ending early and a hole travelling along behind it. Each group is
+     therefore floored at the rail's own width and spaces its contents out to
+     fill it, so the belt is solid at any width with any number of names, and
+     when the list IS wider than the rail max-content wins and nothing changes.
+
+     It pauses under the pointer so a name can be read, and it stops entirely
+     for anyone who asked for less motion, where it becomes an ordinary
+     scrolling row instead. --b-marquee-time is the pace. */
   .b-marquee {
     overflow: hidden;
+    /* The floor a group measures itself against. */
+    container-type: inline-size;
     -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
     mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
   }
   .b-marquee__track {
     display: flex;
     align-items: center;
-    gap: clamp(var(--b-space-6), 5vw, var(--b-space-12));
     width: max-content;
     animation: b-marquee var(--b-marquee-time, 40s) linear infinite;
   }
+  /* Named twice on purpose. A group almost always carries a row class as well
+     (.b-logo-wall is the usual one), and those are defined later in this layer,
+     so at equal specificity they were winning: the wall's justify-content
+     centred each group inside its floored width and the two dead ends met at
+     the seam as one wide hole, which is the bug the group was added to fix.
+     The three properties that make a marquee a marquee are not the row's to
+     decide. The rhythm still is: set --b-marquee-gap. */
+  .b-marquee .b-marquee__group {
+    --b-marquee-gap: clamp(var(--b-space-6), 5vw, var(--b-space-12));
+    display: flex;
+    flex: none;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: space-around;
+    gap: var(--b-marquee-gap);
+    min-width: 100cqi;
+    /* space-around leaves half a share at each end, so a seam is already half
+       plus half. The gap is a separate, fixed minimum that only applies BETWEEN
+       items, so without this the seam came up exactly one gap short of every
+       other space in the belt. Half at each end restores it. */
+    padding-inline: calc(var(--b-marquee-gap) / 2);
+  }
   .b-marquee:hover .b-marquee__track { animation-play-state: paused; }
   @keyframes b-marquee { to { translate: -50% 0; } }
   @media (prefers-reduced-motion: reduce) {
     .b-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
     .b-marquee__track { animation: none; }
+    .b-marquee .b-marquee__group { min-width: 0; }
   }
 
   /* ---- Quote card: a number, a sentence, and who said it -------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barua-ui",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Barua UI — Apple-DNA design system (glass materials, Barua blue) as React components over pure CSS.",
   "license": "MIT",
   "type": "module",