@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.
- package/README.md +137 -0
- package/dist/index.d.ts +12 -1
- package/dist/index.js +31 -0
- package/index.md +2 -0
- 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
|
|
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.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"engines": {
|
|
5
|
-
"node": "
|
|
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.
|
|
31
|
-
"@lilydesignsystem/web-components-
|
|
32
|
-
"@lilydesignsystem/web-components-
|
|
33
|
-
"@lilydesignsystem/web-components-
|
|
34
|
-
"@lilydesignsystem/web-components-text-size-picker": "^0.
|
|
35
|
-
"@lilydesignsystem/web-components-
|
|
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.
|
|
39
|
-
"tsup": "^
|
|
39
|
+
"jsdom": "^30.1.3",
|
|
40
|
+
"tsup": "^9.0.0",
|
|
40
41
|
"typescript": "^5.9.3",
|
|
41
|
-
"vitest": "^4.1.
|
|
42
|
+
"vitest": "^4.1.12"
|
|
42
43
|
},
|
|
43
44
|
"keywords": [
|
|
44
45
|
"lily",
|