@port60/template-kit 0.15.0 → 0.17.0

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

@@ -332,6 +332,29 @@ input:focus {
   font-weight: 800;
 }
 
+/* Compact forms for crowded headers. The `nav` behaviour steps is-fit-1..3 onto a template's nav
+   root when its row wraps or overflows (docs/template-behaviours.md); these are the platform's
+   defaults for what the island gives up at each step, the way Shopify's Shop button shrinks to
+   its mark: first the Port60 ID wordmark, then the text, leaving the person icon with its
+   accessible label intact. A template restyles by matching the same classes. */
+[data-p60-nav].is-fit-1 .nav-p60-signin .p60-mark {
+  display: none;
+}
+[data-p60-nav].is-fit-2 .nav-p60-signin .nav-p60-signin-label,
+[data-p60-nav].is-fit-2 .nav-account-name,
+[data-p60-nav].is-fit-2 .nav-account-caret {
+  display: none;
+}
+[data-p60-nav].is-fit-2 .nav-p60-signin.nav-p60-signin,
+[data-p60-nav].is-fit-2 .nav-account-toggle.nav-account-toggle.nav-account-toggle {
+  padding-left: 0.7rem;
+  padding-right: 0.7rem;
+}
+[data-p60-nav].is-fit-2 .nav-account-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 /* Members account pill (signed in) — a clear "this is your account" affordance, weighted between
    plain nav links and the Donate CTA. The menu anchors right (it's the last nav item).
    `.open` mirrors hover/focus for touch. Unscoped — island chrome, identical in any template's
@@ -2556,6 +2579,300 @@ textarea.p60-form-control {
   border-color: var(--primary-strong);
 }
 
+/* ---- Volunteer sign-up widget (components/VolunteerWidget.tsx) ----
+   Reuses the donate card vocabulary (.donate-card/.donate-head/.field/.donate-submit/.donate-success)
+   so a themed donate card themes this too; vol-* covers what is specific to asking for help. */
+.vol-search input,
+.vol-form input:not([type='checkbox']):not([type='radio']),
+.vol-form select,
+.vol-form textarea {
+  width: 100%;
+  border: 1.5px solid var(--line);
+  border-radius: 12px;
+  padding: 0.7rem 0.85rem;
+  font: inherit;
+  line-height: 1.45;
+  color: var(--ink);
+  background: var(--surface);
+}
+
+.vol-search input:focus,
+.vol-form input:not([type='checkbox']):not([type='radio']):focus,
+.vol-form select:focus,
+.vol-form textarea:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px var(--primary-soft);
+}
+
+/* The steps live in a body of ONE height (owner rule: the hero widget must not grow and jump
+   between steps). Lists scroll inside it; a step shorter than the body leaves quiet space. */
+.vol-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.vol-body--list {
+  height: 32rem;
+  overflow: hidden;
+}
+
+.vol-body--form {
+  min-height: 32rem;
+}
+
+.vol-list {
+  display: grid;
+  gap: 0.6rem;
+  align-content: start;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 0.2rem;
+  scrollbar-gutter: stable;
+}
+
+.vol-body > .vol-form,
+.vol-body > .vol-chosen,
+.vol-body > .vol-search {
+  flex: none;
+}
+
+.vol-group {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.vol-group-label {
+  margin: 0.2rem 0 0;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.vol-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  width: 100%;
+  text-align: start;
+  border: 1.5px solid var(--line);
+  background: var(--surface);
+  color: var(--ink);
+  border-radius: 12px;
+  padding: 0.85rem 1rem;
+  font: inherit;
+  cursor: pointer;
+  transition: border-color 0.16s ease, background 0.16s ease;
+}
+
+.vol-option:hover,
+.vol-option:focus-visible {
+  border-color: var(--primary);
+  background: var(--primary-soft);
+  outline: none;
+}
+
+.vol-option-main {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.vol-option-summary {
+  font-size: 0.88rem;
+  color: var(--muted);
+  line-height: 1.35;
+}
+
+.vol-option-meta {
+  display: grid;
+  gap: 0.2rem;
+  justify-items: end;
+  flex-shrink: 0;
+  text-align: end;
+}
+
+.vol-needed {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--primary-strong);
+  white-space: nowrap;
+}
+
+.vol-needed.is-full {
+  color: var(--muted);
+}
+
+.vol-shift-count {
+  font-size: 0.78rem;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.vol-chosen {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  padding: 0.7rem 0.9rem;
+  border-radius: 12px;
+  background: var(--primary-soft);
+  font-size: 0.92rem;
+}
+
+.vol-chosen-shift {
+  display: block;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.vol-form {
+  display: grid;
+  gap: 0.9rem;
+}
+
+.vol-optional {
+  font-style: normal;
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.vol-availability {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.vol-availability legend {
+  font-weight: 600;
+  font-size: 0.9rem;
+  line-height: 1.4;
+  padding: 0;
+  margin-bottom: 0.4rem;
+}
+
+/* The When row is a select or a chip row; both sit on the same box height so the panel never
+   changes height when the choice above changes. */
+.vol-form select,
+.vol-chip {
+  box-sizing: border-box;
+  min-height: 3.1rem;
+}
+
+.vol-form .field > span {
+  line-height: 1.4;
+}
+
+.vol-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.vol-summary-needed {
+  color: var(--primary-strong);
+  font-weight: 700;
+  text-transform: capitalize;
+}
+
+.vol-chip {
+  flex: 1 1 0;
+  border: 1.5px solid var(--line);
+  background: var(--surface);
+  color: var(--ink);
+  border-radius: 999px;
+  /* The same vertical rhythm as a select in this form, so the When row never changes height. */
+  padding: 0.7rem 0.4rem;
+  font: inherit;
+  font-size: 0.86rem;
+  line-height: 1.45;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.vol-chip.selected {
+  border-color: var(--primary);
+  background: var(--primary);
+  color: #fff;
+}
+
+
+.vol-why {
+  text-align: center;
+}
+
+.vol-form select {
+  appearance: none;
+  -webkit-appearance: none;
+  padding-right: 2.4rem;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.9rem center;
+}
+
+.vol-form select:disabled {
+  opacity: 0.6;
+}
+
+.vol-summary {
+  margin: -0.3rem 0 0;
+  font-size: 0.86rem;
+  line-height: 1.4;
+  min-height: calc(0.86rem * 1.4 * 2);
+  color: var(--muted);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.vol-field-error {
+  display: block;
+  font-style: normal;
+  font-size: 0.8rem;
+  line-height: 1.3;
+  color: var(--danger, #b3261e);
+}
+
+.vol-form .field.has-error input,
+.vol-form .field.has-error select {
+  border-color: var(--danger, #b3261e);
+}
+
+.vol-signed-in {
+  margin: 0;
+}
+
+.vol-extra {
+  display: grid;
+  gap: 0.9rem;
+  padding: 0.9rem;
+  border: 1px dashed var(--line);
+  border-radius: 12px;
+}
+
+.vol-extra .p60-form-heading {
+  margin: 0;
+  font-size: 1rem;
+}
+
+@media (max-width: 560px) {
+  .vol-option {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .vol-option-meta {
+    justify-items: start;
+    text-align: start;
+  }
+}
+
 /* ---- Members area (shell + sections; see components/members/) ----
    Desktop: left rail + content. Small screens: the rail becomes a horizontal, scrollable pill
    strip above the content — same registry, no separate mobile markup. */

package/src/vendor/validator/preview.mjs

@@ -143,6 +143,17 @@ function islandSkeleton(name, ctx = {}, fx = STUDIO_FX) {
         <label class="newsletter-label">Email address</label><div class="newsletter-fields"><input class="newsletter-email" type="email" disabled><button class="newsletter-submit" type="button" disabled>Join our newsletter</button></div>
         <label class="newsletter-consent"><input type="checkbox" disabled><span>Email me about our work and appeals.</span></label>
       </form>`;
+    case 'primary_action':
+      return islandSkeleton('donation_widget', ctx, fx).replace('data-p60-preview-island="donation_widget"', 'data-p60-preview-island="primary_action"');
+    case 'volunteer_signup':
+      return `<section class="donate-card vol-card" data-p60-preview-island="volunteer_signup">
+        ${previewNote(name)}
+        <header class="donate-head"><h2>Volunteer with us</h2><p class="donate-sub">Where would you like to help?</p></header>
+        <div class="vol-list">
+          <div class="vol-group"><p class="vol-group-label">General</p><button class="vol-option" type="button" disabled><span class="vol-option-main"><strong>Help out where needed</strong><span class="vol-option-summary">A few hours a month, wherever the team needs a hand.</span></span><span class="vol-option-meta"><span class="vol-needed">Everyone welcome</span></span></button></div>
+          <div class="vol-group"><p class="vol-group-label">Events</p><button class="vol-option" type="button" disabled><span class="vol-option-main"><strong>Spring fair stewards</strong><span class="vol-option-summary">Welcome visitors and keep the day running.</span></span><span class="vol-option-meta"><span class="vol-needed">6 volunteers needed</span><span class="vol-shift-count">3 shifts</span></span></button></div>
+        </div>
+      </section>`;
     case 'language_switch':
       return `<label class="language-switch" data-p60-preview-island="language_switch">${previewNote(name)}<span class="language-switch-label">Language</span><select class="language-switch-select" disabled><option>English</option><option>Cymraeg</option><option>العربية</option></select></label>`;
     case 'search':

package/src/vendor/validator/validate.mjs

@@ -99,7 +99,8 @@ export async function validateArtifact(files) {
       locations: () => sections.has('locations'),
       newsletter: () => islands.has('newsletter_signup'),
       i18n: () => islands.has('language_switch'),
-      search: () => islands.has('search')
+      search: () => islands.has('search'),
+      volunteering: () => islands.has('volunteer_signup') || islands.has('primary_action')
     };
     for (const capability of manifest?.requiresCapabilities ?? []) {
       if (!capabilitySurface[capability]?.()) {
@@ -108,6 +109,19 @@ export async function validateArtifact(files) {
     }
   }
 
+  // Site focus honesty (docs/volunteering.md): a template that claims it can lead with
+  // volunteering must give the volunteer sign-up a way into the hero, either the composite
+  // primary_action island or the volunteer_signup island placed directly.
+  {
+    const focusKinds = new Set(manifest?.supports?.focus ?? []);
+    if (focusKinds.has('volunteer')) {
+      const liquidSource = Object.entries(files).filter(([path]) => path.endsWith('.liquid')).map(([, s]) => s).join('\n');
+      if (!/island\s+['"]primary_action['"]/.test(liquidSource) && !/island\s+['"]volunteer_signup['"]/.test(liquidSource)) {
+        errors.push("manifest: supports.focus lists 'volunteer' but no section places {% island 'primary_action' %} (or 'volunteer_signup'), so the site could never lead with volunteering");
+      }
+    }
+  }
+
   // Markup and attributes, NEVER code — the machine-enforced JavaScript ban over every liquid
   // source (docs/template-behaviours.md). Behaviour is engine-owned; a template wanting motion
   // declares supports.behaviors and uses the data-p60-* grammar.

package/starter/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "starter",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "format": "port60-liquid@1",
   "label": "Starter",
   "description": "The reference template for the Port60 dialect, the developer docs' worked example and the base to copy when building your own. 1.1.0 adds the layout slot: the template owns the header, navigation and footer chrome.",
@@ -22,13 +22,18 @@
       "donation_widget",
       "member_menu",
       "hero_carousel",
-      "map"
+      "map",
+      "primary_action"
     ],
     "layout": true,
     "heroImagery": true,
     "behaviors": [
       "reveal",
       "carousel"
+    ],
+    "focus": [
+      "donate",
+      "volunteer"
     ]
   },
   "settings": {

package/starter/sections/homeHero.liquid

@@ -31,7 +31,7 @@
 {% endif %}
 {% assign heroFraming = section.photoFraming | default: 'fill' %}
 {% if heroCount > 0 and heroFraming == 'whole' %}
-{% if section.givingStyle == 'button' %}
+{% if section.actionStyle == 'button' or section.givingStyle == 'button' %}
 <section class="lq-homehero lq-homehero--vista{% if heroCount > 1 %} lq-homehero--carousel{% endif %}">
   <div class="lq-vista">
     <img class="lq-vista-sizer" src="{{ section.images.first.imageUrl }}" alt="{{ section.images.first.alt }}" style="object-position: {{ heroFocus }}" fetchpriority="high" decoding="async">
@@ -63,12 +63,13 @@
       <h1>{{ section.title | default: site.brand.tagline | default: site.brand.name }}</h1>
       {% if section.lead %}<p class="lq-homehero-lead">{{ section.lead }}</p>{% endif %}
       <div class="lq-homehero-actions">
-        <a class="button button-primary" href="#donate">{{ section.primaryLabel | default: 'Donate now' }}</a>
+        {% if section.action or section.primaryLabel %}<a class="button button-primary" href="{{ section.primaryHref | default: section.action.href | default: '#donate' }}">{{ section.primaryLabel | default: section.action.label | default: 'Donate now' }}</a>{% endif %}
         <a class="button" href="{{ section.secondaryHref | default: '/about' }}">{{ section.secondaryLabel | default: 'Our story' }}</a>
       </div>
     </div>
     <aside id="donate">
-      {% island 'donation_widget' %}
+      {%- comment -%} The site focus decides which widget leads (section.primary); the composite island mounts it. {%- endcomment -%}
+      {% island 'primary_action' %}
     </aside>
   </div>
 </section>
@@ -97,17 +98,17 @@
       <h1>{{ section.title | default: site.brand.tagline | default: site.brand.name }}</h1>
       {% if section.lead %}<p class="lq-homehero-lead">{{ section.lead }}</p>{% endif %}
       <div class="lq-homehero-actions">
-        {% if section.givingStyle == 'button' %}
-        <a class="button button-primary" href="{{ section.primaryHref | default: '/donate' }}">{{ section.primaryLabel | default: 'Donate now' }}</a>
+        {% if section.actionStyle == 'button' or section.givingStyle == 'button' %}
+        {% if section.action or section.primaryLabel %}<a class="button button-primary" href="{{ section.primaryHref | default: section.action.href | default: '/donate' }}">{{ section.primaryLabel | default: section.action.label | default: 'Donate now' }}</a>{% endif %}
         {% else %}
-        <a class="button button-primary" href="#donate">{{ section.primaryLabel | default: 'Donate now' }}</a>
+        {% if section.action or section.primaryLabel %}<a class="button button-primary" href="{{ section.primaryHref | default: section.action.href | default: '#donate' }}">{{ section.primaryLabel | default: section.action.label | default: 'Donate now' }}</a>{% endif %}
         {% endif %}
         <a class="button" href="{{ section.secondaryHref | default: '/about' }}">{{ section.secondaryLabel | default: 'Our story' }}</a>
       </div>
     </div>
-    {% unless section.givingStyle == 'button' %}
+    {% unless section.actionStyle == 'button' or section.givingStyle == 'button' %}
     <aside id="donate">
-      {% island 'donation_widget' %}
+      {% island 'primary_action' %}
     </aside>
     {% endunless %}
   </div>