@lilydesignsystem/html-picker-bar 0.2.0 → 0.4.0

package/LICENSE.md

@@ -0,0 +1,64 @@
+<!-- Synced from the canonical repository by bin/sync-special-files.
+     Do not edit here; edit the root copy and re-run the script.
+     Canonical: https://github.com/LilyDesignSystem/lily-design-system/blob/main/LICENSE.md -->
+
+# License
+
+Lily Design System™ is free open source software.
+
+License is any of these, at your option, or contact us for custom license options.
+
+* [MIT](https://opensource.org/license/mit) ([SPDX: MIT](https://spdx.org/licenses/MIT.html))
+
+* [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) ([SPDX: Apache-2.0](https://spdx.org/licenses/Apache-2.0.html))
+
+* [GNU General Public License v2.0](https://www.gnu.org/licenses/old-licenses/gpl-2.0-standalone.html) ([SPDX: GPL-2.0-only](https://spdx.org/licenses/GPL-2.0-only.html))
+
+* [GNU General Public License v3.0](https://www.gnu.org/licenses/gpl-3.0-standalone.html) ([SPDX: GPL-3.0-only](https://spdx.org/licenses/GPL-3.0-only.html))
+
+* [BSD 3-Clause License](https://opensource.org/license/bsd-3-clause) ([SPDX: BSD-3-Clause](https://spdx.org/licenses/BSD-3-Clause.html))
+
+## SPDX
+
+The machine-readable expression for the choice above is:
+
+```
+SPDX-License-Identifier: MIT OR Apache-2.0 OR GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause
+```
+
+Every package manifest in this repository should carry that expression, or a
+single identifier from the list where the packaging format does not accept a
+disjunction. You do not need permission to pick one: choose whichever member of
+the list suits your project and comply with that one.
+
+This applies to the whole repository — the component catalog, the seven headless
+libraries, the seven example applications, the seven helper catalogs, the
+`themes/` stylesheets, the `bin/` tooling, and the documentation.
+
+## Scope note
+
+This file supersedes an earlier `CC BY-NC-SA` notice. That notice was a content
+license with a non-commercial clause, it was not an open-source license, and it
+contradicted both the specification and the published packages. It should not be
+relied on. If you obtained Lily under it and that raises a question for you,
+contact <joel@joelparkerhenderson.com>.
+
+## Trademarks
+
+Lily™ and Lily Design System™ are trademarks. The trademarks are distinct from
+the software license: a trademark claim (™) asserts use of the marks and is
+independent of the licenses above. A license to the software is not a license to
+the marks.
+
+You may say your project uses Lily, is built with Lily, or is compatible with
+Lily. Please do not use the marks as the name of your fork or product, or in a
+way that suggests affiliation or endorsement. For any use beyond that, contact
+<joel@joelparkerhenderson.com>.
+
+## Third-party references
+
+Lily's example applications and `themes/` stylesheets take visual reference from
+public-sector design systems including NHS UK, GOV.UK, and USWDS. Lily is not
+affiliated with, endorsed by, or connected to any of those organisations. Their
+names and marks belong to them, and this license grants nothing in respect of
+them.

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+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';
@@ -21,7 +22,7 @@ export { ShareTarget } from '@lilydesignsystem/html-share-picker';
  */
 
 /**
- * All 45 Lily reference theme slugs (see `themes/` at the repo root),
+ * All 57 Lily reference theme slugs (see `themes/` at the repo root),
  * sorted alphabetically except the United Kingdom and United States
  * government/public-sector themes, which sort last as one alphabetical
  * group of their own. Mirrors `theme-picker`'s own title-casing of each
@@ -35,8 +36,13 @@ declare const DEFAULT_THEMES: string[];
  * either.
  */
 declare const DEFAULT_SIZES: string[];
-/** Accessible names for the five 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. */
@@ -61,6 +67,7 @@ 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">>;
@@ -69,6 +76,9 @@ 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[];
@@ -97,6 +107,10 @@ 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;
@@ -107,6 +121,8 @@ 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. */

package/dist/index.js

@@ -1,4 +1,5 @@
-// lily-design-system-html-picker-bar/picker-bar.ts
+// picker-bar.ts
+import "@lilydesignsystem/html-link-picker";
 import "@lilydesignsystem/html-search-picker";
 import "@lilydesignsystem/html-theme-picker";
 import "@lilydesignsystem/html-locale-picker";
@@ -8,11 +9,14 @@ var DEFAULT_THEMES = [
   "abyss",
   "acid",
   "adobe-spectrum",
+  "ant-design",
   "aqua",
+  "atlassian",
   "autumn",
   "black",
   "bumblebee",
   "business",
+  "cappuccino",
   "caramellatte",
   "cmyk",
   "coffee",
@@ -23,23 +27,32 @@ var DEFAULT_THEMES = [
   "dim",
   "dracula",
   "emerald",
+  "excel",
   "fantasy",
+  "fluent",
   "forest",
   "garden",
+  "github-primer",
   "halloween",
+  "ibm-carbon",
   "lemonade",
   "light",
+  "linear",
   "lofi",
   "luxury",
   "mozilla-protocol",
   "night",
   "nord",
+  "notion",
   "pastel",
   "retro",
+  "salesforce",
+  "sap-fiori",
   "silk",
   "sunset",
   "synthwave",
   "valentine",
+  "vercel",
   "winter",
   "wireframe",
   "united-kingdom-government-digital-service",
@@ -82,6 +95,8 @@ var PickerBar = class extends HTMLElement {
   #locales = [];
   #sizes = DEFAULT_SIZES;
   #shareTargets = [];
+  #links = [];
+  #linkProps = {};
   #searchProps = {};
   #themeProps = {};
   #localeProps = {};
@@ -89,6 +104,7 @@ var PickerBar = class extends HTMLElement {
   #shareProps = {};
   // Rendered-DOM references. Null until #render() has run.
   #rootEl = null;
+  #linkPickerEl = null;
   #searchPickerEl = null;
   #themePickerEl = null;
   #localePickerEl = null;
@@ -151,6 +167,20 @@ 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;
   }
@@ -186,6 +216,10 @@ 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;
@@ -244,6 +278,15 @@ 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;
@@ -287,7 +330,7 @@ function parseCsv(s) {
   return s.split(",").map((p) => p.trim()).filter((p) => p.length > 0);
 }
 
-// lily-design-system-html-picker-bar/index.ts
+// index.ts
 if (typeof customElements !== "undefined" && !customElements.get("picker-bar")) {
   customElements.define("picker-bar", PickerBar);
 }

package/index.md

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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@lilydesignsystem/html-picker-bar",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "engines": {
     "node": "=26"
   },
-  "description": "Lily Design System HTML 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 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",
@@ -21,15 +21,25 @@
     "README.md"
   ],
   "scripts": {
-    "prepublishOnly": "cd .. && npm run build"
+    "build": "node build.js",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@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"
   },
+  "devDependencies": {
+    "jsdom": "^30.1.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^5.0.3"
+  },
   "keywords": [
     "lily",
     "design",
@@ -47,7 +57,7 @@
   "license": "MIT OR Apache-2.0 OR GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/LilyDesignSystem/lily-design-system-html-helpers.git",
+    "url": "git+https://github.com/LilyDesignSystem/lily-design-system.git",
     "directory": "lily-design-system-html-picker-bar"
   },
   "homepage": "https://lilydesignsystem.com/",