@jungherz-de/glasskit-elements 1.19.1 → 1.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/glasskit-elements",
-  "version": "1.19.1",
+  "version": "1.19.2",
   "description": "Vanilla JavaScript Web Components wrapping the GlassKit CSS glassmorphism library",
   "license": "MIT",
   "homepage": "https://glasskit-elements.jungherz.com",

package/src/components/forms/glk-calendar.js

@@ -7,7 +7,7 @@ import { isoDate, parseIso, addDays, parseJsonObject, resolveLocale, formatters,
 //             today), value (YYYY-MM-DD), today (YYYY-MM-DD), min, max
 //             (YYYY-MM-DD; days outside cannot be picked), marks (JSON
 //             {date: tone | [tone, …]}, up to three dots), locale (default
-//             the browser language), week-start (0 = Sunday … 6 = Saturday;
+//             the page language, else the browser's), week-start (0 = Sunday … 6 = Saturday;
 //             default from the locale, Monday where the browser cannot say),
 //             label (aria-label of the day group), prev-label / next-label
 //             (names of the nav buttons, English by default)
@@ -65,7 +65,7 @@ class GlkCalendar extends GlkFormElement {
   get _todayIso() { return this.getAttribute('today') || isoDate(new Date()); }
 
   _build() {
-    const locale = resolveLocale(this.getAttribute('locale'));
+    const locale = resolveLocale(this.getAttribute('locale'), this);
     const f = formatters(locale);
     const month = this.month;
     const first = parseIso(month);
@@ -242,7 +242,7 @@ class GlkCalendar extends GlkFormElement {
   get marks() { return parseJsonObject(this.getAttribute('marks')); }
   set marks(v) { this.setAttribute('marks', typeof v === 'string' ? v : JSON.stringify(v ?? {})); }
 
-  get locale() { return resolveLocale(this.getAttribute('locale')); }
+  get locale() { return resolveLocale(this.getAttribute('locale'), this); }
   set locale(v) {
     if (v) this.setAttribute('locale', v);
     else this.removeAttribute('locale');

package/src/components/navigation/glk-date-strip.js

@@ -8,7 +8,8 @@ import { revealCentered } from '../../reveal.js';
 // Attributes: start (YYYY-MM-DD, default today), days (count, default 7),
 //             value (YYYY-MM-DD), today (YYYY-MM-DD, default the browser's
 //             day), marks (JSON {date: tone | {tone, disabled}}), locale
-//             (default the browser language), label (aria-label of the group)
+//             (default the page language, else the browser's), label
+//             (aria-label of the group)
 // Properties: value, marks (object or JSON text), locale, label
 // Event:      glk-change { value } — only on a change made by the user
 // Part:       strip
@@ -41,7 +42,7 @@ class GlkDateStrip extends GlkElement {
   }
 
   _build() {
-    const f = formatters(resolveLocale(this.getAttribute('locale')));
+    const f = formatters(resolveLocale(this.getAttribute('locale'), this));
     const marks = parseJsonObject(this.getAttribute('marks'));
     const start = parseIso(this.getAttribute('start')) ?? new Date();
     const today = this.getAttribute('today') || isoDate(new Date());
@@ -153,7 +154,7 @@ class GlkDateStrip extends GlkElement {
   get marks() { return parseJsonObject(this.getAttribute('marks')); }
   set marks(v) { this.setAttribute('marks', typeof v === 'string' ? v : JSON.stringify(v ?? {})); }
 
-  get locale() { return resolveLocale(this.getAttribute('locale')); }
+  get locale() { return resolveLocale(this.getAttribute('locale'), this); }
   set locale(v) {
     if (v) this.setAttribute('locale', v);
     else this.removeAttribute('locale');

package/src/dates.js

@@ -1,8 +1,8 @@
 // Date helpers shared by <glk-date-strip> and <glk-calendar>. Everything
 // works on local calendar days — a date is "YYYY-MM-DD" in the element API
 // and a local Date inside — so a day never shifts across midnight the way a
-// UTC timestamp would. Names come from Intl, keyed by the element's locale
-// attribute or the browser language.
+// UTC timestamp would. Names come from Intl, in the language resolveLocale()
+// finds for the element.
 
 export const pad = n => String(n).padStart(2, '0');
 
@@ -30,8 +30,29 @@ export function parseJsonObject(text) {
   }
 }
 
-export function resolveLocale(attr) {
-  return attr || (typeof navigator !== 'undefined' && navigator.language) || 'en';
+/**
+ * The language to name days and months in: the element's locale attribute;
+ * else the language of the page around it — the lang of the nearest
+ * ancestor, looked up across shadow roots through their hosts, so
+ * <html lang="de"> reaches an element inside another component's shadow
+ * tree and a <section lang="en"> in a German page stays English; else the
+ * browser's; else English. An empty lang means "unknown" in HTML and falls
+ * through to the browser's language. (Since 1.19.2 — before, the browser's
+ * language came right after the attribute.)
+ */
+export function resolveLocale(attr, el) {
+  if (attr) return attr;
+  for (let node = el; node; ) {
+    const tagged = node.closest?.('[lang]');
+    if (tagged) {
+      const lang = tagged.getAttribute('lang').trim();
+      if (lang) return lang;
+      break;
+    }
+    const root = node.getRootNode?.();
+    node = typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot ? root.host : null;
+  }
+  return (typeof navigator !== 'undefined' && navigator.language) || 'en';
 }
 
 // Intl formatters are cheap to keep and not to make; one set per locale.