@lilydesignsystem/web-components-picker-bar 0.1.0 → 0.3.0

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { LinkItem, LinkPickerProps, LinkPicker } from '@lilydesignsystem/web-components-link-picker';
+import { SearchPickerProps } from '@lilydesignsystem/web-components-search-picker';
 import { ThemePickerProps } from '@lilydesignsystem/web-components-theme-picker';
 import { LocalePickerProps } from '@lilydesignsystem/web-components-locale-picker';
 import { TextSizePickerProps } from '@lilydesignsystem/web-components-text-size-picker';
@@ -10,9 +12,10 @@ import { ShareTarget, SharePickerProps } from '@lilydesignsystem/web-components-
  * the custom-element class but does NOT register it. The `index.ts`
  * barrel registers it on import.
  *
- * A thin composition wrapper: it renders `<lily-theme-picker>`,
- * `<lily-locale-picker>`, `<lily-text-size-picker>`, and
- * `<lily-share-picker>` — each depended on as a real npm package, not
+ * A thin composition wrapper: it renders `<lily-search-picker>`,
+ * `<lily-theme-picker>`, `<lily-locale-picker>`,
+ * `<lily-text-size-picker>`, and `<lily-share-picker>` — search first,
+ * each depended on as a real npm package, not
  * vendored — in that fixed order, with two catalog-specific defaults
  * pre-wired (§5.1, §5.2 of the spec). It owns no interaction of its
  * own: no listbox, no keyboard handling, no applied/persisted state.
@@ -35,6 +38,17 @@ declare const DEFAULT_THEMES: string[];
 declare const DEFAULT_SIZES: string[];
 /** Accessible names for the four pickers. Required — no English default. */
 type PickerBarLabels = {
+    /**
+     * Accessible name for the link picker's button and list. Needed only when `links` is
+     * supplied; the link picker renders only when both are present.
+     */
+    link?: string;
+    /** Accessible name for the search picker's button and search landmark. */
+    search: string;
+    /** Accessible name for the search picker's text field. */
+    searchInput: string;
+    /** Accessible name for the search picker's ⏎ submit button. */
+    searchSubmit: string;
     /** Accessible name for the theme picker's button and listbox. */
     theme: string;
     /** Accessible name for the locale picker's button and listbox. */
@@ -48,6 +62,12 @@ type PickerBarLabels = {
 type PickerBarProps = {
     /** Property-only — see `spec/index.md` §4.3. Required, no default. */
     labels: PickerBarLabels;
+    /** Property-only extra `<lily-search-picker>` config (`action`, `navigate`, `placeholder`, `onSearch`, …), applied after the bar's own. */
+    searchProps?: Partial<Omit<SearchPickerProps, "label" | "inputLabel" | "submitLabel">>;
+    /** Page links for the link picker, which renders FIRST (leftmost). Omitted or empty: no link picker. */
+    links?: LinkItem[];
+    /** Property-only extra `<lily-link-picker>` config (`onNavigate`, …), applied after this bar's own. */
+    linkProps?: Partial<Omit<LinkPickerProps, "label" | "links">>;
     themesUrl: string;
     themes?: string[];
     /** Property-only extra `<lily-theme-picker>` config, applied after the bar's own. */
@@ -82,6 +102,15 @@ declare class PickerBar extends HTMLElement {
     /** Property-only — `ShareTarget.href` is a function. */
     get shareTargets(): ShareTarget[];
     set shareTargets(v: ShareTarget[]);
+    /** Page links for the link picker (leftmost). Property-only. */
+    get links(): LinkItem[];
+    set links(v: LinkItem[]);
+    get linkProps(): Partial<LinkPickerProps>;
+    set linkProps(v: Partial<LinkPickerProps>);
+    /** The rendered `<lily-link-picker>` instance (null when no links). */
+    get linkPicker(): LinkPicker | null;
+    get searchProps(): Partial<SearchPickerProps>;
+    set searchProps(v: Partial<SearchPickerProps>);
     get themeProps(): Partial<ThemePickerProps>;
     set themeProps(v: Partial<ThemePickerProps>);
     get localeProps(): Partial<LocalePickerProps>;

package/dist/index.js

@@ -1,4 +1,6 @@
 // lily-design-system-web-components-picker-bar/picker-bar.ts
+import "@lilydesignsystem/web-components-link-picker";
+import "@lilydesignsystem/web-components-search-picker";
 import "@lilydesignsystem/web-components-theme-picker";
 import "@lilydesignsystem/web-components-locale-picker";
 import "@lilydesignsystem/web-components-text-size-picker";
@@ -60,6 +62,9 @@ var DEFAULT_SIZES = [
   "smallest"
 ];
 var DEFAULT_LABELS = {
+  search: "",
+  searchInput: "",
+  searchSubmit: "",
   theme: "",
   locale: "",
   textSize: "",
@@ -77,12 +82,17 @@ var PickerBar = class extends HTMLElement {
   #sizes = [...DEFAULT_SIZES];
   #labels = { ...DEFAULT_LABELS };
   #shareTargets = [];
+  #links = [];
+  #linkProps = {};
+  #searchProps = {};
   #themeProps = {};
   #localeProps = {};
   #textSizeProps = {};
   #shareProps = {};
   #built = false;
   #rootEl = null;
+  #linkEl = null;
+  #searchEl = null;
   #themeEl = null;
   #localeEl = null;
   #textSizeEl = null;
@@ -136,6 +146,12 @@ var PickerBar = class extends HTMLElement {
   }
   set labels(v) {
     this.#labels = v ?? { ...DEFAULT_LABELS };
+    this.#syncLink();
+    if (this.#searchEl) {
+      this.#searchEl.label = this.#labels.search;
+      this.#searchEl.inputLabel = this.#labels.searchInput;
+      this.#searchEl.submitLabel = this.#labels.searchSubmit;
+    }
     if (this.#themeEl) this.#themeEl.label = this.#labels.theme;
     if (this.#localeEl) this.#localeEl.label = this.#labels.locale;
     if (this.#textSizeEl) this.#textSizeEl.label = this.#labels.textSize;
@@ -149,6 +165,53 @@ var PickerBar = class extends HTMLElement {
     this.#shareTargets = Array.isArray(v) ? v.slice() : [];
     if (this.#shareEl) this.#shareEl.targets = this.#shareTargets;
   }
+  /** Page links for the link picker (leftmost). Property-only. */
+  get links() {
+    return [...this.#links];
+  }
+  set links(v) {
+    this.#links = Array.isArray(v) ? v.slice() : [];
+    this.#syncLink();
+  }
+  get linkProps() {
+    return { ...this.#linkProps };
+  }
+  set linkProps(v) {
+    this.#linkProps = v ?? {};
+    if (this.#linkEl) Object.assign(this.#linkEl, this.#linkProps);
+  }
+  /** The rendered `<lily-link-picker>` instance (null when no links). */
+  get linkPicker() {
+    return this.#linkEl;
+  }
+  /**
+   * Create, update or remove the link picker so it is the root's first child exactly when
+   * `links` is non-empty and `labels.link` is set. The picker is optional, so unlike the
+   * other five it can appear and disappear after the bar is rendered.
+   */
+  #syncLink() {
+    if (!this.#rootEl) return;
+    const wanted = this.#links.length > 0 && !!this.#labels.link;
+    if (!wanted) {
+      this.#linkEl?.remove();
+      this.#linkEl = null;
+      return;
+    }
+    if (!this.#linkEl) {
+      this.#linkEl = document.createElement("lily-link-picker");
+      this.#rootEl.insertBefore(this.#linkEl, this.#rootEl.firstChild);
+    }
+    this.#linkEl.label = this.#labels.link;
+    this.#linkEl.links = this.#links;
+    Object.assign(this.#linkEl, this.#linkProps);
+  }
+  get searchProps() {
+    return { ...this.#searchProps };
+  }
+  set searchProps(v) {
+    this.#searchProps = v ?? {};
+    if (this.#searchEl) Object.assign(this.#searchEl, this.#searchProps);
+  }
   get themeProps() {
     return { ...this.#themeProps };
   }
@@ -221,6 +284,12 @@ var PickerBar = class extends HTMLElement {
     const root = document.createElement("div");
     root.className = `picker-bar ${extraClass}`.trim();
     this.replaceChildren(root);
+    const searchEl = document.createElement("lily-search-picker");
+    searchEl.label = this.#labels.search;
+    searchEl.inputLabel = this.#labels.searchInput;
+    searchEl.submitLabel = this.#labels.searchSubmit;
+    Object.assign(searchEl, this.#searchProps);
+    root.appendChild(searchEl);
     const themeEl = document.createElement("lily-theme-picker");
     themeEl.label = this.#labels.theme;
     themeEl.themesUrl = this.themesUrl;
@@ -246,10 +315,13 @@ var PickerBar = class extends HTMLElement {
     Object.assign(shareEl, this.#shareProps);
     root.appendChild(shareEl);
     this.#rootEl = root;
+    this.#searchEl = searchEl;
     this.#themeEl = themeEl;
     this.#localeEl = localeEl;
     this.#textSizeEl = textSizeEl;
     this.#shareEl = shareEl;
+    this.#linkEl = null;
+    this.#syncLink();
   }
 };
 

package/index.md

@@ -1,10 +1,12 @@
 # Lily Design System™ — `<lily-picker-bar>`
 
-A single page-header row that composes four of the Lily
-[`*-picker` helpers](../index.md) — theme, locale, text size, and
-share — with two catalog-wide defaults pre-wired, so you can drop one
-custom element into a header 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 row that composes five of the Lily
+[`*-picker` helpers](../index.md) — search, theme, locale, text size,
+and share, in that order — with two catalog-wide defaults pre-wired,
+so you can drop one custom element into a header instead of
+assembling and configuring five.
 
 `<lily-motion-picker>` and `<lily-date-time-picker>` are not part of
 the bar: motion has no natural spot next to the other three header
@@ -17,8 +19,8 @@ header control.
 npm install @lilydesignsystem/web-components-picker-bar
 ```
 
-`@lilydesignsystem/web-components-theme-picker`, `-locale-picker`,
-`-text-size-picker`, and `-share-picker` install automatically as
+`@lilydesignsystem/web-components-search-picker`, `-theme-picker`,
+`-locale-picker`, `-text-size-picker`, and `-share-picker` install automatically as
 regular dependencies — `<lily-picker-bar>` is a thin wrapper around
 them, not a reimplementation.
 
@@ -34,6 +36,9 @@ them, not a reimplementation.
 <script type="module">
   const bar = document.getElementById("header-picker-bar");
   bar.labels = {
+    search: "Search this site",
+    searchInput: "Search terms",
+    searchSubmit: "Search",
     theme: "Theme",
     locale: "Language",
     textSize: "Text size",
@@ -56,7 +61,8 @@ spec) — objects and functions cannot be expressed as HTML attributes
 `themes-url` (required) and `class` are plain attributes and can be
 written directly in HTML, as shown above.
 
-That's a complete, working header row: 45 themes, four locales, the
+That's a complete, working header row: 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 `bar.shareProps = { copyLabel: "Copy link" }`.
 
@@ -86,6 +92,7 @@ Each wrapped picker takes a `*Props` bag for anything beyond what
 value, detection, a `*Labels` override map, a custom glyph:
 
 ```js
+bar.searchProps = { action: "/search", placeholder: "Search…", navigate: (href) => router.push(href) };
 bar.themeProps = { storageKey: "lily-theme", detectFromSystem: true };
 bar.localeProps = { storageKey: "lily-locale", detectFromNavigator: true };
 bar.textSizeProps = { storageKey: "lily-text-size" };
@@ -99,7 +106,7 @@ for that picker.
 
 `<lily-picker-bar>` renders no CSS of its own class beyond the
 `picker-bar` root wrapper — style each child through its own
-package's class hooks (`theme-picker`, `locale-picker`,
+package's class hooks (`search-picker`, `theme-picker`, `locale-picker`,
 `text-size-picker`, `share-picker`; see each package's own `index.md`).
 A typical header layout:
 

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@lilydesignsystem/web-components-picker-bar",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "engines": {
     "node": "=26"
   },
-  "description": "Lily Design System - HTML custom element picker bar: composes lily-theme-picker, lily-locale-picker, lily-text-size-picker, and lily-share-picker into one page-header row.",
+  "description": "Lily Design System Web Components picker bar: composes lily-link-picker (optional), lily-search-picker, lily-theme-picker, lily-locale-picker, lily-text-size-picker, and lily-share-picker into one page-header row.",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -24,10 +24,12 @@
     "prepublishOnly": "cd .. && npm run build"
   },
   "dependencies": {
-    "@lilydesignsystem/web-components-theme-picker": "^0.1.0",
-    "@lilydesignsystem/web-components-locale-picker": "^0.1.0",
-    "@lilydesignsystem/web-components-text-size-picker": "^0.1.0",
-    "@lilydesignsystem/web-components-share-picker": "^0.1.0"
+    "@lilydesignsystem/web-components-link-picker": "^0.1.0",
+    "@lilydesignsystem/web-components-search-picker": "^0.1.0",
+    "@lilydesignsystem/web-components-theme-picker": "^0.2.0",
+    "@lilydesignsystem/web-components-locale-picker": "^0.2.0",
+    "@lilydesignsystem/web-components-text-size-picker": "^0.2.0",
+    "@lilydesignsystem/web-components-share-picker": "^0.2.0"
   },
   "keywords": [
     "lily",
@@ -36,6 +38,7 @@
     "html",
     "picker",
     "picker-bar",
+    "search",
     "theme",
     "locale",
     "text-size",