studio-engine 0.133.2 → 0.134.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a0b1a25cbd9027f85de7e90d9e0b22f113d048a622979fe2a996ddac25526106
-  data.tar.gz: 5501ce9e395be5812d0eb25d2cc53ab501f1f6f02a7afd0366d1429b506edda8
+  metadata.gz: 28427df3b5517371576bbd0cc5c159220393748f14c7a31ed39214a223fd0b86
+  data.tar.gz: 2268ea35dc8219f05a5dc2f1e28c639478538782ba664d69125f7e63556ddfac
 SHA512:
-  metadata.gz: a0ad40b43a9674a2b7e67711bb85de70558331279efe955df165d8d96178a779e6ff12282c3d359224e1a78e605ae5f0cc874e7bc63e5d4a180f03161439202c
-  data.tar.gz: 75d96b512a1c891a23a60c983e45a951fa1e909c9894579485074ec042420a1208895135078e29b8dad0564589d7818f9df4c27381f60eb2cd5ce26ecda0d938
+  metadata.gz: 7c48c6796c363df39d913088657f89ac9ee7ffec99e3b3f685095006890c405ec3de5f8aaee936a50d3aa1a4c4250a445de484c0debff38166917bd6a3f08f34
+  data.tar.gz: 3fe116b2ea6ebfd22e920cacb672ead1e4f999e7c0d5f15b31ad208653e104627d6305c65d2cc24b021041bff9f3e31d9d3569841d8fc51f88daae1b1d6e18a7

data/CHANGELOG.md

@@ -4,6 +4,14 @@ The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This pro
 
 ## Unreleased
 
+## 0.134.0 — 2026-11-07
+
+### Changed
+
+- **A looping carousel now wraps visually.** `studio/_carousel` with `loop: true` and more than one slide copies its last slides before the first and its first slides after the last, so a spotlight opening on its first slide shows the last one beside it (the hub's `/websites` row). Next at the last slide, Previous at the first and autoplay glide across the seam and then jump silently onto the real slide; reduced motion goes straight there. The copies are `aria-hidden` and `inert` and drop ids, names, `data-test` hooks and Stimulus wiring, so a screen reader and Tab meet each slide once and the dots count real slides. Every slide of a looping standard row is now a stop (six slides three to a view show six dots, not four). Rows without `loop:` are unchanged. Nothing to do in a host; a host spec that counts `.carousel-slide` in a looping row should count `[data-carousel-target='slide']`.
+- **A looping spotlight opens on its first slide.** With `style: :spotlight`, `loop: true`, more than one slide and no `start:`, the row now opens on slide 0, the host's first item, with the last slide showing on its left. It used to open on `:middle`. A spotlight that does not loop still opens on `:middle`, and an explicit `start:` still wins. A host that wants the old opening passes `start: :middle`.
+- **Footer social icons are lit like the buttons.** A linked `.ftr-social` disc in the site footer now wears the glass lit button's family in every app, glass surface or not: a top highlight, a bottom edge, a contact shadow and a soft glow in its own fill, with the dark-mode values in dark mode. Hover still lifts and now deepens (never brightens, so the white glyph keeps its contrast). A pending (dashed) icon stays flat. No consumer change: it arrives with the engine bump.
+
 ## 0.133.2 — 2026-11-06
 
 ### Changed

data/README.md

@@ -343,15 +343,23 @@ keys move one slide. Where the browser has scroll-driven animations the look fol
 scroll; elsewhere the controller marks the centred slide (`data-current`) and CSS
 transitions it. Reduced motion only dims.
 
-`start:` is the slide the row opens on: an index from 0, or `:middle`. A spotlight opens
-on its middle slide by default, so neither half of the row is empty at load; a standard
-row opens on its first. The browser sets it before the first paint where it has
+`start:` is the slide the row opens on: an index from 0, or `:middle`. A spotlight that
+does not loop opens on its middle slide by default, so neither half of the row is empty at
+load; a standard row and a looping spotlight open on their first (a looping row's wrap
+already shows the last slide left of the first). An explicit `start:` wins. The browser sets it before the first paint where it has
 `scroll-initial-target`; elsewhere the controller jumps there when it connects, with no
 glide and nothing announced. A `#fragment` link to an element inside the row wins.
 
-`loop: true` wraps the row: Next at the last slide goes to the first, Previous at the first
-to the last, and neither arrow is ever disabled. No slide is cloned, so a screen reader reads
-each one once; the row glides back across itself.
+`loop: true` wraps the row, and a row of more than one slide is visually continuous: the
+controller copies the last slides before the first and the first slides after the last, so
+with the first slide centred the last one shows beside it. Next at the last slide glides on
+to the first and Previous at the first back to the last; once the row rests, it jumps with no
+glide onto the real slide, which looks the same. Under reduced motion it goes straight there.
+Neither arrow is ever disabled, and every slide of a looping row is a stop. A copy is
+`aria-hidden` and `inert`, and drops its ids, names, test hooks (`data-test`, `data-testid`)
+and Stimulus wiring, so a screen reader and Tab meet each slide once, a `#fragment` finds the
+real slide, and the dots and the status line count the real slides. A slide that a controller
+fills after load shows its server-rendered copy beside the seam.
 
 `autoplay:` is the seconds between moves (default `nil`, off). The row moves one slide each
 interval, in both styles. It holds still while the pointer is over the slides, while keyboard

data/app/assets/tailwind/studio_engine/engine.css

@@ -1064,6 +1064,15 @@ body.modal-open .studio-app-banner {
     opacity: 0;
   }
 
+  /* A looping row's jump across the seam (data-carousel-wrapping, one frame): the
+     mark moves from a clone to the real slide it copies, in the same place, so
+     nothing may transition. A clone is a carousel-slide, so every other rule here
+     (the scroll-driven look, the mark) styles it as it styles a real slide. */
+  &[data-carousel-wrapping] .carousel-slide .carousel-spotlight-body,
+  &[data-carousel-wrapping] .carousel-slide .carousel-caption {
+    transition: none;
+  }
+
   /* A neighbour holding focus drops the neighbour look on every path, so its focus
      ring shows at full strength (WCAG 2.4.7). It outranks the animation and the mark. */
   & .carousel-slide:focus-within .carousel-spotlight-body,

data/app/javascript/studio/carousel.js

@@ -51,6 +51,8 @@ export function perPage(clientWidth, slideWidth, gap) {
 // A LOOPING row (loop: true) wraps instead: Next at the last stop goes to the
 // first, Previous at the first goes to the last. A page that would overshoot an
 // end still lands on that end first, so no slide is skipped on the way round.
+// The controller uses this wrap only for a looping row it has not cloned; a cloned
+// row (THE LOOP'S CLONES, below) moves by loopStop instead, round the seam.
 export function targetStop(action, current, page, count, loop = false) {
   const last = Math.max(0, count - 1)
   if (loop && last > 0) {
@@ -170,3 +172,77 @@ export function startStop(start, count) {
   const index = Math.floor(Number(start)) || 0
   return Math.min(count - 1, Math.max(0, index))
 }
+
+// THE LOOP'S CLONES. A looping row (loop: true, more than one slide) is visually
+// continuous: the controller copies the last slides before the first and the first
+// slides after the last, so the space either side of an end shows the slides round
+// the seam. A clone is aria-hidden and inert, with no id and no test hook, so a
+// screen reader and Tab meet each slide once; the dots and the status line count the
+// real slides only.
+//
+// Each place in that longer row has a VIRTUAL index: the real slides are 0 to
+// total - 1, the clones before them -count to -1, the clones after total to
+// total + count - 1. A move across the seam glides to a clone, and once the row
+// rests there the controller jumps, with no glide, to the real slide it copies.
+
+// The index of a real slide from a virtual one.
+export function wrapIndex(index, total) {
+  if (!(total > 0)) return 0
+  return ((index % total) + total) % total
+}
+
+// How many clones each side: a wide row's slides plus one, enough to fill the view
+// beside either end in both styles. None for a row of one slide.
+export function cloneCount(perView, total) {
+  if (!(total > 1)) return 0
+  const view = Number(perView)
+  return Math.ceil(Number.isFinite(view) && view > 0 ? Math.min(view, 6) : 3) + 1
+}
+
+// The real slide each clone copies, in row order: `before` sits ahead of the first
+// slide, `after` behind the last. A short row repeats round itself.
+export function cloneLayout(total, count) {
+  if (!(total > 1) || !(count > 0)) return { before: [], after: [] }
+  const before = []
+  const after = []
+  for (let k = count; k >= 1; k -= 1) before.push(wrapIndex(-k, total))
+  for (let k = 0; k < count; k += 1) after.push(wrapIndex(k, total))
+  return { before, after }
+}
+
+// The virtual index an arrow, a key or autoplay takes a cloned row to: a page on
+// either way, round the seam with no end. Home and End go to the first and last
+// real slide. Held to the clones, so a press mid-glide never runs off the row.
+export function loopStop(action, current, page, total, count) {
+  const to = { prev: current - page, next: current + page, first: 0, last: total - 1 }[action]
+  if (to === undefined) return current
+  return Math.min(total - 1 + count, Math.max(-count, to))
+}
+
+// The virtual index nearest `current` that shows real slide `index`: a dot takes
+// the short way round the seam.
+export function nearestVirtual(index, current, total, count) {
+  const options = [index - total, index, index + total].filter((v) => v >= -count && v <= total - 1 + count)
+  return options.reduce((best, v) => (Math.abs(v - current) < Math.abs(best - current) ? v : best), index)
+}
+
+// The real slide a row resting on a clone jumps to, or null when it rests on a real one.
+export function seamJump(virtual, total) {
+  if (!(total > 0)) return null
+  return virtual < 0 || virtual >= total ? wrapIndex(virtual, total) : null
+}
+
+// The attributes a clone drops: ids and names (a clone must not answer a #fragment or
+// join a form), test hooks, and Stimulus wiring (a clone runs no controller and is
+// no one's target), and the carousel's own marks.
+export const CLONE_STRIP = /^(id|name|data-(test|testid|test-id|qa|cy)|data-(studio-)?(controller|action)|data-[\w-]+-target|data-carousel-start-slide|data-current)$/
+
+// The status line of a looping row, whose view may run round the seam:
+// "Slides 5 to 6 and 1 of 6".
+export function loopPositionText(first, shown, total) {
+  const count = Math.min(shown, total)
+  if (first + count <= total) return positionText(first, count, total)
+  const over = first + count - total
+  const head = first + 1 === total ? `Slides ${total}` : `Slides ${first + 1} to ${total}`
+  return `${head} and ${over === 1 ? "1" : `1 to ${over}`} of ${total}`
+}

data/app/javascript/studio/controllers/carousel_controller.js

@@ -26,10 +26,21 @@
 // and nothing in the status line. A row already moved (the browser's own start, a
 // restored scroll, a #fragment inside it) is left where it is.
 //
-// A LOOPING row (loop:, data-carousel-loop) wraps: Next at the last stop goes back
-// to the first, Previous at the first to the last, and neither arrow is ever
-// aria-disabled. There are no cloned slides, so a screen reader reads each once:
-// the row glides back across itself.
+// A LOOPING row (loop:, data-carousel-loop) of more than one slide is visually
+// continuous. connect() copies the last slides before the first and the first slides
+// after the last (cloneLayout), so the space beside either end shows the slides
+// round the seam. Next at the last slide glides on to the clone of the first;
+// once the row rests there (scrollend, or a short quiet spell where the browser has
+// no scrollend) it jumps, with no glide and no transition, to the real first slide,
+// whose neighbours look the same. Previous at the first does the same backwards, and
+// a swipe that rests on a clone too. Under reduced motion the row goes straight to
+// the real slide. Neither arrow is ever aria-disabled.
+//
+// A clone is aria-hidden and inert, keeps no id, name, test hook or Stimulus wiring
+// (CLONE_STRIP), and is no slide target, so a screen reader and Tab meet each real
+// slide once, a #fragment finds the real slide, and the dots and the status line
+// count real slides. A click on a clone moves the row to it. disconnect() removes
+// the clones, and connect() clears any a page snapshot kept.
 //
 // AUTOPLAY (autoplay: seconds, data-carousel-autoplay) moves the row one stop each
 // interval. It holds still while the pointer is over the slides, while keyboard focus
@@ -40,8 +51,9 @@
 // (APG: a rotating carousel does not announce). Without loop it stops at the end.
 import { Controller } from "@hotwired/stimulus"
 import {
-  TOLERANCE, autoplayRunning, autoplaySeconds, autoplayStop, centerStops, currentStop, hiddenEnds, idleDelay,
-  initialReasons, keyAction, ownsKey, perPage, positionText, startStop, stops, targetStop, toggleLabel, withReason
+  CLONE_STRIP, TOLERANCE, autoplayRunning, autoplaySeconds, autoplayStop, centerStops, cloneCount, cloneLayout,
+  currentStop, hiddenEnds, idleDelay, initialReasons, keyAction, loopPositionText, loopStop, nearestVirtual, ownsKey,
+  perPage, positionText, seamJump, startStop, stops, targetStop, toggleLabel, withReason, wrapIndex
 } from "studio/carousel"
 
 const REDUCE = "(prefers-reduced-motion: reduce)"
@@ -51,14 +63,22 @@ export default class extends Controller {
 
   connect() {
     this.schedule = this.schedule.bind(this)
+    this.settle = this.settle.bind(this)
+    this.clickClone = this.clickClone.bind(this)
     this.loop = this.element.hasAttribute("data-carousel-loop")
+    this.cloned = 0
+    this.removeClones()
+    this.scrollEnd = "onscrollend" in window
     this.trackTarget.addEventListener("scroll", this.schedule, { passive: true })
+    if (this.scrollEnd) this.trackTarget.addEventListener("scrollend", this.settle, { passive: true })
+    this.trackTarget.addEventListener("click", this.clickClone)
     if (typeof ResizeObserver === "function") {
       this.observer = new ResizeObserver(this.schedule)
       this.observer.observe(this.trackTarget)
     }
     this.element.setAttribute("data-carousel-ready", "")
     this.openAtStart()
+    this.addClones()
     this.sync()
     this.startAutoplay()
   }
@@ -82,10 +102,91 @@ export default class extends Controller {
 
   disconnect() {
     this.trackTarget.removeEventListener("scroll", this.schedule)
+    this.trackTarget.removeEventListener("scrollend", this.settle)
+    this.trackTarget.removeEventListener("click", this.clickClone)
     this.observer?.disconnect()
     if (this.frame) cancelAnimationFrame(this.frame)
     this.frame = null
+    clearTimeout(this.settleTimer)
+    this.settleTimer = null
     this.stopAutoplay()
+    this.removeClones()
+  }
+
+  // -- the loop's clones ------------------------------------------------------
+
+  // Copies the slides round the seam either side, and holds the row where it was:
+  // the scroll moves by the width the clones added before the first slide.
+  addClones() {
+    this.cloned = 0
+    if (!this.loop) return
+    const slides = this.slideTargets
+    const perView = parseFloat(getComputedStyle(this.element).getPropertyValue("--carousel-per-view"))
+    const { before, after } = cloneLayout(slides.length, cloneCount(perView, slides.length))
+    if (before.length === 0) return
+
+    const track = this.trackTarget
+    const first = slides[0]
+    const left = track.scrollLeft
+    const was = first.offsetLeft
+    first.before(...before.map((index) => this.cloneOf(slides[index])))
+    slides[slides.length - 1].after(...after.map((index) => this.cloneOf(slides[index])))
+    this.cloned = before.length
+    track.scrollTo({ left: left + first.offsetLeft - was, behavior: "instant" })
+  }
+
+  cloneOf(slide) {
+    const clone = slide.cloneNode(true)
+    for (const node of [clone, ...clone.querySelectorAll("*")]) {
+      for (const { name } of [...node.attributes]) if (CLONE_STRIP.test(name)) node.removeAttribute(name)
+    }
+    for (const name of ["role", "aria-roledescription", "aria-label"]) clone.removeAttribute(name)
+    clone.setAttribute("aria-hidden", "true")
+    clone.setAttribute("inert", "")
+    clone.setAttribute("data-carousel-clone", "")
+    return clone
+  }
+
+  removeClones() {
+    this.trackTarget.querySelectorAll(":scope > [data-carousel-clone]").forEach((clone) => clone.remove())
+    this.cloned = 0
+  }
+
+  // Every slide in row order, the clones included.
+  rowSlides() {
+    return this.cloned ? [...this.trackTarget.querySelectorAll(":scope > .carousel-slide")] : this.slideTargets
+  }
+
+  // The row came to rest. On a clone it jumps to the real slide the clone copies,
+  // at the same place in the row, so nothing on screen changes.
+  settle() {
+    this.settleTimer = null
+    if (!this.cloned) return
+    this.sync()
+    const real = seamJump(this.virtual, this.positions.length)
+    if (real === null) return
+    const at = this.full[this.virtual + this.cloned]
+    if (Math.abs(this.trackTarget.scrollLeft - at) > TOLERANCE) return
+    this.element.setAttribute("data-carousel-wrapping", "")
+    this.trackTarget.scrollTo({ left: this.positions[real], behavior: "instant" })
+    this.sync()
+    void this.trackTarget.offsetWidth
+    requestAnimationFrame(() => this.element.removeAttribute("data-carousel-wrapping"))
+  }
+
+  // An inert clone takes no click, so the click lands on the track: a click on a
+  // clone's box moves the row to it.
+  clickClone(event) {
+    if (!this.cloned || event.target !== this.trackTarget) return
+    const index = this.rowSlides().findIndex((slide) => {
+      if (!slide.hasAttribute("data-carousel-clone")) return false
+      const box = slide.getBoundingClientRect()
+      return event.clientX >= box.left && event.clientX <= box.right && event.clientY >= box.top && event.clientY <= box.bottom
+    })
+    if (index < 0) return
+    this.interacted()
+    this.sync()
+    this.scrollToStop(index - this.cloned)
   }
 
   // -- autoplay ---------------------------------------------------------------
@@ -183,7 +284,7 @@ export default class extends Controller {
     this.timer = null
     this.sync()
     const count = this.positions.length
-    const to = autoplayStop(this.current, count, this.loop)
+    const to = this.cloned ? loopStop("next", this.virtual, 1, count, this.cloned) : autoplayStop(this.current, count, this.loop)
     if (to === null && count > 1) {
       // The end of a row that does not loop: autoplay is done until Play.
       this.pause("stopped", true)
@@ -194,6 +295,10 @@ export default class extends Controller {
   }
 
   schedule() {
+    if (this.cloned && !this.scrollEnd) {
+      clearTimeout(this.settleTimer)
+      this.settleTimer = setTimeout(this.settle, 150)
+    }
     if (this.frame) return
     this.frame = requestAnimationFrame(() => {
       this.frame = null
@@ -201,9 +306,11 @@ export default class extends Controller {
     })
   }
 
+  // The stops of every slide in the row. A cloned row measures its clones too, and
+  // every slide of it is a stop: the row never ends.
   measure() {
     const track = this.trackTarget
-    const slides = this.slideTargets
+    const slides = this.rowSlides()
     if (this.element.classList.contains("carousel-spotlight")) {
       const max = Math.max(0, track.scrollWidth - track.clientWidth)
       const boxes = slides.map((slide) => ({ left: slide.offsetLeft, width: slide.offsetWidth }))
@@ -212,6 +319,12 @@ export default class extends Controller {
     const origin = slides[0]?.offsetLeft || 0
     const max = Math.max(0, track.scrollWidth - track.clientWidth)
     const gap = parseFloat(getComputedStyle(track).columnGap) || 0
+    if (this.cloned) {
+      return {
+        positions: slides.map((slide) => Math.min(max, Math.max(0, slide.offsetLeft - origin))),
+        page: perPage(track.clientWidth, slides[0]?.offsetWidth, gap)
+      }
+    }
     return {
       positions: stops(slides.map((slide) => slide.offsetLeft - origin), max),
       page: perPage(track.clientWidth, slides[0]?.offsetWidth, gap)
@@ -223,22 +336,35 @@ export default class extends Controller {
     const { positions, page } = this.measure()
     const ends = hiddenEnds(track)
 
-    this.positions = positions
     this.page = page
-    this.current = currentStop(track.scrollLeft, positions)
+    if (this.cloned) {
+      // positions holds every slide, clones included; this.positions the real ones.
+      const total = this.slideTargets.length
+      this.full = positions
+      this.virtual = currentStop(track.scrollLeft, positions) - this.cloned
+      this.current = wrapIndex(this.virtual, total)
+      this.positions = positions.slice(this.cloned, this.cloned + total)
+    } else {
+      this.full = null
+      this.positions = positions
+      this.current = currentStop(track.scrollLeft, positions)
+      this.virtual = this.current
+    }
 
-    this.element.toggleAttribute("data-carousel-static", positions.length < 2)
+    this.element.toggleAttribute("data-carousel-static", this.positions.length < 2)
     track.toggleAttribute("data-fade-start", ends.start)
     track.toggleAttribute("data-fade-end", ends.end)
     // A looping row never disables an arrow: each end leads round to the other.
-    const wraps = this.loop && positions.length > 1
+    const wraps = this.loop && this.positions.length > 1
     if (this.hasPrevTarget) this.prevTarget.setAttribute("aria-disabled", String(!wraps && !ends.start))
     if (this.hasNextTarget) this.nextTarget.setAttribute("aria-disabled", String(!wraps && !ends.end))
     if (this.element.classList.contains("carousel-spotlight")) {
-      this.slideTargets.forEach((slide, index) => slide.toggleAttribute("data-current", index === this.current))
+      // A clone is marked as a real slide is, so the fallback scales it the same.
+      const at = this.virtual + this.cloned
+      this.rowSlides().forEach((slide, index) => slide.toggleAttribute("data-current", index === at))
     }
     this.dotTargets.forEach((dot, index) => {
-      dot.hidden = index >= positions.length
+      dot.hidden = index >= this.positions.length
       if (index === this.current) dot.setAttribute("aria-current", "true")
       else dot.removeAttribute("aria-current")
     })
@@ -251,7 +377,8 @@ export default class extends Controller {
   goTo(event) {
     this.interacted()
     this.sync()
-    this.scrollToStop(Number(event.currentTarget.dataset.carouselIndex))
+    const index = Number(event.currentTarget.dataset.carouselIndex)
+    this.scrollToStop(this.cloned ? nearestVirtual(index, this.virtual, this.positions.length, this.cloned) : index)
   }
 
   key(event) {
@@ -270,17 +397,35 @@ export default class extends Controller {
   move(action) {
     this.interacted()
     this.sync()
+    if (this.cloned) {
+      const to = loopStop(action, this.virtual, this.page, this.positions.length, this.cloned)
+      if (to === this.virtual) return
+      this.scrollToStop(to)
+      return
+    }
     const to = targetStop(action, this.current, this.page, this.positions.length, this.loop)
     if (to === this.current) return
     this.scrollToStop(to)
   }
 
-  // announce: false for autoplay, which moves the row without a word.
+  // announce: false for autoplay, which moves the row without a word. On a cloned
+  // row the index is virtual: a clone's place glides there and settle() jumps home,
+  // but under reduced motion the row goes straight to the real slide.
   scrollToStop(index, { announce = true } = {}) {
+    const reduce = window.matchMedia?.(REDUCE).matches
+    if (this.cloned) {
+      const total = this.positions.length
+      const real = wrapIndex(index, total)
+      const left = reduce ? this.positions[real] : this.full[index + this.cloned]
+      if (left === undefined) return
+      this.trackTarget.scrollTo({ left, behavior: reduce ? "auto" : "smooth" })
+      if (announce && this.hasStatusTarget) this.statusTarget.textContent = loopPositionText(real, this.page, total)
+      return
+    }
+
     const left = this.positions[index]
     if (left === undefined) return
 
-    const reduce = window.matchMedia?.(REDUCE).matches
     this.trackTarget.scrollTo({ left, behavior: reduce ? "auto" : "smooth" })
 
     if (!announce || !this.hasStatusTarget) return

data/app/views/studio/_carousel.html.erb

@@ -25,15 +25,25 @@
                    standard row shows a small line under every slide; the
                    spotlight shows it under the centred slide only.
       start        the slide the row opens on: an index from 0, or :middle (the
-                   slide at items.size / 2). Defaults to :middle for the spotlight,
-                   so both halves of the row hold a slide at load, and to 0 for a
-                   standard row. The browser sets it before the first paint where
+                   slide at items.size / 2). Defaults to :middle for a spotlight
+                   that does not loop, so both halves of the row hold a slide at
+                   load, and to 0 for a standard row and for a looping spotlight
+                   (its wrap already shows the last slide left of the first, so it
+                   opens on the host's first item). An explicit start: wins. The browser sets it before the first paint where
                    it has scroll-initial-target; elsewhere the controller sets it
                    when it connects, with no glide and nothing announced. A link
                    to an id inside the row (#fragment) wins over the start.
-      loop         true wraps the row: Next at the last slide goes to the first,
-                   Previous at the first to the last, and neither arrow is ever
-                   disabled. No slide is cloned, so a screen reader reads each once.
+      loop         true wraps the row, and a row of more than one slide is
+                   visually continuous: the controller copies the last slides
+                   before the first and the first after the last, so the first
+                   slide centred shows the last beside it. Next at the last slide
+                   glides on to the first, Previous at the first back to the last,
+                   then the row jumps silently onto the real slide (no glide under
+                   reduced motion), and neither arrow is ever disabled. A copy is
+                   aria-hidden and inert, with no id, name, test hook or controller,
+                   so a screen reader and Tab meet each slide once, a #fragment
+                   finds the real slide, and the dots and "slide N of M" count the
+                   real slides. Every slide of a looping row is a stop.
       autoplay     seconds between moves (a number above 0); nil, the default, is
                    off. The row moves one slide each interval and holds still while
                    the pointer is over the slides, while keyboard focus is in it,
@@ -75,7 +85,11 @@
               when "spotlight" then true
               else raise ArgumentError, "studio/carousel style: #{style.inspect} is not :standard or :spotlight"
               end
-  start = spotlight ? :middle : 0 if start.nil?
+  loop = loop ? true : false
+  wraps = loop && total > 1
+  # A looping spotlight has a left neighbour at its first slide (the clones), so it
+  # opens there; one that does not loop opens mid-row so neither half is empty.
+  start = spotlight && !wraps ? :middle : 0 if start.nil?
   start_index = case start
                 when :middle, "middle" then total / 2
                 when Integer then start.clamp(0, [total - 1, 0].max)
@@ -86,8 +100,6 @@
     raise ArgumentError, "studio/carousel autoplay: #{autoplay.inspect} is not a number of seconds above 0 or nil"
   end
   autoplay = autoplay.to_i if autoplay && autoplay == autoplay.floor
-  loop = loop ? true : false
-  wraps = loop && total > 1
   arrow_noun = spotlight ? "slide" : "slides"
   track_id = id.presence || "carousel-#{label.to_s.parameterize.presence || 'slides'}"
 %>

data/app/views/studio/site_footer/_assets.html.erb

@@ -81,9 +81,32 @@
   .ftr-kit { margin: .75rem 0 0; }
   .ftr-socials { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
   .ftr-social { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
-    border-radius: 9999px; background: var(--ftr-primary); color: #fff; transition: transform .15s ease, filter .15s ease; }
-  a.ftr-social:hover { transform: translateY(-2px); filter: brightness(1.12); }
-  .ftr-social[data-pending] { background: transparent; color: inherit; opacity: .5; border: 1px dashed currentColor; }
+    border-radius: 9999px; background: var(--ftr-primary); color: #fff;
+    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
+  /* LIT, LIKE THE BUTTONS, IN EVERY APP. A linked disc wears the glass lit button's
+     family (engine.css, html[data-surface-style="glass"] .btn-primary): a top
+     highlight, a bottom edge, a contact shadow and a soft glow in its own fill.
+     Each light reads the button's --lit-* token, which only a glass page defines,
+     and falls back to the button's own value, so a flat-surface app shades the
+     same way. The gradient runs from the fill DOWN only (never lighter than
+     --ftr-primary), so the white glyph never loses contrast; a browser without
+     relative oklch keeps the flat fill and the shadows. The glow is drawn from
+     --ftr-primary-rgb, which every browser reads. */
+  .ftr { --ftr-lit-top: var(--lit-top, inset 0 1px 0 rgb(255 255 255 / .35));
+    --ftr-lit-bottom: var(--lit-bottom, inset 0 -2px 0 rgb(0 0 0 / .2));
+    --ftr-lit-contact: var(--lit-contact, 0 1px 2px rgb(0 0 0 / .4)); --ftr-lit-glow-alpha: var(--lit-glow-alpha, .6); }
+  .dark .ftr { --ftr-lit-bottom: var(--lit-bottom, inset 0 -2px 0 rgb(0 0 0 / .3));
+    --ftr-lit-contact: var(--lit-contact, 0 1px 2px rgb(0 0 0 / .65)); --ftr-lit-glow-alpha: var(--lit-glow-alpha, .8); }
+  a.ftr-social { background-image: linear-gradient(var(--ftr-primary), oklch(from var(--ftr-primary) calc(l - .08) c h));
+    box-shadow: var(--ftr-lit-top), var(--ftr-lit-bottom), var(--ftr-lit-contact),
+      0 4px 12px -4px rgb(var(--ftr-primary-rgb) / var(--ftr-lit-glow-alpha)); }
+  /* Hover lifts and deepens, as the lit button darkens (brightness .94): never
+     brighter, which would fade the white glyph. */
+  a.ftr-social:hover { transform: translateY(-2px); filter: brightness(.94);
+    box-shadow: var(--ftr-lit-top), var(--ftr-lit-bottom), var(--ftr-lit-contact),
+      0 8px 16px -6px rgb(var(--ftr-primary-rgb) / var(--ftr-lit-glow-alpha)); }
+  /* A pending handle stays a flat dashed outline: no light, no shadow. */
+  .ftr-social[data-pending] { background: transparent; color: inherit; opacity: .5; border: 1px dashed currentColor; box-shadow: none; }
   .ftr-social-letter { font-weight: 700; font-size: .95rem; line-height: 1; }
   .ftr-heading { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; color: var(--ftr-ink); }
   .ftr-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }

data/docs/SITE_FOOTER.md

@@ -242,8 +242,9 @@ Rows may be tuples, as above, or hashes (`{ label:, href: }`, `{ heading:, links
   from 0.5 to 4; anything else is ignored. Without one, the first column is 1.5
   and the rest are 1 (the brand, from 1024px, is 1.7). Below 768px the two tracks
   are fixed at 1.2 and 1, and with more than four columns the hints are not used.
+- **A linked social icon is lit like the buttons**, in every app, light and dark: a top highlight, an edge and a soft shadow in `--color-primary`.
 - **A social profile with a `nil` URL** renders its icon unlinked, with a dashed
-  outline. The engine draws `:linkedin`, `:instagram`, `:x`, `:facebook` and
+  outline and no shading. The engine draws `:linkedin`, `:instagram`, `:x`, `:facebook` and
   `:youtube`; any other icon falls back to the label's first letter.
 
 ### The address and the map

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.133.2"
+  VERSION = "0.134.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: studio-engine
 version: !ruby/object:Gem::Version
-  version: 0.133.2
+  version: 0.134.0
 platform: ruby
 authors:
 - Alex McRitchie