@lilydesignsystem/nunjucks-picker-bar 0.1.0 → 0.3.0

package/dist/index.d.ts

@@ -1,3 +1,7 @@
+import { initLinkPicker } from '@lilydesignsystem/nunjucks-link-picker';
+export { autoInit as autoInitLinkPicker } from '@lilydesignsystem/nunjucks-link-picker';
+import { initSearchPicker } from '@lilydesignsystem/nunjucks-search-picker';
+export { autoInit as autoInitSearchPicker } from '@lilydesignsystem/nunjucks-search-picker';
 import { initThemePicker } from '@lilydesignsystem/nunjucks-theme-picker';
 export { autoInit as autoInitThemePicker } from '@lilydesignsystem/nunjucks-theme-picker';
 import { initLocalePicker } from '@lilydesignsystem/nunjucks-locale-picker';
@@ -10,13 +14,14 @@ export { autoInit as autoInitSharePicker } from '@lilydesignsystem/nunjucks-shar
 // PickerBar client-side runtime.
 //
 // Pairs with picker-bar.njk. Unlike every other helper in this catalog,
-// this module owns NO lifecycle of its own: theme-picker.client.js,
-// locale-picker.client.js, text-size-picker.client.js, and
-// share-picker.client.js already own theirs, in full, independently of
+// this module owns NO lifecycle of its own: search-picker.client.js,
+// theme-picker.client.js, locale-picker.client.js,
+// text-size-picker.client.js, and share-picker.client.js already own
+// theirs, in full, independently of
 // nesting (each scans the document for its own `data-lily-*-picker-root`
-// hook). This module is a convenience wrapper that wires all four at
+// hook). This module is a convenience wrapper that wires all five at
 // once, scoped to one `picker-bar` root, instead of requiring the
-// consumer to call four separate `init*Picker` functions.
+// consumer to call five separate `init*Picker` functions.
 //
 // See spec/index.md §4.3 (client.js exports), §5 (behaviour).
 
@@ -89,25 +94,39 @@ const DEFAULT_SIZES = [
 ];
 
 /**
- * Wire the four pickers inside one `[data-lily-picker-bar-root]`
+ * Wire the five pickers inside one `[data-lily-picker-bar-root]`
  * element. Each nested picker root is found and handed to its own
  * sibling package's `init*Picker(root, opts)` — no different from
- * calling all four by hand, just in one call.
+ * calling all five by hand, just in one call. `searchProps` is where
+ * search-picker's function-valued options (`navigate`, `onSearch`) go,
+ * since a macro cannot carry a function; `action` here overrides the
+ * rendered one.
  *
  * @param {HTMLElement} root
- * @param {{themeProps?: object, localeProps?: object, textSizeProps?: object, shareProps?: object}=} opts
+ * @param {{linkProps?: object, searchProps?: object, themeProps?: object, localeProps?: object, textSizeProps?: object, shareProps?: object}=} opts
  */
 function initPickerBar(root, opts = {}) {
   if (!root) {
-    return { theme: null, locale: null, textSize: null, share: null };
+    return {
+      link: null,
+      search: null,
+      theme: null,
+      locale: null,
+      textSize: null,
+      share: null,
+    };
   }
   const {
+    linkProps = {},
+    searchProps = {},
     themeProps = {},
     localeProps = {},
     textSizeProps = {},
     shareProps = {},
   } = opts;
 
+  const linkRoot = root.querySelector("[data-lily-link-picker-root]");
+  const searchRoot = root.querySelector("[data-lily-search-picker-root]");
   const themeRoot = root.querySelector("[data-lily-theme-picker-root]");
   const localeRoot = root.querySelector("[data-lily-locale-picker-root]");
   const textSizeRoot = root.querySelector(
@@ -116,6 +135,8 @@ function initPickerBar(root, opts = {}) {
   const shareRoot = root.querySelector("[data-lily-share-picker-root]");
 
   return {
+    link: linkRoot ? initLinkPicker(linkRoot, linkProps) : null,
+    search: searchRoot ? initSearchPicker(searchRoot, searchProps) : null,
     theme: themeRoot ? initThemePicker(themeRoot, themeProps) : null,
     locale: localeRoot ? initLocalePicker(localeRoot, localeProps) : null,
     textSize: textSizeRoot
@@ -128,7 +149,7 @@ function initPickerBar(root, opts = {}) {
 /**
  * Find every `[data-lily-picker-bar-root]` and wire it.
  *
- * @param {{themeProps?: object, localeProps?: object, textSizeProps?: object, shareProps?: object}=} opts
+ * @param {{linkProps?: object, searchProps?: object, themeProps?: object, localeProps?: object, textSizeProps?: object, shareProps?: object}=} opts
  * @returns {Array<ReturnType<typeof initPickerBar>>}
  */
 function autoInit(opts = {}) {

package/dist/index.js

@@ -1,4 +1,12 @@
 // lily-design-system-nunjucks-picker-bar/picker-bar.client.js
+import {
+  initLinkPicker,
+  autoInit as autoInitLinkPicker
+} from "@lilydesignsystem/nunjucks-link-picker";
+import {
+  initSearchPicker,
+  autoInit as autoInitSearchPicker
+} from "@lilydesignsystem/nunjucks-search-picker";
 import {
   initThemePicker,
   autoInit as autoInitThemePicker
@@ -73,14 +81,25 @@ var DEFAULT_SIZES = [
 ];
 function initPickerBar(root, opts = {}) {
   if (!root) {
-    return { theme: null, locale: null, textSize: null, share: null };
+    return {
+      link: null,
+      search: null,
+      theme: null,
+      locale: null,
+      textSize: null,
+      share: null
+    };
   }
   const {
+    linkProps = {},
+    searchProps = {},
     themeProps = {},
     localeProps = {},
     textSizeProps = {},
     shareProps = {}
   } = opts;
+  const linkRoot = root.querySelector("[data-lily-link-picker-root]");
+  const searchRoot = root.querySelector("[data-lily-search-picker-root]");
   const themeRoot = root.querySelector("[data-lily-theme-picker-root]");
   const localeRoot = root.querySelector("[data-lily-locale-picker-root]");
   const textSizeRoot = root.querySelector(
@@ -88,6 +107,8 @@ function initPickerBar(root, opts = {}) {
   );
   const shareRoot = root.querySelector("[data-lily-share-picker-root]");
   return {
+    link: linkRoot ? initLinkPicker(linkRoot, linkProps) : null,
+    search: searchRoot ? initSearchPicker(searchRoot, searchProps) : null,
     theme: themeRoot ? initThemePicker(themeRoot, themeProps) : null,
     locale: localeRoot ? initLocalePicker(localeRoot, localeProps) : null,
     textSize: textSizeRoot ? initTextSizePicker(textSizeRoot, textSizeProps) : null,
@@ -105,7 +126,9 @@ export {
   DEFAULT_SIZES,
   DEFAULT_THEMES,
   autoInit,
+  autoInitLinkPicker,
   autoInitLocalePicker,
+  autoInitSearchPicker,
   autoInitSharePicker,
   autoInitTextSizePicker,
   autoInitThemePicker,

package/dist/picker-bar.njk

@@ -1,15 +1,16 @@
 {#
-  PickerBar macro — composes theme-picker, locale-picker,
-  text-size-picker, and share-picker into one page-header row.
+  PickerBar macro — composes link-picker (optional, leftmost), search-picker, theme-picker,
+  locale-picker, text-size-picker, and share-picker (in that order)
+  into one page-header row.
 
-  HTML tag: <div> (root) wrapping the four picker roots, unmodified.
+  HTML tag: <div> (root) wrapping the five picker roots, unmodified.
   CSS class: picker-bar
   Companion runtime: picker-bar.client.js (a convenience `autoInit`
-  wrapping the four siblings' own `autoInit` — see that file; there is
+  wrapping the five siblings' own `autoInit` — see that file; there is
   no picker-bar-owned lifecycle of its own).
 
   This macro owns no preference, action, or form value itself. It is a
-  composition: each of the four picker macros below is imported from
+  composition: each of the five picker macros below is imported from
   its own sibling PACKAGE (a real npm `dependency` declared in this
   package's package.json — not vendored source), and rendered with its
   own unmodified contract. `motion-picker` and `date-time-picker` are
@@ -24,6 +25,8 @@
   relative to the catalog root, exactly where `node_modules` would
   place it after a real install.
 #}
+{% from "lily-design-system-nunjucks-link-picker/dist/link-picker.njk" import linkPicker %}
+{% from "lily-design-system-nunjucks-search-picker/dist/search-picker.njk" import searchPicker %}
 {% from "lily-design-system-nunjucks-theme-picker/dist/theme-picker.njk" import themePicker %}
 {% from "lily-design-system-nunjucks-locale-picker/dist/locale-picker.njk" import localePicker %}
 {% from "lily-design-system-nunjucks-text-size-picker/dist/text-size-picker.njk" import textSizePicker %}
@@ -66,10 +69,24 @@
 ] -%}
 {#
   Params (single `opts` object):
-    labels        — object, required: { theme, locale, textSize, share }.
-                    The four accessible names. No English default — a
+    labels        — object, required: { link?, search, searchInput,
+                    searchSubmit, theme, locale, textSize, share }.
+                    `link` names the link picker's button and list and is
+                    needed only when `links` is supplied.
+                    The seven accessible names: `search` names the
+                    search picker's button and search landmark,
+                    `searchInput` its field, `searchSubmit` its ⏎
+                    button. No English default — a
                     nav row this catalog invented is exactly what the
                     i18n rule exists to prevent hardcoding.
+    links         — array<object>. Page links for the link picker (a home
+                    icon), rendered FIRST — leftmost. Defined by the app,
+                    each { label, href, id?, current?, newTab? }. Omitted or
+                    empty (or no `labels.link`): no link picker.
+    linkProps     — object. Extra link-picker opts (name, id, classes,
+                    attributes). Its function-valued options (navigate,
+                    onNavigate) cannot pass through a macro — hand them to
+                    picker-bar.client.js's `linkProps` instead.
     themesUrl     — string, required. Forwarded to theme-picker.
     locales       — array<string>, required. Forwarded to locale-picker;
                     no catalog default exists.
@@ -79,6 +96,11 @@
                     (default []). See share-picker.njk for the object
                     shape — `href` is an already-resolved string, not a
                     function, per that package's documented deviation.
+    searchProps   — object. Extra search-picker opts (placeholder,
+                    value, action, name, id, classes, attributes).
+                    Its function-valued options (navigate, onSearch)
+                    cannot pass through a macro — hand them to
+                    picker-bar.client.js's `searchProps` instead.
     themeProps    — object. Extra theme-picker opts (value, defaultValue,
                     storageKey, detectFromSystem, name, extension,
                     themeLabels, id, classes, attributes) — anything NOT
@@ -100,13 +122,16 @@
   Unlike the Svelte canonical's `children` snippet passthrough, a
   Nunjucks macro call accepts at most one `{% call %}` block, so
   picker-bar cannot route a custom glyph to one specific nested picker.
-  Compose the four macros directly if you need a custom glyph on just
+  Compose the five macros directly if you need a custom glyph on just
   one of them — see spec/index.md §4.4.
 
   Usage:
     {% from "lily-design-system-nunjucks-picker-bar/dist/picker-bar.njk" import pickerBar %}
     {{ pickerBar({
-      labels: { theme: "Theme", locale: "Language", textSize: "Text size", share: "Share" },
+      labels: {
+        search: "Search this site", searchInput: "Search terms", searchSubmit: "Search",
+        theme: "Theme", locale: "Language", textSize: "Text size", share: "Share"
+      },
       themesUrl: "/assets/themes/",
       locales: ["en", "cy"]
     }) }}
@@ -116,6 +141,8 @@
 {%- macro pickerBar(opts) -%}
 {%- set themes = opts.themes | default(DEFAULT_THEMES) -%}
 {%- set sizes = opts.sizes | default(DEFAULT_SIZES) -%}
+{%- set linkProps = opts.linkProps | default({}) -%}
+{%- set searchProps = opts.searchProps | default({}) -%}
 {%- set themeProps = opts.themeProps | default({}) -%}
 {%- set localeProps = opts.localeProps | default({}) -%}
 {%- set textSizeProps = opts.textSizeProps | default({}) -%}
@@ -125,6 +152,28 @@
   data-lily-picker-bar-root
   {%- if opts.attributes %}{% for k, v in opts.attributes %} {{ k }}="{{ v }}"{% endfor %}{% endif %}
 >
+{%- if opts.links and opts.links.length > 0 and opts.labels.link -%}
+{{ linkPicker({
+  label: opts.labels.link,
+  links: opts.links,
+  name: linkProps.name,
+  id: linkProps.id,
+  classes: linkProps.classes,
+  attributes: linkProps.attributes
+}) }}
+{%- endif %}
+{{ searchPicker({
+  label: opts.labels.search,
+  inputLabel: opts.labels.searchInput,
+  submitLabel: opts.labels.searchSubmit,
+  placeholder: searchProps.placeholder,
+  value: searchProps.value,
+  action: searchProps.action,
+  name: searchProps.name,
+  id: searchProps.id,
+  classes: searchProps.classes,
+  attributes: searchProps.attributes
+}) }}
 {{ themePicker({
   label: opts.labels.theme,
   themesUrl: opts.themesUrl,

package/index.md

@@ -1,9 +1,12 @@
 # Lily Design System™ — Nunjucks PickerBar
 
-A single page-header macro that composes four of the Lily
-[`*-picker` helpers](../index.md) in this catalog — theme, locale,
-text size, and share — with two catalog-wide defaults pre-wired, so
-you can call one macro instead of assembling and configuring four.
+> **Link picker (0.3.0).** Pass `links` (and `labels.link`) to add a `link-picker` — a home icon opening the page links your app defines — as the leftmost icon. It renders only when both are given.
+
+A single page-header macro that composes five of the Lily
+[`*-picker` helpers](../index.md) in this catalog — search, theme,
+locale, text size, and share, in that order — with two catalog-wide
+defaults pre-wired, so you can call one macro instead of assembling
+and configuring five.
 
 `motion-picker` and `date-time-picker` are not part of the bar: motion
 has no natural spot next to the other three header preferences, and
@@ -15,8 +18,9 @@ has no natural spot next to the other three header preferences, and
 npm install @lilydesignsystem/nunjucks-picker-bar
 ```
 
-`@lilydesignsystem/nunjucks-theme-picker`, `-locale-picker`,
-`-text-size-picker`, and `-share-picker` install automatically as
+`@lilydesignsystem/nunjucks-search-picker`, `-theme-picker`,
+`-locale-picker`, `-text-size-picker`, and `-share-picker` install
+automatically as
 regular dependencies — `pickerBar` is a thin wrapper around them, not
 a reimplementation.
 
@@ -35,6 +39,9 @@ const env = nunjucks.configure(["views", "node_modules"], { autoescape: true });
 
 {{ pickerBar({
   labels: {
+    search: "Search this site",
+    searchInput: "Search terms",
+    searchSubmit: "Search",
     theme: "Theme",
     locale: "Language",
     textSize: "Text size",
@@ -57,7 +64,8 @@ Then load `picker-bar.client.js` once and call `autoInit()`:
 </script>
 ```
 
-That's a complete, working header row: 45 themes, four locales, the
+That's a complete, working header row: a site search (a search for
+`foo` goes to `/?foo`), 45 themes, four locales, the
 seven-step text-size scale, and one share destination plus copy-to-URL
 if you add `shareProps: { copyLabel: "Copy link" }`.
 
@@ -91,9 +99,13 @@ detection, a `*Labels` override map, an `id`:
 
 ```njk
 {{ pickerBar({
-  labels: { theme: "Theme", locale: "Language", textSize: "Text size", share: "Share" },
+  labels: {
+    search: "Search this site", searchInput: "Search terms", searchSubmit: "Search",
+    theme: "Theme", locale: "Language", textSize: "Text size", share: "Share"
+  },
   themesUrl: "/assets/themes/",
   locales: ["en", "cy"],
+  searchProps: { action: "/search", placeholder: "Search…" },
   themeProps: { storageKey: "lily-theme", detectFromSystem: true },
   localeProps: { storageKey: "lily-locale", detectFromNavigator: true },
   textSizeProps: { storageKey: "lily-text-size" },
@@ -101,16 +113,25 @@ detection, a `*Labels` override map, an `id`:
 }) }}
 ```
 
+`search-picker`'s function-valued options — `navigate` (default
+`location.assign`) and `onSearch` — cannot pass through a macro, so
+hand them to the client instead:
+
+```js
+autoInit({ searchProps: { navigate: (href) => router.go(href) } });
+```
+
 Unlike the Svelte canonical, `pickerBar` cannot route a custom glyph to
 one specific picker (a Nunjucks macro call accepts only one
-`{% call %}` block) — compose the four macros directly if you need
+`{% call %}` block) — compose the five macros directly if you need
 that.
 
 ## Styling
 
 `pickerBar` renders no CSS of its own beyond the `picker-bar` root
 wrapper — style each child through its own package's class hooks
-(`theme-picker`, `locale-picker`, `text-size-picker`, `share-picker`;
+(`search-picker`, `theme-picker`, `locale-picker`, `text-size-picker`,
+`share-picker`;
 see each package's own `index.md`). A typical header layout:
 
 ```css
@@ -123,11 +144,14 @@ see each package's own `index.md`). A typical header layout:
 
 ## Accessibility
 
-Every accessible name comes from `labels` — there is no English
+Every accessible name comes from `labels` — `search`, `searchInput`,
+and `searchSubmit` name the search picker's button and landmark, field,
+and `⏎` button; `theme`, `locale`, `textSize`, `share` the others —
+and there is no English
 default, because a set of names this catalog invented is exactly the
 case the rest of Lily's i18n rule exists for. Each wrapped picker keeps
 its own WAI-ARIA APG contract unchanged; see that picker's own
-`index.md`. As with every helper in this catalog, none of the four is
+`index.md`. As with every helper in this catalog, none of the five is
 operable until its client.js has run — see each package's own
 `docs/ssr.md`.
 

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@lilydesignsystem/nunjucks-picker-bar",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "engines": {
     "node": "=26"
   },
-  "description": "Lily Design System Nunjucks picker bar: composes theme-picker, locale-picker, text-size-picker, and share-picker into one page-header row. Headless, SSR-safe, no CSS.",
+  "description": "Lily Design System Nunjucks picker bar: composes link-picker (optional), search-picker, theme-picker, locale-picker, text-size-picker, and share-picker into one page-header row. Headless, SSR-safe, no CSS.",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -25,10 +25,12 @@
     "prepublishOnly": "cd .. && npm run build"
   },
   "dependencies": {
-    "@lilydesignsystem/nunjucks-theme-picker": "^0.1.0",
-    "@lilydesignsystem/nunjucks-locale-picker": "^0.1.0",
-    "@lilydesignsystem/nunjucks-text-size-picker": "^0.1.0",
-    "@lilydesignsystem/nunjucks-share-picker": "^0.1.0"
+    "@lilydesignsystem/nunjucks-link-picker": "^0.1.0",
+    "@lilydesignsystem/nunjucks-search-picker": "^0.1.0",
+    "@lilydesignsystem/nunjucks-theme-picker": "^0.2.0",
+    "@lilydesignsystem/nunjucks-locale-picker": "^0.2.0",
+    "@lilydesignsystem/nunjucks-text-size-picker": "^0.2.0",
+    "@lilydesignsystem/nunjucks-share-picker": "^0.2.0"
   },
   "keywords": [
     "lily",
@@ -37,6 +39,7 @@
     "nunjucks",
     "picker",
     "picker-bar",
+    "search",
     "theme",
     "locale",
     "text-size",