@lilydesignsystem/html-picker-bar 0.1.0 → 0.3.0

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { LinkItem, LinkPickerProps, LinkPicker } from '@lilydesignsystem/html-link-picker';
+import { SearchPickerProps, SearchPicker } from '@lilydesignsystem/html-search-picker';
 import { ThemePickerProps, ThemePicker } from '@lilydesignsystem/html-theme-picker';
 import { LocalePickerProps, LocalePicker } from '@lilydesignsystem/html-locale-picker';
 import { TextSizePickerProps, TextSizePicker } from '@lilydesignsystem/html-text-size-picker';
@@ -11,8 +13,9 @@ export { ShareTarget } from '@lilydesignsystem/html-share-picker';
  * the custom-element class but does NOT register it. The `index.ts`
  * barrel registers it on import.
  *
- * A thin composition: renders `<theme-picker>`, `<locale-picker>`,
- * `<text-size-picker>`, and `<share-picker>` — each imported from its
+ * A thin composition: renders `<search-picker>`, `<theme-picker>`,
+ * `<locale-picker>`, `<text-size-picker>`, and `<share-picker>` — in
+ * that order, search first — each imported from its
  * own published package, not vendored — inside one
  * `<div class="picker-bar {class}">` row. Owns no lifecycle of its
  * own beyond two catalog-specific defaults (§5.1, §5.2 of the spec).
@@ -33,8 +36,19 @@ declare const DEFAULT_THEMES: string[];
  * either.
  */
 declare const DEFAULT_SIZES: string[];
-/** Accessible names for the four pickers. Required — no English default. */
+/** Accessible names for the pickers. Required — no English default (`link` only when `links` is given). */
 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. */
@@ -53,6 +67,8 @@ type PickerBarLabels = {
  * so anything here overrides them. Excludes the props `<picker-bar>`
  * already lifts to the top level.
  */
+type LinkPickerExtra = Partial<Omit<LinkPickerProps, "label" | "links">>;
+type SearchPickerExtra = Partial<Omit<SearchPickerProps, "label" | "inputLabel" | "submitLabel">>;
 type ThemePickerExtra = Partial<Omit<ThemePickerProps, "label" | "themesUrl" | "themes">>;
 type LocalePickerExtra = Partial<Omit<LocalePickerProps, "label" | "locales">>;
 type TextSizePickerExtra = Partial<Omit<TextSizePickerProps, "label" | "sizes">>;
@@ -60,6 +76,10 @@ type SharePickerExtra = Partial<Omit<SharePickerProps, "label" | "targets">>;
 /** Mirrors the observed attributes / properties for typing convenience. */
 type PickerBarProps = {
     labels: PickerBarLabels;
+    /** Page links for the link picker, which renders FIRST (leftmost). Omitted or empty: no link picker. */
+    links?: LinkItem[];
+    linkProps?: LinkPickerExtra;
+    searchProps?: SearchPickerExtra;
     themesUrl: string;
     themes?: string[];
     themeProps?: ThemePickerExtra;
@@ -87,6 +107,12 @@ declare class PickerBar extends HTMLElement {
     set sizes(v: string[]);
     get shareTargets(): ShareTarget[];
     set shareTargets(v: ShareTarget[]);
+    get links(): LinkItem[];
+    set links(v: LinkItem[]);
+    get linkProps(): LinkPickerExtra;
+    set linkProps(v: LinkPickerExtra);
+    get searchProps(): SearchPickerExtra;
+    set searchProps(v: SearchPickerExtra);
     get themeProps(): ThemePickerExtra;
     set themeProps(v: ThemePickerExtra);
     get localeProps(): LocalePickerExtra;
@@ -95,6 +121,10 @@ declare class PickerBar extends HTMLElement {
     set textSizeProps(v: TextSizePickerExtra);
     get shareProps(): SharePickerExtra;
     set shareProps(v: SharePickerExtra);
+    /** The rendered `<link-picker>` instance, once connected (null when no links). */
+    get linkPicker(): LinkPicker | null;
+    /** The rendered `<search-picker>` instance, once connected. */
+    get searchPicker(): SearchPicker | null;
     /** The rendered `<theme-picker>` instance, once connected. */
     get themePicker(): ThemePicker | null;
     /** The rendered `<locale-picker>` instance, once connected. */
@@ -107,4 +137,4 @@ declare class PickerBar extends HTMLElement {
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
 }
 
-export { DEFAULT_SIZES, DEFAULT_THEMES, type LocalePickerExtra, PickerBar, type PickerBarLabels, type PickerBarProps, type SharePickerExtra, type TextSizePickerExtra, type ThemePickerExtra };
+export { DEFAULT_SIZES, DEFAULT_THEMES, type LocalePickerExtra, PickerBar, type PickerBarLabels, type PickerBarProps, type SearchPickerExtra, type SharePickerExtra, type TextSizePickerExtra, type ThemePickerExtra };

package/dist/index.js

@@ -1,4 +1,6 @@
 // lily-design-system-html-picker-bar/picker-bar.ts
+import "@lilydesignsystem/html-link-picker";
+import "@lilydesignsystem/html-search-picker";
 import "@lilydesignsystem/html-theme-picker";
 import "@lilydesignsystem/html-locale-picker";
 import "@lilydesignsystem/html-text-size-picker";
@@ -60,6 +62,9 @@ var DEFAULT_SIZES = [
   "smallest"
 ];
 var DEFAULT_LABELS = {
+  search: "",
+  searchInput: "",
+  searchSubmit: "",
   theme: "",
   locale: "",
   textSize: "",
@@ -78,12 +83,17 @@ var PickerBar = class extends HTMLElement {
   #locales = [];
   #sizes = DEFAULT_SIZES;
   #shareTargets = [];
+  #links = [];
+  #linkProps = {};
+  #searchProps = {};
   #themeProps = {};
   #localeProps = {};
   #textSizeProps = {};
   #shareProps = {};
   // Rendered-DOM references. Null until #render() has run.
   #rootEl = null;
+  #linkPickerEl = null;
+  #searchPickerEl = null;
   #themePickerEl = null;
   #localePickerEl = null;
   #textSizePickerEl = null;
@@ -145,6 +155,27 @@ var PickerBar = class extends HTMLElement {
     this.#shareTargets = Array.isArray(v) ? v.slice() : [];
     this.#render();
   }
+  get links() {
+    return [...this.#links];
+  }
+  set links(v) {
+    this.#links = Array.isArray(v) ? v.slice() : [];
+    this.#render();
+  }
+  get linkProps() {
+    return this.#linkProps;
+  }
+  set linkProps(v) {
+    this.#linkProps = v ?? {};
+    this.#render();
+  }
+  get searchProps() {
+    return this.#searchProps;
+  }
+  set searchProps(v) {
+    this.#searchProps = v ?? {};
+    this.#render();
+  }
   get themeProps() {
     return this.#themeProps;
   }
@@ -173,6 +204,14 @@ var PickerBar = class extends HTMLElement {
     this.#shareProps = v ?? {};
     this.#render();
   }
+  /** The rendered `<link-picker>` instance, once connected (null when no links). */
+  get linkPicker() {
+    return this.#linkPickerEl;
+  }
+  /** The rendered `<search-picker>` instance, once connected. */
+  get searchPicker() {
+    return this.#searchPickerEl;
+  }
   /** The rendered `<theme-picker>` instance, once connected. */
   get themePicker() {
     return this.#themePickerEl;
@@ -227,6 +266,21 @@ var PickerBar = class extends HTMLElement {
     const extraClass = this.getAttribute("class") ?? "";
     const root = document.createElement("div");
     root.className = `picker-bar ${extraClass}`.trim();
+    this.#linkPickerEl = null;
+    if (this.#links.length > 0 && this.#labels.link) {
+      const linkEl = document.createElement("link-picker");
+      linkEl.label = this.#labels.link;
+      linkEl.links = this.#links;
+      Object.assign(linkEl, this.#linkProps);
+      root.appendChild(linkEl);
+      this.#linkPickerEl = linkEl;
+    }
+    const searchEl = document.createElement("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("theme-picker");
     themeEl.label = this.#labels.theme;
     themeEl.themesUrl = this.themesUrl;
@@ -253,6 +307,7 @@ var PickerBar = class extends HTMLElement {
     root.appendChild(shareEl);
     this.replaceChildren(root);
     this.#rootEl = root;
+    this.#searchPickerEl = searchEl;
     this.#themePickerEl = themeEl;
     this.#localePickerEl = localeEl;
     this.#textSizePickerEl = textSizeEl;

package/index.md

@@ -1,10 +1,12 @@
 # Lily Design System™ — HTML PickerBar
 
-A single page-header custom element, `<picker-bar>`, 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 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 custom element, `<picker-bar>`, 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 element into a header 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
@@ -16,8 +18,8 @@ has no natural spot next to the other three header preferences, and
 npm install @lilydesignsystem/html-picker-bar
 ```
 
-`@lilydesignsystem/html-theme-picker`, `-locale-picker`,
-`-text-size-picker`, and `-share-picker` install automatically as
+`@lilydesignsystem/html-search-picker`, `-theme-picker`,
+`-locale-picker`, `-text-size-picker`, and `-share-picker` install automatically as
 regular dependencies — `<picker-bar>` is a thin wrapper around them,
 not a reimplementation.
 
@@ -28,6 +30,9 @@ import "@lilydesignsystem/html-picker-bar";
 
 const bar = document.createElement("picker-bar");
 bar.labels = {
+  search: "Search this site",
+  searchInput: "Search terms",
+  searchSubmit: "Search",
   theme: "Theme",
   locale: "Language",
   textSize: "Text size",
@@ -52,6 +57,9 @@ Or in markup, for the parts that fit plain attributes:
 <picker-bar themes-url="/assets/themes/" locales="en,cy,gd,ga"></picker-bar>
 <script type="module">
   document.querySelector("picker-bar").labels = {
+    search: "Search this site",
+    searchInput: "Search terms",
+    searchSubmit: "Search",
     theme: "Theme",
     locale: "Language",
     textSize: "Text size",
@@ -60,6 +68,11 @@ Or in markup, for the parts that fit plain attributes:
 </script>
 ```
 
+Search sends a query for `foo` to `/?foo` by default. `labels` carries
+seven names: three for search (`search` names its button and search
+landmark, `searchInput` the field, `searchSubmit` the `⏎` button) and
+one for each other picker.
+
 `labels` has to be set as a JS property (no honest attribute encoding
 exists for an object), same as `shareTargets` — see
 `<date-time-picker>`'s `labels` and `<share-picker>`'s `targets` for the
@@ -91,6 +104,7 @@ attribute — for anything beyond what `<picker-bar>` lifts to the top
 level: persistence, initial value, detection, a `*Labels` override map.
 
 ```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" };
@@ -108,6 +122,7 @@ After `<picker-bar>` has rendered (i.e. once it's connected to the
 document), each wrapped element is available as a read-only property:
 
 ```js
+bar.searchPicker; // the <search-picker> instance
 bar.themePicker; // the <theme-picker> instance
 bar.localePicker; // the <locale-picker> instance
 bar.textSizePicker; // the <text-size-picker> instance
@@ -122,7 +137,8 @@ instances of their own packages.
 
 `<picker-bar>` renders no CSS of its own beyond the `picker-bar` root
 wrapper class — 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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@lilydesignsystem/html-picker-bar",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "engines": {
     "node": "=26"
   },
-  "description": "Lily Design System HTML 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 HTML 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",
@@ -24,10 +24,12 @@
     "prepublishOnly": "cd .. && npm run build"
   },
   "dependencies": {
-    "@lilydesignsystem/html-theme-picker": "^0.1.0",
-    "@lilydesignsystem/html-locale-picker": "^0.1.0",
-    "@lilydesignsystem/html-text-size-picker": "^0.1.0",
-    "@lilydesignsystem/html-share-picker": "^0.1.0"
+    "@lilydesignsystem/html-link-picker": "^0.1.0",
+    "@lilydesignsystem/html-search-picker": "^0.1.0",
+    "@lilydesignsystem/html-theme-picker": "^0.2.0",
+    "@lilydesignsystem/html-locale-picker": "^0.2.0",
+    "@lilydesignsystem/html-text-size-picker": "^0.2.0",
+    "@lilydesignsystem/html-share-picker": "^0.2.0"
   },
   "keywords": [
     "lily",
@@ -36,6 +38,7 @@
     "html",
     "picker",
     "picker-bar",
+    "search",
     "theme",
     "locale",
     "text-size",