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

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+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';
@@ -37,6 +38,11 @@ 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. */
@@ -58,6 +64,10 @@ type PickerBarProps = {
     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. */
@@ -92,6 +102,13 @@ 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>;

package/dist/index.js

@@ -1,4 +1,5 @@
 // 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";
@@ -81,6 +82,8 @@ var PickerBar = class extends HTMLElement {
   #sizes = [...DEFAULT_SIZES];
   #labels = { ...DEFAULT_LABELS };
   #shareTargets = [];
+  #links = [];
+  #linkProps = {};
   #searchProps = {};
   #themeProps = {};
   #localeProps = {};
@@ -88,6 +91,7 @@ var PickerBar = class extends HTMLElement {
   #shareProps = {};
   #built = false;
   #rootEl = null;
+  #linkEl = null;
   #searchEl = null;
   #themeEl = null;
   #localeEl = null;
@@ -142,6 +146,7 @@ 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;
@@ -160,6 +165,46 @@ 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 };
   }
@@ -275,6 +320,8 @@ var PickerBar = class extends HTMLElement {
     this.#localeEl = localeEl;
     this.#textSizeEl = textSizeEl;
     this.#shareEl = shareEl;
+    this.#linkEl = null;
+    this.#syncLink();
   }
 };
 

package/index.md

@@ -1,5 +1,7 @@
 # Lily Design System™ — `<lily-picker-bar>`
 
+> **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,

package/package.json

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