@port60/template-kit 1.2.0 → 1.2.1

package/README.md

@@ -50,11 +50,19 @@ See the [AI quickstart](https://developers.port60.com/guides/ai-quickstart/).
 
 ## The contract
 
-Kit 1.2.0 authors **port60-liquid@2**, content model **2.0**, using the contract under
+Kit 1.2.1 authors **port60-liquid@2**, content model **2.0**, using the contract under
 `src/vendor/contract/v2`. Collection envelopes, independent header/footer navigation,
 resolved actions and page-scoped sections are explicit. V1 sources need a deliberate migration,
 not a manifest-only relabel. Historical v1 contracts remain frozen for existing platform pins.
 
+### Photo-only hero playback in 1.2.1
+
+The compatible host supplies `.hero-playback` on the `hero_carousel` island. Photo-only
+templates may hide the optional dots and reveal playback on hover or keyboard focus,
+while retaining a reachable control on touch devices. The preview supplies inactive
+geometry only. Campaign/content carousel controls are unchanged. Deploy the compatible
+host before publishing templates that depend on this control.
+
 ### Optional editor controls in 1.2.0
 
 The editor only offers controls supported by the exact selected template version. Declare

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@port60/template-kit",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Build Port60 site templates locally: scaffold, live-preview, validate against the platform contract, and package for studio upload. AI-agent ready: every scaffold ships AGENTS.md and validate emits machine-readable JSON.",
   "type": "module",
   "bin": {

package/src/vendor/contract/v2/islands.json

@@ -106,7 +106,7 @@
       "name": "hero_carousel",
       "label": "Hero image carousel",
       "status": "available",
-      "description": "Rotation for the home hero's photographs (homeHero.images, 2+): auto-advance every ~6s, pauses on hover/focus, honours prefers-reduced-motion (no auto-advance), swipe on touch, dot navigation. The platform owns the motion; the TEMPLATE owns the look, including the tonal treatment: every slide ships an empty .hero-slide-scrim layer over its image, and the template colours it from its OWN palette variables (a colour wash, a blend, a gradient) so any uploaded photo sits inside the template's tones. Renders nothing with fewer than 2 images, single-image and no-image states are the template's own renderer, not this island's.",
+      "description": "Photo-only rotation for homeHero.images (2+): advances every ~6s, pauses on hover and offers persistent Pause/Resume. Keyboard navigation or focus outside that button stops rotation until explicitly resumed. Reduced motion prevents autoplay, including after a live preference change. Supports horizontal touch swipe and direction-aware arrow keys, Home/End, plus optional dot navigation. Templates may hide dots when the .hero-playback control exists. They may reveal playback on photograph hover and keyboard focus, but must retain keyboard reachability, a visible focus indicator and a control that is available without hover on touch devices. This is separate from campaign/content carousels. The platform owns motion; the template styles the frame and the empty .hero-slide-scrim tonal layer using its palette. Fewer than 2 images render nothing: the template owns single/no-image states.",
       "params": [],
       "stylingApi": [
         ".hero-carousel",
@@ -117,7 +117,8 @@
         ".hero-slide-scrim",
         ".hero-dots",
         ".hero-dot",
-        ".hero-dot--active"
+        ".hero-dot--active",
+        ".hero-playback"
       ]
     },
     {

package/src/vendor/contract/v2.lock.json

@@ -5568,7 +5568,7 @@
           "name": "hero_carousel",
           "label": "Hero image carousel",
           "status": "available",
-          "description": "Rotation for the home hero's photographs (homeHero.images, 2+): auto-advance every ~6s, pauses on hover/focus, honours prefers-reduced-motion (no auto-advance), swipe on touch, dot navigation. The platform owns the motion; the TEMPLATE owns the look, including the tonal treatment: every slide ships an empty .hero-slide-scrim layer over its image, and the template colours it from its OWN palette variables (a colour wash, a blend, a gradient) so any uploaded photo sits inside the template's tones. Renders nothing with fewer than 2 images, single-image and no-image states are the template's own renderer, not this island's.",
+          "description": "Photo-only rotation for homeHero.images (2+): advances every ~6s, pauses on hover and offers persistent Pause/Resume. Keyboard navigation or focus outside that button stops rotation until explicitly resumed. Reduced motion prevents autoplay, including after a live preference change. Supports horizontal touch swipe and direction-aware arrow keys, Home/End, plus optional dot navigation. Templates may hide dots when the .hero-playback control exists. They may reveal playback on photograph hover and keyboard focus, but must retain keyboard reachability, a visible focus indicator and a control that is available without hover on touch devices. This is separate from campaign/content carousels. The platform owns motion; the template styles the frame and the empty .hero-slide-scrim tonal layer using its palette. Fewer than 2 images render nothing: the template owns single/no-image states.",
           "params": [],
           "stylingApi": [
             ".hero-carousel",
@@ -5579,7 +5579,8 @@
             ".hero-slide-scrim",
             ".hero-dots",
             ".hero-dot",
-            ".hero-dot--active"
+            ".hero-dot--active",
+            ".hero-playback"
           ]
         },
         {

package/src/vendor/validator/platform-base.css

@@ -8,6 +8,29 @@
    template ships a themeCss injected at body-end. Fonts load from the layout <head> (preconnect +
    stylesheet link) instead of a CSS @import, an @import chains render-blocking requests. */
 
+/* Photo-only hero rotation. Templates style these hooks, not the campaign carousel. */
+.hero-carousel .hero-playback {
+  position: absolute; z-index: 5; inset-block-start: 12px; inset-inline-end: 12px;
+  display: grid; place-items: center; width: 44px; height: 44px; padding: 8px;
+  border: 1px solid #ffffffb3; border-radius: 50%; background: #14241ce6; color: #fff;
+  cursor: pointer; touch-action: manipulation;
+}
+.hero-carousel .hero-playback svg { width: 20px; height: 20px; fill: currentColor; }
+.hero-carousel .hero-playback:disabled { cursor: default; opacity: .65; }
+.hero-carousel:focus-visible, .hero-carousel .hero-playback:focus-visible {
+  outline: 2px solid var(--ink); outline-offset: 4px;
+}
+.hero-carousel .hero-playback[hidden], .hero-carousel .hero-dots[hidden] { display: none !important; }
+.hero-carousel-instructions {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .hero-carousel .hero-slide, .hero-carousel .hero-slide-img {
+    animation: none !important; transition: none !important;
+  }
+}
+
 :root {
   --bg: #fbf6ef;
   --bg-tint: #f4ece1;

package/src/vendor/validator/preview-v2.mjs

@@ -115,6 +115,7 @@ function islandSkeleton(name, ctx = {}, fx = STUDIO_FX) {
       return `<section class="hero-carousel" data-p60-preview-island="hero_carousel">
         ${previewNote(name)}
         <div class="hero-slides">${slides}</div>
+        <button class="hero-playback" type="button" aria-label="Pause photographs" disabled><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 5h4v14H7zm6 0h4v14h-4z" /></svg></button>
         <div class="hero-dots" aria-hidden="true">${Array.from({ length: dots }, (_, i) => `<span class="hero-dot${i === 0 ? ' hero-dot--active' : ''}"></span>`).join('')}</div>
       </section>`;
     }