@lilydesignsystem/web-components-picker-bar 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/LICENSE.md +8 -8
  2. package/README.md +11 -4
  3. package/dist/index.d.ts +9 -5
  4. package/dist/index.js +19 -12
  5. package/index.md +11 -4
  6. package/package.json +11 -10
package/LICENSE.md CHANGED
@@ -8,15 +8,15 @@ Lily Design System™ is free open source software.
8
8
 
9
9
  License is any of these, at your option, or contact us for custom license options.
10
10
 
11
- * [MIT](https://opensource.org/license/mit) ([SPDX: MIT](https://spdx.org/licenses/MIT.html))
11
+ - [MIT](https://opensource.org/license/mit) ([SPDX: MIT](https://spdx.org/licenses/MIT.html))
12
12
 
13
- * [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) ([SPDX: Apache-2.0](https://spdx.org/licenses/Apache-2.0.html))
13
+ - [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) ([SPDX: Apache-2.0](https://spdx.org/licenses/Apache-2.0.html))
14
14
 
15
- * [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))
15
+ - [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))
16
16
 
17
- * [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))
17
+ - [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))
18
18
 
19
- * [BSD 3-Clause License](https://opensource.org/license/bsd-3-clause) ([SPDX: BSD-3-Clause](https://spdx.org/licenses/BSD-3-Clause.html))
19
+ - [BSD 3-Clause License](https://opensource.org/license/bsd-3-clause) ([SPDX: BSD-3-Clause](https://spdx.org/licenses/BSD-3-Clause.html))
20
20
 
21
21
  ## SPDX
22
22
 
@@ -31,9 +31,9 @@ single identifier from the list where the packaging format does not accept a
31
31
  disjunction. You do not need permission to pick one: choose whichever member of
32
32
  the list suits your project and comply with that one.
33
33
 
34
- This applies to the whole repository — the component catalog, the seven headless
35
- libraries, the seven example applications, the seven helper catalogs, the
36
- `themes/` stylesheets, the `bin/` tooling, and the documentation.
34
+ This applies to the whole repository — the component catalog, the headless
35
+ libraries, the example applications, the helper packages, the `themes/`
36
+ stylesheets, the `bin/` tooling, and the documentation.
37
37
 
38
38
  ## Scope note
39
39
 
package/README.md CHANGED
@@ -33,7 +33,10 @@ them, not a reimplementation.
33
33
  import "@lilydesignsystem/web-components-picker-bar";
34
34
  </script>
35
35
 
36
- <lily-picker-bar id="header-picker-bar" themes-url="/assets/themes/"></lily-picker-bar>
36
+ <lily-picker-bar
37
+ id="header-picker-bar"
38
+ themes-url="/assets/themes/"
39
+ ></lily-picker-bar>
37
40
 
38
41
  <script type="module">
39
42
  const bar = document.getElementById("header-picker-bar");
@@ -64,13 +67,13 @@ spec) — objects and functions cannot be expressed as HTML attributes
64
67
  written directly in HTML, as shown above.
65
68
 
66
69
  That's a complete, working header row: site search (a search for
67
- `foo` goes to `/?foo`), 45 themes, four locales, the
70
+ `foo` goes to `/?foo`), 63 themes, four locales, the
68
71
  seven-step text-size scale, and one share destination plus
69
72
  copy-to-URL if you add `bar.shareProps = { copyLabel: "Copy link" }`.
70
73
 
71
74
  ## Defaults
72
75
 
73
- - **`themes`** defaults to `DEFAULT_THEMES` — all 45 Lily reference
76
+ - **`themes`** defaults to `DEFAULT_THEMES` — all 63 Lily reference
74
77
  theme slugs, alphabetical, with the 8 United Kingdom / United States
75
78
  government themes moved to their own alphabetical group at the
76
79
  bottom. Set `bar.themes = [...]` (or the `themes="a,b,c"` attribute)
@@ -94,7 +97,11 @@ Each wrapped picker takes a `*Props` bag for anything beyond what
94
97
  value, detection, a `*Labels` override map, a custom glyph:
95
98
 
96
99
  ```js
97
- bar.searchProps = { action: "/search", placeholder: "Search…", navigate: (href) => router.push(href) };
100
+ bar.searchProps = {
101
+ action: "/search",
102
+ placeholder: "Search…",
103
+ navigate: (href) => router.push(href),
104
+ };
98
105
  bar.themeProps = { storageKey: "lily-theme", detectFromSystem: true };
99
106
  bar.localeProps = { storageKey: "lily-locale", detectFromNavigator: true };
100
107
  bar.textSizeProps = { storageKey: "lily-text-size" };
package/dist/index.d.ts CHANGED
@@ -23,7 +23,7 @@ import { ShareTarget, SharePickerProps } from '@lilydesignsystem/web-components-
23
23
  */
24
24
 
25
25
  /**
26
- * All 57 Lily reference theme slugs (see `themes/` at the repo root),
26
+ * All 63 Lily reference theme slugs (see `themes/` at the repo root),
27
27
  * sorted alphabetically except the United Kingdom and United States
28
28
  * government/public-sector themes, which sort last as one alphabetical
29
29
  * group of their own. Mirrors `<lily-theme-picker>`'s own title-casing
@@ -44,12 +44,16 @@ type PickerBarLabels = {
44
44
  * supplied; the link picker renders only when both are present.
45
45
  */
46
46
  link?: string;
47
- /** Accessible name for the search picker's button and search landmark. */
48
- search: string;
47
+ /**
48
+ * Accessible name for the search picker's button and search landmark. Optional: omitted or empty, the bar has no search
49
+ * picker (a client-side app whose search would navigate away from its state can leave it out). When given, `searchInput`
50
+ * and `searchSubmit` are needed too.
51
+ */
52
+ search?: string;
49
53
  /** Accessible name for the search picker's text field. */
50
- searchInput: string;
54
+ searchInput?: string;
51
55
  /** Accessible name for the search picker's ⏎ submit button. */
52
- searchSubmit: string;
56
+ searchSubmit?: string;
53
57
  /** Accessible name for the theme picker's button and listbox. */
54
58
  theme: string;
55
59
  /** Accessible name for the locale picker's button and listbox. */
package/dist/index.js CHANGED
@@ -13,10 +13,13 @@ var DEFAULT_THEMES = [
13
13
  "ant-design",
14
14
  "aqua",
15
15
  "atlassian",
16
+ "australia-agriculture-design-system",
16
17
  "autumn",
17
18
  "black",
19
+ "brazil-padrao-digital-de-governo",
18
20
  "bumblebee",
19
21
  "business",
22
+ "canada-government-of-canada-design-system",
20
23
  "cappuccino",
21
24
  "caramellatte",
22
25
  "cmyk",
@@ -28,6 +31,7 @@ var DEFAULT_THEMES = [
28
31
  "dim",
29
32
  "dracula",
30
33
  "emerald",
34
+ "european-union-europa-component-library",
31
35
  "excel",
32
36
  "fantasy",
33
37
  "fluent",
@@ -36,6 +40,7 @@ var DEFAULT_THEMES = [
36
40
  "github-primer",
37
41
  "halloween",
38
42
  "ibm-carbon",
43
+ "japan-digital-agency-design-system",
39
44
  "lemonade",
40
45
  "light",
41
46
  "linear",
@@ -50,6 +55,7 @@ var DEFAULT_THEMES = [
50
55
  "salesforce",
51
56
  "sap-fiori",
52
57
  "silk",
58
+ "singapore-government-design-system",
53
59
  "sunset",
54
60
  "synthwave",
55
61
  "valentine",
@@ -164,9 +170,9 @@ var PickerBar = class extends HTMLElement {
164
170
  this.#syncLink();
165
171
  this.#syncTimeZone();
166
172
  if (this.#searchEl) {
167
- this.#searchEl.label = this.#labels.search;
168
- this.#searchEl.inputLabel = this.#labels.searchInput;
169
- this.#searchEl.submitLabel = this.#labels.searchSubmit;
173
+ this.#searchEl.label = this.#labels.search ?? "";
174
+ this.#searchEl.inputLabel = this.#labels.searchInput ?? "";
175
+ this.#searchEl.submitLabel = this.#labels.searchSubmit ?? "";
170
176
  }
171
177
  if (this.#themeEl) this.#themeEl.label = this.#labels.theme;
172
178
  if (this.#localeEl) this.#localeEl.label = this.#labels.locale;
@@ -325,12 +331,15 @@ var PickerBar = class extends HTMLElement {
325
331
  const root = document.createElement("div");
326
332
  root.className = `picker-bar ${extraClass}`.trim();
327
333
  this.replaceChildren(root);
328
- const searchEl = document.createElement("lily-search-picker");
329
- searchEl.label = this.#labels.search;
330
- searchEl.inputLabel = this.#labels.searchInput;
331
- searchEl.submitLabel = this.#labels.searchSubmit;
332
- Object.assign(searchEl, this.#searchProps);
333
- root.appendChild(searchEl);
334
+ let searchEl = null;
335
+ if (this.#labels.search) {
336
+ searchEl = document.createElement("lily-search-picker");
337
+ searchEl.label = this.#labels.search;
338
+ searchEl.inputLabel = this.#labels.searchInput ?? "";
339
+ searchEl.submitLabel = this.#labels.searchSubmit ?? "";
340
+ Object.assign(searchEl, this.#searchProps);
341
+ root.appendChild(searchEl);
342
+ }
334
343
  const themeEl = document.createElement("lily-theme-picker");
335
344
  themeEl.label = this.#labels.theme;
336
345
  themeEl.themesUrl = this.themesUrl;
@@ -342,9 +351,7 @@ var PickerBar = class extends HTMLElement {
342
351
  localeEl.locales = this.#locales;
343
352
  Object.assign(localeEl, this.#localeProps);
344
353
  root.appendChild(localeEl);
345
- const textSizeEl = document.createElement(
346
- "lily-text-size-picker"
347
- );
354
+ const textSizeEl = document.createElement("lily-text-size-picker");
348
355
  textSizeEl.label = this.#labels.textSize;
349
356
  textSizeEl.sizes = this.#sizes;
350
357
  textSizeEl.defaultValue = "normal";
package/index.md CHANGED
@@ -33,7 +33,10 @@ them, not a reimplementation.
33
33
  import "@lilydesignsystem/web-components-picker-bar";
34
34
  </script>
35
35
 
36
- <lily-picker-bar id="header-picker-bar" themes-url="/assets/themes/"></lily-picker-bar>
36
+ <lily-picker-bar
37
+ id="header-picker-bar"
38
+ themes-url="/assets/themes/"
39
+ ></lily-picker-bar>
37
40
 
38
41
  <script type="module">
39
42
  const bar = document.getElementById("header-picker-bar");
@@ -64,13 +67,13 @@ spec) — objects and functions cannot be expressed as HTML attributes
64
67
  written directly in HTML, as shown above.
65
68
 
66
69
  That's a complete, working header row: site search (a search for
67
- `foo` goes to `/?foo`), 45 themes, four locales, the
70
+ `foo` goes to `/?foo`), 63 themes, four locales, the
68
71
  seven-step text-size scale, and one share destination plus
69
72
  copy-to-URL if you add `bar.shareProps = { copyLabel: "Copy link" }`.
70
73
 
71
74
  ## Defaults
72
75
 
73
- - **`themes`** defaults to `DEFAULT_THEMES` — all 45 Lily reference
76
+ - **`themes`** defaults to `DEFAULT_THEMES` — all 63 Lily reference
74
77
  theme slugs, alphabetical, with the 8 United Kingdom / United States
75
78
  government themes moved to their own alphabetical group at the
76
79
  bottom. Set `bar.themes = [...]` (or the `themes="a,b,c"` attribute)
@@ -94,7 +97,11 @@ Each wrapped picker takes a `*Props` bag for anything beyond what
94
97
  value, detection, a `*Labels` override map, a custom glyph:
95
98
 
96
99
  ```js
97
- bar.searchProps = { action: "/search", placeholder: "Search…", navigate: (href) => router.push(href) };
100
+ bar.searchProps = {
101
+ action: "/search",
102
+ placeholder: "Search…",
103
+ navigate: (href) => router.push(href),
104
+ };
98
105
  bar.themeProps = { storageKey: "lily-theme", detectFromSystem: true };
99
106
  bar.localeProps = { storageKey: "lily-locale", detectFromNavigator: true };
100
107
  bar.textSizeProps = { storageKey: "lily-text-size" };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lilydesignsystem/web-components-picker-bar",
3
- "version": "0.5.0",
3
+ "version": "0.6.0",
4
4
  "engines": {
5
5
  "node": ">=26"
6
6
  },
@@ -23,23 +23,24 @@
23
23
  "scripts": {
24
24
  "build": "node build.js",
25
25
  "test": "vitest run",
26
+ "check": "tsc --noEmit",
26
27
  "test:watch": "vitest",
27
28
  "prepublishOnly": "npm run build"
28
29
  },
29
30
  "dependencies": {
30
- "@lilydesignsystem/web-components-link-picker": "^0.1.0",
31
- "@lilydesignsystem/web-components-search-picker": "^0.1.0",
32
- "@lilydesignsystem/web-components-theme-picker": "^0.2.0",
33
- "@lilydesignsystem/web-components-locale-picker": "^0.2.0",
34
- "@lilydesignsystem/web-components-text-size-picker": "^0.2.0",
35
- "@lilydesignsystem/web-components-time-zone-picker": "^0.1.0",
36
- "@lilydesignsystem/web-components-share-picker": "^0.2.0"
31
+ "@lilydesignsystem/web-components-link-picker": "^0.2.0",
32
+ "@lilydesignsystem/web-components-locale-picker": "^0.3.1",
33
+ "@lilydesignsystem/web-components-search-picker": "^0.2.0",
34
+ "@lilydesignsystem/web-components-share-picker": "^0.3.0",
35
+ "@lilydesignsystem/web-components-text-size-picker": "^0.3.0",
36
+ "@lilydesignsystem/web-components-theme-picker": "^0.3.0",
37
+ "@lilydesignsystem/web-components-time-zone-picker": "^0.1.0"
37
38
  },
38
39
  "devDependencies": {
39
- "jsdom": "^30.1.1",
40
+ "jsdom": "^30.1.3",
40
41
  "tsup": "^9.0.0",
41
42
  "typescript": "^5.9.3",
42
- "vitest": "^4.1.11"
43
+ "vitest": "^5.0.5"
43
44
  },
44
45
  "keywords": [
45
46
  "lily",