@lilydesignsystem/nunjucks-picker-bar 0.2.0 → 0.3.0

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+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';
@@ -101,11 +103,12 @@ const DEFAULT_SIZES = [
  * rendered one.
  *
  * @param {HTMLElement} root
- * @param {{searchProps?: object, 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 {
+      link: null,
       search: null,
       theme: null,
       locale: null,
@@ -114,6 +117,7 @@ function initPickerBar(root, opts = {}) {
     };
   }
   const {
+    linkProps = {},
     searchProps = {},
     themeProps = {},
     localeProps = {},
@@ -121,6 +125,7 @@ function initPickerBar(root, opts = {}) {
     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]");
@@ -130,6 +135,7 @@ 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,
@@ -143,7 +149,7 @@ function initPickerBar(root, opts = {}) {
 /**
  * Find every `[data-lily-picker-bar-root]` and wire it.
  *
- * @param {{searchProps?: object, 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,8 @@
 // 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
@@ -78,6 +82,7 @@ var DEFAULT_SIZES = [
 function initPickerBar(root, opts = {}) {
   if (!root) {
     return {
+      link: null,
       search: null,
       theme: null,
       locale: null,
@@ -86,12 +91,14 @@ function initPickerBar(root, opts = {}) {
     };
   }
   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]");
@@ -100,6 +107,7 @@ 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,
@@ -118,6 +126,7 @@ export {
   DEFAULT_SIZES,
   DEFAULT_THEMES,
   autoInit,
+  autoInitLinkPicker,
   autoInitLocalePicker,
   autoInitSearchPicker,
   autoInitSharePicker,

package/dist/picker-bar.njk

@@ -1,5 +1,5 @@
 {#
-  PickerBar macro — composes search-picker, theme-picker,
+  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.
 
@@ -25,6 +25,7 @@
   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 %}
@@ -68,14 +69,24 @@
 ] -%}
 {#
   Params (single `opts` object):
-    labels        — object, required: { search, searchInput,
+    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.
@@ -130,6 +141,7 @@
 {%- 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({}) -%}
@@ -140,6 +152,16 @@
   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,

package/index.md

@@ -1,5 +1,7 @@
 # Lily Design System™ — Nunjucks PickerBar
 
+> **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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@lilydesignsystem/nunjucks-picker-bar",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "engines": {
     "node": "=26"
   },
-  "description": "Lily Design System Nunjucks picker bar: composes search-picker, 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,6 +25,7 @@
     "prepublishOnly": "cd .. && npm run build"
   },
   "dependencies": {
+    "@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",