@lilydesignsystem/web-components-picker-bar 0.3.0 → 0.5.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/README.md

@@ -0,0 +1,137 @@
+# Lily Design System™ — `<lily-picker-bar>`
+
+> **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.
+
+> **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).
+
+A single page-header row 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 pre-wired,
+so you can drop one custom element into a header instead of
+assembling and configuring five.
+
+`<lily-motion-picker>` and `<lily-date-time-picker>` are not part of
+the bar: motion has no natural spot next to the other three header
+preferences, and `<lily-date-time-picker>` is a form control, not a
+header control.
+
+## Install
+
+```sh
+npm install @lilydesignsystem/web-components-picker-bar
+```
+
+`@lilydesignsystem/web-components-search-picker`, `-theme-picker`,
+`-locale-picker`, `-text-size-picker`, and `-share-picker` install automatically as
+regular dependencies — `<lily-picker-bar>` is a thin wrapper around
+them, not a reimplementation.
+
+## Usage
+
+```html
+<script type="module">
+  import "@lilydesignsystem/web-components-picker-bar";
+</script>
+
+<lily-picker-bar id="header-picker-bar" themes-url="/assets/themes/"></lily-picker-bar>
+
+<script type="module">
+  const bar = document.getElementById("header-picker-bar");
+  bar.labels = {
+    search: "Search this site",
+    searchInput: "Search terms",
+    searchSubmit: "Search",
+    theme: "Theme",
+    locale: "Language",
+    textSize: "Text size",
+    share: "Share",
+  };
+  bar.locales = ["en", "cy", "gd", "ga"];
+  bar.shareTargets = [
+    {
+      id: "email",
+      label: "Email",
+      href: (url, title) => `mailto:?subject=${title}&body=${url}`,
+    },
+  ];
+</script>
+```
+
+`labels`, `locales`, and `shareTargets` are property-only (§4.3 of the
+spec) — objects and functions cannot be expressed as HTML attributes
+— so set them from script, before or after the element connects.
+`themes-url` (required) and `class` are plain attributes and can be
+written directly in HTML, as shown above.
+
+That's a complete, working header row: site search (a search for
+`foo` goes to `/?foo`), 45 themes, four locales, the
+seven-step text-size scale, and one share destination plus
+copy-to-URL if you add `bar.shareProps = { copyLabel: "Copy link" }`.
+
+## Defaults
+
+- **`themes`** defaults to `DEFAULT_THEMES` — all 45 Lily reference
+  theme slugs, alphabetical, with the 8 United Kingdom / United States
+  government themes moved to their own alphabetical group at the
+  bottom. Set `bar.themes = [...]` (or the `themes="a,b,c"` attribute)
+  to override.
+- **`sizes`** defaults to `DEFAULT_SIZES` — the seven-step scale
+  `largest`, `larger`, `large`, `normal`, `small`, `smaller`,
+  `smallest` — and the text-size picker starts on `normal`. Set
+  `bar.sizes = [...]` (and `bar.textSizeProps = { defaultValue: "…" }`
+  if you want a different starting point) to override.
+
+Both are exported as named constants:
+
+```js
+import { DEFAULT_THEMES, DEFAULT_SIZES } from "@lilydesignsystem/web-components-picker-bar";
+```
+
+## Passing extra properties to one picker
+
+Each wrapped picker takes a `*Props` bag for anything beyond what
+`<lily-picker-bar>` lifts to the top level — persistence, initial
+value, detection, a `*Labels` override map, a custom glyph:
+
+```js
+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" };
+bar.shareProps = { copyLabel: "Copy link", copiedLabel: "Copied" };
+```
+
+Anything in a `*Props` bag wins over `<lily-picker-bar>`'s own default
+for that picker.
+
+## Styling
+
+`<lily-picker-bar>` renders no CSS of its own class beyond the
+`picker-bar` root wrapper — style each child through its own
+package's class hooks (`search-picker`, `theme-picker`, `locale-picker`,
+`text-size-picker`, `share-picker`; see each package's own `index.md`).
+A typical header layout:
+
+```css
+.picker-bar {
+  display: flex;
+  gap: var(--theme-space-sm, 0.5rem);
+  align-items: center;
+}
+```
+
+## Accessibility
+
+Every accessible name comes from `labels` — there is no English
+default, because a set of names this catalog invented is exactly the
+case the rest of Lily's i18n rule exists for. Each wrapped picker
+keeps its own WAI-ARIA APG contract unchanged; see that picker's own
+`index.md`.
+
+## Full contract
+
+See [`spec/index.md`](./spec/index.md).
+
+---
+
+Lily™ and Lily Design System™ are trademarks.

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { SearchPickerProps } from '@lilydesignsystem/web-components-search-picke
 import { ThemePickerProps } from '@lilydesignsystem/web-components-theme-picker';
 import { LocalePickerProps } from '@lilydesignsystem/web-components-locale-picker';
 import { TextSizePickerProps } from '@lilydesignsystem/web-components-text-size-picker';
+import { TimeZonePickerProps } from '@lilydesignsystem/web-components-time-zone-picker';
 import { ShareTarget, SharePickerProps } from '@lilydesignsystem/web-components-share-picker';
 
 /**
@@ -22,7 +23,7 @@ import { ShareTarget, SharePickerProps } from '@lilydesignsystem/web-components-
  */
 
 /**
- * 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 `<lily-theme-picker>`'s own title-casing
@@ -55,6 +56,11 @@ type PickerBarLabels = {
     locale: string;
     /** Accessible name for the text-size picker's button and listbox. */
     textSize: string;
+    /**
+     * Accessible name for the time-zone picker's button and listbox. Needed only when
+     * `timeZoneProps.locale` is supplied; the time-zone picker renders only when both are present.
+     */
+    timeZone?: string;
     /** Accessible name for the share picker's button and list. */
     share: string;
 };
@@ -76,6 +82,8 @@ type PickerBarProps = {
     /** Property-only extra `<lily-locale-picker>` config, applied after the bar's own. */
     localeProps?: Partial<Omit<LocalePickerProps, "locales" | "label">>;
     sizes?: string[];
+    /** Property-only extra `<lily-time-zone-picker>` config; `locale` (names and sorts the zones) is required for it to render, after the locale picker. */
+    timeZoneProps?: Partial<Omit<TimeZonePickerProps, "label">>;
     /** Property-only extra `<lily-text-size-picker>` config, applied after the bar's own. */
     textSizeProps?: Partial<Omit<TextSizePickerProps, "sizes" | "label">>;
     /** Property-only — `ShareTarget.href` is a function. */
@@ -115,6 +123,8 @@ declare class PickerBar extends HTMLElement {
     set themeProps(v: Partial<ThemePickerProps>);
     get localeProps(): Partial<LocalePickerProps>;
     set localeProps(v: Partial<LocalePickerProps>);
+    get timeZoneProps(): Partial<TimeZonePickerProps>;
+    set timeZoneProps(v: Partial<TimeZonePickerProps>);
     get textSizeProps(): Partial<TextSizePickerProps>;
     set textSizeProps(v: Partial<TextSizePickerProps>);
     get shareProps(): Partial<SharePickerProps>;
@@ -123,4 +133,5 @@ declare class PickerBar extends HTMLElement {
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
 }
 
-export { DEFAULT_SIZES, DEFAULT_THEMES, PickerBar, type PickerBarLabels, type PickerBarProps };
+export { DEFAULT_SIZES, DEFAULT_THEMES, PickerBar };
+export type { PickerBarLabels, PickerBarProps };

package/dist/index.js

@@ -1,19 +1,23 @@
-// lily-design-system-web-components-picker-bar/picker-bar.ts
+// picker-bar.ts
 import "@lilydesignsystem/web-components-link-picker";
 import "@lilydesignsystem/web-components-search-picker";
 import "@lilydesignsystem/web-components-theme-picker";
 import "@lilydesignsystem/web-components-locale-picker";
 import "@lilydesignsystem/web-components-text-size-picker";
+import "@lilydesignsystem/web-components-time-zone-picker";
 import "@lilydesignsystem/web-components-share-picker";
 var DEFAULT_THEMES = [
   "abyss",
   "acid",
   "adobe-spectrum",
+  "ant-design",
   "aqua",
+  "atlassian",
   "autumn",
   "black",
   "bumblebee",
   "business",
+  "cappuccino",
   "caramellatte",
   "cmyk",
   "coffee",
@@ -24,23 +28,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",
@@ -88,6 +101,7 @@ var PickerBar = class extends HTMLElement {
   #themeProps = {};
   #localeProps = {};
   #textSizeProps = {};
+  #timeZoneProps = {};
   #shareProps = {};
   #built = false;
   #rootEl = null;
@@ -96,6 +110,7 @@ var PickerBar = class extends HTMLElement {
   #themeEl = null;
   #localeEl = null;
   #textSizeEl = null;
+  #timeZoneEl = null;
   #shareEl = null;
   // ---- Property accessors ----
   get themesUrl() {
@@ -147,6 +162,7 @@ var PickerBar = class extends HTMLElement {
   set labels(v) {
     this.#labels = v ?? { ...DEFAULT_LABELS };
     this.#syncLink();
+    this.#syncTimeZone();
     if (this.#searchEl) {
       this.#searchEl.label = this.#labels.search;
       this.#searchEl.inputLabel = this.#labels.searchInput;
@@ -226,6 +242,31 @@ var PickerBar = class extends HTMLElement {
     this.#localeProps = v ?? {};
     if (this.#localeEl) Object.assign(this.#localeEl, this.#localeProps);
   }
+  get timeZoneProps() {
+    return { ...this.#timeZoneProps };
+  }
+  set timeZoneProps(v) {
+    this.#timeZoneProps = v ?? {};
+    this.#syncTimeZone();
+  }
+  /** The time-zone picker exists only with `labels.timeZone` and `timeZoneProps.locale`; it sits just after the locale picker. */
+  #syncTimeZone() {
+    if (!this.#rootEl) return;
+    const wanted = !!this.#labels.timeZone && !!this.#timeZoneProps.locale;
+    if (!wanted) {
+      this.#timeZoneEl?.remove();
+      this.#timeZoneEl = null;
+      return;
+    }
+    const el = this.#timeZoneEl ?? document.createElement("lily-time-zone-picker");
+    el.locale = this.#timeZoneProps.locale;
+    Object.assign(el, this.#timeZoneProps);
+    el.label = this.#labels.timeZone;
+    if (!this.#timeZoneEl) {
+      this.#timeZoneEl = el;
+      this.#rootEl.insertBefore(el, this.#textSizeEl);
+    }
+  }
   get textSizeProps() {
     return { ...this.#textSizeProps };
   }
@@ -321,11 +362,13 @@ var PickerBar = class extends HTMLElement {
     this.#textSizeEl = textSizeEl;
     this.#shareEl = shareEl;
     this.#linkEl = null;
+    this.#timeZoneEl = null;
     this.#syncLink();
+    this.#syncTimeZone();
   }
 };
 
-// lily-design-system-web-components-picker-bar/index.ts
+// index.ts
 if (typeof customElements !== "undefined" && !customElements.get("lily-picker-bar")) {
   customElements.define("lily-picker-bar", PickerBar);
 }

package/index.md

@@ -2,6 +2,8 @@
 
 > **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.
 
+> **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).
+
 A single page-header row 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 pre-wired,

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@lilydesignsystem/web-components-picker-bar",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "engines": {
-    "node": "=26"
+    "node": ">=26"
   },
   "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.",
   "type": "module",
@@ -21,7 +21,10 @@
     "README.md"
   ],
   "scripts": {
-    "prepublishOnly": "cd .. && npm run build"
+    "build": "node build.js",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
   },
   "dependencies": {
     "@lilydesignsystem/web-components-link-picker": "^0.1.0",
@@ -29,8 +32,15 @@
     "@lilydesignsystem/web-components-theme-picker": "^0.2.0",
     "@lilydesignsystem/web-components-locale-picker": "^0.2.0",
     "@lilydesignsystem/web-components-text-size-picker": "^0.2.0",
+    "@lilydesignsystem/web-components-time-zone-picker": "^0.1.0",
     "@lilydesignsystem/web-components-share-picker": "^0.2.0"
   },
+  "devDependencies": {
+    "jsdom": "^30.1.1",
+    "tsup": "^9.0.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.11"
+  },
   "keywords": [
     "lily",
     "design",
@@ -48,7 +58,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-web-components-helpers.git",
+    "url": "git+https://github.com/LilyDesignSystem/lily-design-system.git",
     "directory": "lily-design-system-web-components-picker-bar"
   },
   "homepage": "https://lilydesignsystem.com/",