@port60/template-kit 0.20.1 → 0.20.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@port60/template-kit",
-  "version": "0.20.1",
+  "version": "0.20.3",
   "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/v1/islands.json

@@ -191,7 +191,7 @@
       "name": "search",
       "label": "Site search",
       "status": "available",
-      "description": "Searches published articles, programmes, events and public resources. It reads public projections only and cannot search member, payment, private media or admin data.",
+      "description": "The site's search box: a typeahead over the platform's search index (articles, events, services, campaigns, appeals, volunteering and public documents; published and live rows only, never member, payment, private media or admin data). Suggestions are the things themselves, grouped by kind, each a direct link, with a matched-text line when the hit was in the body; Enter or the last row goes to the platform's /search results page. An accessible combobox: the active suggestion carries is-active. Where the box sits is the template's decision.",
       "params": [],
       "stylingApi": [
         ".site-search",
@@ -205,7 +205,11 @@
         ".site-search-kind",
         ".site-search-link",
         ".site-search-summary",
-        ".site-search-empty"
+        ".site-search-empty",
+        ".site-search-title",
+        ".site-search-context",
+        ".site-search-more",
+        ".site-search-corrected"
       ]
     },
     {

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

@@ -4732,3 +4732,239 @@ textarea.p60-form-control {
   justify-content: center;
   text-align: center;
 }
+
+/* ---- Site search (docs/search.md) ----
+   The typeahead island (a template places it; the platform styles the box and its suggestions)
+   and the platform's /search results page. Suggestions are a listbox under the box: the kind
+   label, the title, a date or place, and the matched-text line with the hit words emphasised. */
+.site-search {
+  position: relative;
+}
+.site-search-form {
+  margin: 0;
+}
+.site-search-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+.site-search-fields {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.site-search-input {
+  min-width: 12rem;
+  padding: 0.55rem 0.95rem;
+  border-radius: 999px;
+}
+/* Named in every theme: the placeholder is the theme's ink at half strength, never the generic
+   muted grey, which vanishes on a dark masthead. */
+.site-search-input::placeholder {
+  color: color-mix(in srgb, var(--ink) 55%, transparent);
+  opacity: 1;
+}
+.site-search-submit {
+  padding: 0.55rem 0.95rem;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--ink);
+  font-weight: 600;
+  cursor: pointer;
+}
+.site-search-submit:hover {
+  background: var(--bg-tint);
+}
+.site-search-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 70;
+  min-width: min(26rem, calc(100vw - 2rem));
+  max-height: 70vh;
+  overflow: auto;
+  margin: 0.35rem 0 0;
+  padding: 0.4rem;
+  list-style: none;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  box-shadow: var(--shadow);
+  text-align: left;
+}
+.site-search-link {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 0.6rem;
+  row-gap: 0.15rem;
+  align-items: baseline;
+  padding: 0.55rem 0.65rem;
+  border-radius: 10px;
+  color: var(--ink);
+  font-weight: 500;
+}
+.site-search-result.is-active .site-search-link,
+.site-search-link:hover {
+  background: var(--bg-tint);
+}
+.site-search-kind {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.site-search-title {
+  font-weight: 600;
+}
+.site-search-context,
+.site-search-summary {
+  grid-column: 2;
+  font-size: 0.85rem;
+  font-weight: 400;
+  color: var(--muted);
+}
+.site-search-summary mark {
+  background: transparent;
+  color: var(--ink);
+  font-weight: 700;
+}
+.site-search-more .site-search-link {
+  grid-template-columns: 1fr;
+  color: var(--primary);
+  font-weight: 600;
+}
+.site-search-empty,
+.site-search-corrected {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 70;
+  min-width: min(26rem, calc(100vw - 2rem));
+  margin: 0.35rem 0 0;
+  padding: 0.65rem 0.8rem;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  box-shadow: var(--shadow);
+  font-size: 0.9rem;
+  color: var(--muted);
+  text-align: left;
+}
+.site-search-corrected {
+  top: auto;
+  bottom: 100%;
+  margin: 0 0 0.35rem;
+}
+/* In the primary nav the box stays compact and grows on focus; Enter searches, so the button rests. */
+/* In a header nav the box is compact and grows on focus; the submit button is the Enter key.
+   Keyed off default's .site-nav AND the layout behaviour API's #site-nav (in attribute form on
+   purpose: class-level specificity, so a template can still override with two classes of its own),
+   so every artifact template's primary nav gets the same compact box whatever its class is called. */
+.site-nav .site-search,
+[id="site-nav"] .site-search {
+  margin-inline-start: 0.35rem;
+}
+.site-nav .site-search-input,
+[id="site-nav"] .site-search-input {
+  width: 9rem;
+  min-width: 0;
+  padding: 0.45rem 0.85rem;
+  font-size: 0.92rem;
+  transition: width 0.16s ease;
+}
+.site-nav .site-search-input:focus,
+[id="site-nav"] .site-search-input:focus {
+  width: 12.5rem;
+}
+.site-nav .site-search-submit,
+[id="site-nav"] .site-search-submit {
+  display: none;
+}
+.site-nav .site-search-results,
+[id="site-nav"] .site-search-results,
+.site-nav .site-search-empty,
+[id="site-nav"] .site-search-empty,
+.site-nav .site-search-corrected,
+[id="site-nav"] .site-search-corrected {
+  right: 0;
+  left: auto;
+}
+@media (max-width: 860px) {
+  .site-nav .site-search,
+  [id="site-nav"] .site-search {
+    margin: 0.5rem 0;
+  }
+  .site-nav .site-search-input,
+  [id="site-nav"] .site-search-input,
+  .site-nav .site-search-input:focus,
+  [id="site-nav"] .site-search-input:focus {
+    width: 100%;
+  }
+  .site-nav .site-search-results,
+  [id="site-nav"] .site-search-results,
+  .site-nav .site-search-empty,
+  [id="site-nav"] .site-search-empty,
+  .site-nav .site-search-corrected,
+  [id="site-nav"] .site-search-corrected {
+    position: static;
+    min-width: 0;
+    box-shadow: none;
+  }
+}
+
+/* The results page: breadcrumb rows, full width like every page body. */
+.search-hits {
+  margin: 1rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+.search-hit {
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--line);
+}
+.search-hit-crumb {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.search-hit-title {
+  display: inline-block;
+  margin-top: 0.2rem;
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: var(--primary);
+}
+.search-hit-title:hover {
+  text-decoration: underline;
+}
+.search-hit-snippet {
+  margin: 0.35rem 0 0;
+  color: var(--muted);
+}
+.search-hit-snippet mark {
+  background: transparent;
+  color: var(--ink);
+  font-weight: 700;
+}
+.search-corrected,
+.search-empty {
+  color: var(--muted);
+}
+.search-filters {
+  margin-top: 1rem;
+}
+.search-page-box {
+  max-width: 40rem;
+  margin: 1rem 0 1.5rem;
+}
+.search-page-box .site-search-input {
+  flex: 1 1 auto;
+}

package/starter/layout.liquid

@@ -3,7 +3,7 @@
   chrome classes (.site-header/.site-nav/…) so the base mechanics (sticky header, burger
   breakpoint, dropdown hover) apply, and emits the documented behaviour attributes
   (data-nav-burger, #site-nav) so the platform tail script wires the mobile burger. Identity is
-  PLACED, never rebuilt: {% island 'member_menu' %}. The footer derives everything from brand/nav, no fabricated copy (derive or omit).
+  PLACED, never rebuilt: {% island 'member_menu' %} and {% island 'search' %}. The footer derives everything from brand/nav, no fabricated copy (derive or omit).
 {% endcomment %}
 <header class="site-header">
   <div class="container header-inner">
@@ -42,6 +42,7 @@
           <a href="{{ item.href }}"{% if item.external %} target="_blank" rel="noopener"{% endif %}>{{ item.label }}</a>
         {% endif %}
       {% endfor %}
+      {% island 'search' %}
       {% island 'member_menu' %}
     </nav>
   </div>

package/starter/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "starter",
-  "version": "1.12.0",
+  "version": "1.13.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.",
@@ -23,7 +23,8 @@
       "member_menu",
       "hero_carousel",
       "map",
-      "primary_action_widget"
+      "primary_action_widget",
+      "search"
     ],
     "layout": true,
     "heroImagery": true,
@@ -53,7 +54,7 @@
       }
     ]
   },
-  "changelog": "Adds the impact map section: pin your located work on a themed map of where you work.",
+  "changelog": "Places the site search box in the header: a typeahead across events, articles, services, campaigns, appeals, volunteering and documents, with the results page at /search.",
   "imagery": {
     "hero": {
       "idealAspect": "16:9",