@lilydesignsystem/web-components-picker-bar 0.4.0 → 0.5.1

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 (5) hide show
  1. package/README.md +137 -0
  2. package/dist/index.d.ts +12 -1
  3. package/dist/index.js +31 -0
  4. package/index.md +2 -0
  5. package/package.json +12 -11
package/README.md ADDED
@@ -0,0 +1,137 @@
1
+ # Lily Design System™ — `<lily-picker-bar>`
2
+
3
+ > **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.
4
+
5
+ > **Time zone picker (0.5.0).** Set `labels.timeZone` and `timeZoneProps = { locale: "fr" }` (plus any `<lily-time-zone-picker>` property, e.g. `names`) to add a `time-zone-picker` — time zones by UTC offset with their full names — right after the locale picker. It renders only when both the label and the locale are given. To name the text sizes in the reader's language pass `sizeLabels` through the text-size props (`textSizeLabels(pack)` / `LocaleTranslations.TextSizeLabels(locale)` from the locale-translations package).
6
+
7
+ A single page-header row that composes five of the Lily
8
+ [`*-picker` helpers](../index.md) — search, theme, locale, text size,
9
+ and share, in that order — with two catalog-wide defaults pre-wired,
10
+ so you can drop one custom element into a header instead of
11
+ assembling and configuring five.
12
+
13
+ `<lily-motion-picker>` and `<lily-date-time-picker>` are not part of
14
+ the bar: motion has no natural spot next to the other three header
15
+ preferences, and `<lily-date-time-picker>` is a form control, not a
16
+ header control.
17
+
18
+ ## Install
19
+
20
+ ```sh
21
+ npm install @lilydesignsystem/web-components-picker-bar
22
+ ```
23
+
24
+ `@lilydesignsystem/web-components-search-picker`, `-theme-picker`,
25
+ `-locale-picker`, `-text-size-picker`, and `-share-picker` install automatically as
26
+ regular dependencies — `<lily-picker-bar>` is a thin wrapper around
27
+ them, not a reimplementation.
28
+
29
+ ## Usage
30
+
31
+ ```html
32
+ <script type="module">
33
+ import "@lilydesignsystem/web-components-picker-bar";
34
+ </script>
35
+
36
+ <lily-picker-bar id="header-picker-bar" themes-url="/assets/themes/"></lily-picker-bar>
37
+
38
+ <script type="module">
39
+ const bar = document.getElementById("header-picker-bar");
40
+ bar.labels = {
41
+ search: "Search this site",
42
+ searchInput: "Search terms",
43
+ searchSubmit: "Search",
44
+ theme: "Theme",
45
+ locale: "Language",
46
+ textSize: "Text size",
47
+ share: "Share",
48
+ };
49
+ bar.locales = ["en", "cy", "gd", "ga"];
50
+ bar.shareTargets = [
51
+ {
52
+ id: "email",
53
+ label: "Email",
54
+ href: (url, title) => `mailto:?subject=${title}&body=${url}`,
55
+ },
56
+ ];
57
+ </script>
58
+ ```
59
+
60
+ `labels`, `locales`, and `shareTargets` are property-only (§4.3 of the
61
+ spec) — objects and functions cannot be expressed as HTML attributes
62
+ — so set them from script, before or after the element connects.
63
+ `themes-url` (required) and `class` are plain attributes and can be
64
+ written directly in HTML, as shown above.
65
+
66
+ That's a complete, working header row: site search (a search for
67
+ `foo` goes to `/?foo`), 45 themes, four locales, the
68
+ seven-step text-size scale, and one share destination plus
69
+ copy-to-URL if you add `bar.shareProps = { copyLabel: "Copy link" }`.
70
+
71
+ ## Defaults
72
+
73
+ - **`themes`** defaults to `DEFAULT_THEMES` — all 45 Lily reference
74
+ theme slugs, alphabetical, with the 8 United Kingdom / United States
75
+ government themes moved to their own alphabetical group at the
76
+ bottom. Set `bar.themes = [...]` (or the `themes="a,b,c"` attribute)
77
+ to override.
78
+ - **`sizes`** defaults to `DEFAULT_SIZES` — the seven-step scale
79
+ `largest`, `larger`, `large`, `normal`, `small`, `smaller`,
80
+ `smallest` — and the text-size picker starts on `normal`. Set
81
+ `bar.sizes = [...]` (and `bar.textSizeProps = { defaultValue: "…" }`
82
+ if you want a different starting point) to override.
83
+
84
+ Both are exported as named constants:
85
+
86
+ ```js
87
+ import { DEFAULT_THEMES, DEFAULT_SIZES } from "@lilydesignsystem/web-components-picker-bar";
88
+ ```
89
+
90
+ ## Passing extra properties to one picker
91
+
92
+ Each wrapped picker takes a `*Props` bag for anything beyond what
93
+ `<lily-picker-bar>` lifts to the top level — persistence, initial
94
+ value, detection, a `*Labels` override map, a custom glyph:
95
+
96
+ ```js
97
+ bar.searchProps = { action: "/search", placeholder: "Search…", navigate: (href) => router.push(href) };
98
+ bar.themeProps = { storageKey: "lily-theme", detectFromSystem: true };
99
+ bar.localeProps = { storageKey: "lily-locale", detectFromNavigator: true };
100
+ bar.textSizeProps = { storageKey: "lily-text-size" };
101
+ bar.shareProps = { copyLabel: "Copy link", copiedLabel: "Copied" };
102
+ ```
103
+
104
+ Anything in a `*Props` bag wins over `<lily-picker-bar>`'s own default
105
+ for that picker.
106
+
107
+ ## Styling
108
+
109
+ `<lily-picker-bar>` renders no CSS of its own class beyond the
110
+ `picker-bar` root wrapper — style each child through its own
111
+ package's class hooks (`search-picker`, `theme-picker`, `locale-picker`,
112
+ `text-size-picker`, `share-picker`; see each package's own `index.md`).
113
+ A typical header layout:
114
+
115
+ ```css
116
+ .picker-bar {
117
+ display: flex;
118
+ gap: var(--theme-space-sm, 0.5rem);
119
+ align-items: center;
120
+ }
121
+ ```
122
+
123
+ ## Accessibility
124
+
125
+ Every accessible name comes from `labels` — there is no English
126
+ default, because a set of names this catalog invented is exactly the
127
+ case the rest of Lily's i18n rule exists for. Each wrapped picker
128
+ keeps its own WAI-ARIA APG contract unchanged; see that picker's own
129
+ `index.md`.
130
+
131
+ ## Full contract
132
+
133
+ See [`spec/index.md`](./spec/index.md).
134
+
135
+ ---
136
+
137
+ Lily™ and Lily Design System™ are trademarks.
package/dist/index.d.ts CHANGED
@@ -3,6 +3,7 @@ import { SearchPickerProps } from '@lilydesignsystem/web-components-search-picke
3
3
  import { ThemePickerProps } from '@lilydesignsystem/web-components-theme-picker';
4
4
  import { LocalePickerProps } from '@lilydesignsystem/web-components-locale-picker';
5
5
  import { TextSizePickerProps } from '@lilydesignsystem/web-components-text-size-picker';
6
+ import { TimeZonePickerProps } from '@lilydesignsystem/web-components-time-zone-picker';
6
7
  import { ShareTarget, SharePickerProps } from '@lilydesignsystem/web-components-share-picker';
7
8
 
8
9
  /**
@@ -55,6 +56,11 @@ type PickerBarLabels = {
55
56
  locale: string;
56
57
  /** Accessible name for the text-size picker's button and listbox. */
57
58
  textSize: string;
59
+ /**
60
+ * Accessible name for the time-zone picker's button and listbox. Needed only when
61
+ * `timeZoneProps.locale` is supplied; the time-zone picker renders only when both are present.
62
+ */
63
+ timeZone?: string;
58
64
  /** Accessible name for the share picker's button and list. */
59
65
  share: string;
60
66
  };
@@ -76,6 +82,8 @@ type PickerBarProps = {
76
82
  /** Property-only extra `<lily-locale-picker>` config, applied after the bar's own. */
77
83
  localeProps?: Partial<Omit<LocalePickerProps, "locales" | "label">>;
78
84
  sizes?: string[];
85
+ /** Property-only extra `<lily-time-zone-picker>` config; `locale` (names and sorts the zones) is required for it to render, after the locale picker. */
86
+ timeZoneProps?: Partial<Omit<TimeZonePickerProps, "label">>;
79
87
  /** Property-only extra `<lily-text-size-picker>` config, applied after the bar's own. */
80
88
  textSizeProps?: Partial<Omit<TextSizePickerProps, "sizes" | "label">>;
81
89
  /** Property-only — `ShareTarget.href` is a function. */
@@ -115,6 +123,8 @@ declare class PickerBar extends HTMLElement {
115
123
  set themeProps(v: Partial<ThemePickerProps>);
116
124
  get localeProps(): Partial<LocalePickerProps>;
117
125
  set localeProps(v: Partial<LocalePickerProps>);
126
+ get timeZoneProps(): Partial<TimeZonePickerProps>;
127
+ set timeZoneProps(v: Partial<TimeZonePickerProps>);
118
128
  get textSizeProps(): Partial<TextSizePickerProps>;
119
129
  set textSizeProps(v: Partial<TextSizePickerProps>);
120
130
  get shareProps(): Partial<SharePickerProps>;
@@ -123,4 +133,5 @@ declare class PickerBar extends HTMLElement {
123
133
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
124
134
  }
125
135
 
126
- export { DEFAULT_SIZES, DEFAULT_THEMES, PickerBar, type PickerBarLabels, type PickerBarProps };
136
+ export { DEFAULT_SIZES, DEFAULT_THEMES, PickerBar };
137
+ export type { PickerBarLabels, PickerBarProps };
package/dist/index.js CHANGED
@@ -4,6 +4,7 @@ import "@lilydesignsystem/web-components-search-picker";
4
4
  import "@lilydesignsystem/web-components-theme-picker";
5
5
  import "@lilydesignsystem/web-components-locale-picker";
6
6
  import "@lilydesignsystem/web-components-text-size-picker";
7
+ import "@lilydesignsystem/web-components-time-zone-picker";
7
8
  import "@lilydesignsystem/web-components-share-picker";
8
9
  var DEFAULT_THEMES = [
9
10
  "abyss",
@@ -100,6 +101,7 @@ var PickerBar = class extends HTMLElement {
100
101
  #themeProps = {};
101
102
  #localeProps = {};
102
103
  #textSizeProps = {};
104
+ #timeZoneProps = {};
103
105
  #shareProps = {};
104
106
  #built = false;
105
107
  #rootEl = null;
@@ -108,6 +110,7 @@ var PickerBar = class extends HTMLElement {
108
110
  #themeEl = null;
109
111
  #localeEl = null;
110
112
  #textSizeEl = null;
113
+ #timeZoneEl = null;
111
114
  #shareEl = null;
112
115
  // ---- Property accessors ----
113
116
  get themesUrl() {
@@ -159,6 +162,7 @@ var PickerBar = class extends HTMLElement {
159
162
  set labels(v) {
160
163
  this.#labels = v ?? { ...DEFAULT_LABELS };
161
164
  this.#syncLink();
165
+ this.#syncTimeZone();
162
166
  if (this.#searchEl) {
163
167
  this.#searchEl.label = this.#labels.search;
164
168
  this.#searchEl.inputLabel = this.#labels.searchInput;
@@ -238,6 +242,31 @@ var PickerBar = class extends HTMLElement {
238
242
  this.#localeProps = v ?? {};
239
243
  if (this.#localeEl) Object.assign(this.#localeEl, this.#localeProps);
240
244
  }
245
+ get timeZoneProps() {
246
+ return { ...this.#timeZoneProps };
247
+ }
248
+ set timeZoneProps(v) {
249
+ this.#timeZoneProps = v ?? {};
250
+ this.#syncTimeZone();
251
+ }
252
+ /** The time-zone picker exists only with `labels.timeZone` and `timeZoneProps.locale`; it sits just after the locale picker. */
253
+ #syncTimeZone() {
254
+ if (!this.#rootEl) return;
255
+ const wanted = !!this.#labels.timeZone && !!this.#timeZoneProps.locale;
256
+ if (!wanted) {
257
+ this.#timeZoneEl?.remove();
258
+ this.#timeZoneEl = null;
259
+ return;
260
+ }
261
+ const el = this.#timeZoneEl ?? document.createElement("lily-time-zone-picker");
262
+ el.locale = this.#timeZoneProps.locale;
263
+ Object.assign(el, this.#timeZoneProps);
264
+ el.label = this.#labels.timeZone;
265
+ if (!this.#timeZoneEl) {
266
+ this.#timeZoneEl = el;
267
+ this.#rootEl.insertBefore(el, this.#textSizeEl);
268
+ }
269
+ }
241
270
  get textSizeProps() {
242
271
  return { ...this.#textSizeProps };
243
272
  }
@@ -333,7 +362,9 @@ var PickerBar = class extends HTMLElement {
333
362
  this.#textSizeEl = textSizeEl;
334
363
  this.#shareEl = shareEl;
335
364
  this.#linkEl = null;
365
+ this.#timeZoneEl = null;
336
366
  this.#syncLink();
367
+ this.#syncTimeZone();
337
368
  }
338
369
  };
339
370
 
package/index.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  > **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.
4
4
 
5
+ > **Time zone picker (0.5.0).** Set `labels.timeZone` and `timeZoneProps = { locale: "fr" }` (plus any `<lily-time-zone-picker>` property, e.g. `names`) to add a `time-zone-picker` — time zones by UTC offset with their full names — right after the locale picker. It renders only when both the label and the locale are given. To name the text sizes in the reader's language pass `sizeLabels` through the text-size props (`textSizeLabels(pack)` / `LocaleTranslations.TextSizeLabels(locale)` from the locale-translations package).
6
+
5
7
  A single page-header row that composes five of the Lily
6
8
  [`*-picker` helpers](../index.md) — search, theme, locale, text size,
7
9
  and share, in that order — with two catalog-wide defaults pre-wired,
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@lilydesignsystem/web-components-picker-bar",
3
- "version": "0.4.0",
3
+ "version": "0.5.1",
4
4
  "engines": {
5
- "node": "=26"
5
+ "node": ">=26"
6
6
  },
7
7
  "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.",
8
8
  "type": "module",
@@ -27,18 +27,19 @@
27
27
  "prepublishOnly": "npm run build"
28
28
  },
29
29
  "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-share-picker": "^0.2.0"
30
+ "@lilydesignsystem/web-components-link-picker": "^0.2.0",
31
+ "@lilydesignsystem/web-components-locale-picker": "^0.3.1",
32
+ "@lilydesignsystem/web-components-search-picker": "^0.2.0",
33
+ "@lilydesignsystem/web-components-share-picker": "^0.3.0",
34
+ "@lilydesignsystem/web-components-text-size-picker": "^0.3.0",
35
+ "@lilydesignsystem/web-components-theme-picker": "^0.3.0",
36
+ "@lilydesignsystem/web-components-time-zone-picker": "^0.1.0"
36
37
  },
37
38
  "devDependencies": {
38
- "jsdom": "^30.1.1",
39
- "tsup": "^8.5.1",
39
+ "jsdom": "^30.1.3",
40
+ "tsup": "^9.0.0",
40
41
  "typescript": "^5.9.3",
41
- "vitest": "^4.1.11"
42
+ "vitest": "^4.1.12"
42
43
  },
43
44
  "keywords": [
44
45
  "lily",