@lilydesignsystem/html-picker-bar 0.5.1 → 0.6.0

package/LICENSE.md

@@ -8,15 +8,15 @@ 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))
+- [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))
+- [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 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))
+- [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))
+- [BSD 3-Clause License](https://opensource.org/license/bsd-3-clause) ([SPDX: BSD-3-Clause](https://spdx.org/licenses/BSD-3-Clause.html))
 
 ## SPDX
 
@@ -31,9 +31,9 @@ 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.
+This applies to the whole repository — the component catalog, the headless
+libraries, the example applications, the helper packages, the `themes/`
+stylesheets, the `bin/` tooling, and the documentation.
 
 ## Scope note
 

package/README.md

@@ -55,8 +55,14 @@ document.querySelector("header").appendChild(bar);
 Or in markup, for the parts that fit plain attributes:
 
 ```html
-<script type="module" src="/node_modules/lily-design-system-html-picker-bar/dist/index.js"></script>
-<picker-bar themes-url="/assets/themes/" locales="en,cy,gd,ga"></picker-bar>
+<script
+  type="module"
+  src="/node_modules/lily-design-system-html-picker-bar/dist/index.js"
+></script>
+<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",
@@ -82,7 +88,7 @@ same pattern elsewhere in this catalog.
 
 ## Defaults
 
-- **`themes`** defaults to `DEFAULT_THEMES` — all 45 Lily reference
+- **`themes`** defaults to `DEFAULT_THEMES` — all 63 Lily reference
   theme slugs, alphabetical, with the 8 United Kingdom / United States
   government themes moved to their own alphabetical group at the
   bottom. Set your own `themes` attribute (comma-separated) or
@@ -106,7 +112,11 @@ 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.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" };

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export { ShareTarget } from '@lilydesignsystem/html-share-picker';
  */
 
 /**
- * All 57 Lily reference theme slugs (see `themes/` at the repo root),
+ * All 63 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
@@ -44,12 +44,16 @@ type PickerBarLabels = {
      * 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 button and search landmark. Optional: omitted or empty, the bar has no search
+     * picker (a client-side app whose search would navigate away from its state can leave it out). When given, `searchInput`
+     * and `searchSubmit` are needed too.
+     */
+    search?: string;
     /** Accessible name for the search picker's text field. */
-    searchInput: string;
+    searchInput?: string;
     /** Accessible name for the search picker's ⏎ submit button. */
-    searchSubmit: string;
+    searchSubmit?: string;
     /** Accessible name for the theme picker's button and listbox. */
     theme: string;
     /** Accessible name for the locale picker's button and listbox. */

package/dist/index.js

@@ -13,10 +13,13 @@ var DEFAULT_THEMES = [
   "ant-design",
   "aqua",
   "atlassian",
+  "australia-agriculture-design-system",
   "autumn",
   "black",
+  "brazil-padrao-digital-de-governo",
   "bumblebee",
   "business",
+  "canada-government-of-canada-design-system",
   "cappuccino",
   "caramellatte",
   "cmyk",
@@ -28,6 +31,7 @@ var DEFAULT_THEMES = [
   "dim",
   "dracula",
   "emerald",
+  "european-union-europa-component-library",
   "excel",
   "fantasy",
   "fluent",
@@ -36,6 +40,7 @@ var DEFAULT_THEMES = [
   "github-primer",
   "halloween",
   "ibm-carbon",
+  "japan-digital-agency-design-system",
   "lemonade",
   "light",
   "linear",
@@ -50,6 +55,7 @@ var DEFAULT_THEMES = [
   "salesforce",
   "sap-fiori",
   "silk",
+  "singapore-government-design-system",
   "sunset",
   "synthwave",
   "valentine",
@@ -301,12 +307,15 @@ var PickerBar = class extends HTMLElement {
       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);
+    let searchEl = null;
+    if (this.#labels.search) {
+      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;
@@ -326,9 +335,7 @@ var PickerBar = class extends HTMLElement {
       timeZoneEl.label = this.#labels.timeZone;
       root.appendChild(timeZoneEl);
     }
-    const textSizeEl = document.createElement(
-      "text-size-picker"
-    );
+    const textSizeEl = document.createElement("text-size-picker");
     textSizeEl.label = this.#labels.textSize;
     textSizeEl.sizes = this.#sizes;
     textSizeEl.defaultValue = "normal";

package/index.md

@@ -55,8 +55,14 @@ document.querySelector("header").appendChild(bar);
 Or in markup, for the parts that fit plain attributes:
 
 ```html
-<script type="module" src="/node_modules/lily-design-system-html-picker-bar/dist/index.js"></script>
-<picker-bar themes-url="/assets/themes/" locales="en,cy,gd,ga"></picker-bar>
+<script
+  type="module"
+  src="/node_modules/lily-design-system-html-picker-bar/dist/index.js"
+></script>
+<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",
@@ -82,7 +88,7 @@ same pattern elsewhere in this catalog.
 
 ## Defaults
 
-- **`themes`** defaults to `DEFAULT_THEMES` — all 45 Lily reference
+- **`themes`** defaults to `DEFAULT_THEMES` — all 63 Lily reference
   theme slugs, alphabetical, with the 8 United Kingdom / United States
   government themes moved to their own alphabetical group at the
   bottom. Set your own `themes` attribute (comma-separated) or
@@ -106,7 +112,11 @@ 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.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" };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lilydesignsystem/html-picker-bar",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "engines": {
     "node": ">=26"
   },
@@ -23,6 +23,7 @@
   "scripts": {
     "build": "node build.js",
     "test": "vitest run",
+    "check": "tsc --noEmit",
     "test:watch": "vitest",
     "prepublishOnly": "npm run build"
   },