@jungherz-de/glasskit-elements 1.19.1 → 1.19.2

package/CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.19.2] – 2026-09-26
+
+### Fixed
+
+- **`<glk-date-strip>` and `<glk-calendar>` name days in the page's language, not the browser's.** Without `locale` they went straight to `navigator.language`, so a German page opened on a phone set to English showed "SUN MON TUE" in the strip and started the calendar on Sunday — next to German text everywhere else. They now take the `lang` of the nearest ancestor, usually `<html lang>`, looked up across shadow roots through their hosts, so an element inside another component's shadow tree — a hybrids view, say — reaches the page's language, and a `<section lang="en">` in a German page stays English. Only without any `lang` does the browser language follow, then English; an empty `lang=""` means "unknown" in HTML and falls through to the browser. `locale` still wins over all of it. The page language decides weekday and month names, the chips' and days' `aria-label`s and the calendar's first day of the week. Measured in Chromium and WebKit with an `en-US` browser on `<html lang="de">`: "So Mo Di" and "Sonntag, 27. September 2026" instead of "Sun Mon Tue" and "Sunday, September 27, 2026", the calendar starts on Monday; a page without `lang` looks as before. Compatibility: a page whose `lang` differs from its visitors' browsers now shows its own language in these two elements — set `locale` to keep another. NotionKit Elements falls back to `<html lang>` since 1.17; this looks at the nearest ancestor instead. (EhrenPfoten, Elements finding 10.)
+
+---
+
 ## [1.19.1] – 2026-09-26
 
 ### Fixed
@@ -701,6 +709,7 @@ Starting with this release, GlassKit Elements version numbers are aligned with G
 
 ---
 
+[1.19.2]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.19.2
 [1.19.1]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.19.1
 [1.19.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.19.0
 [1.18.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.18.0

package/README.md

@@ -5,7 +5,7 @@
   <a href="#"><img src="https://img.shields.io/badge/vanilla_JS-no_dependencies-44cc11?style=flat-square" alt="Vanilla JS"></a>
   <a href="#"><img src="https://img.shields.io/badge/components-33-7ec8e3?style=flat-square" alt="33 Components"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT License"></a>
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.19.1-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.19.2-lightgrey?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit-elements"><img src="https://img.shields.io/badge/npm-%40jungherz--de%2Fglasskit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
 </p>
 

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-elements
-description: GlassKit Elements is a vanilla-JS Web Components library (v1.19.1) wrapping GlassKit CSS v1.19.1. It provides 36 custom elements with the `glk-` prefix, Dark/Light mode with automatic theme sync, Shadow DOM encapsulation, and form-associated custom elements. Use this reference whenever generating HTML that uses `<glk-*>` tags to ensure correct attributes, slots, events, and composition.
+description: GlassKit Elements is a vanilla-JS Web Components library (v1.19.2) wrapping GlassKit CSS v1.19.1. It provides 36 custom elements with the `glk-` prefix, Dark/Light mode with automatic theme sync, Shadow DOM encapsulation, and form-associated custom elements. Use this reference whenever generating HTML that uses `<glk-*>` tags to ensure correct attributes, slots, events, and composition.
 ---
 
 # GlassKit Elements – AI Component Reference
@@ -1097,7 +1097,7 @@ A row of day chips that scrolls sideways (since 1.16.0) — a booking horizon, t
 | `value` | String | Chosen day `YYYY-MM-DD` |
 | `today` | String | The underlined day; the browser's day when missing |
 | `marks` | JSON | `{ date: tone \| { tone, disabled } }` — tone `primary` / `success` / `warning` / `error`; `disabled` makes the chip unpickable |
-| `locale` | String | BCP 47 tag for the names; the browser language when missing |
+| `locale` | String | BCP 47 tag for the names; without it the page language — the `lang` of the nearest ancestor, usually `<html lang>`, also across shadow roots — else the browser language (page language since 1.19.2) |
 | `label` | String | `aria-label` of the group |
 
 Event: `glk-change { value }` — only on a change made by the user. Properties: `value`, `marks` (object or JSON text), `locale`, `label`. Part: `strip`.
@@ -1120,7 +1120,7 @@ One month with a day to pick (since 1.16.0). The days are buttons in a `role="gr
 | `today` | String | The day with the warm border; the browser's day when missing |
 | `min`, `max` | String | Days outside cannot be picked |
 | `marks` | JSON | `{ date: tone \| [tone, …] }` — up to three tones per day |
-| `locale` | String | BCP 47 tag for names and week start; the browser language when missing |
+| `locale` | String | BCP 47 tag for names and week start; without it the page language — the `lang` of the nearest ancestor, usually `<html lang>`, also across shadow roots — else the browser language (page language since 1.19.2) |
 | `week-start` | Number | 0 = Sunday … 6 = Saturday; from the locale when missing |
 | `label` | String | `aria-label` of the day group |
 | `prev-label`, `next-label` | String | Names of the nav buttons ("Previous month" / "Next month") |

package/dist/components/glk-calendar.js

@@ -1,5 +1,5 @@
 import { GlkFormElement } from './base.js';
-import { i as isoDate, r as resolveLocale, f as formatters, p as parseIso, a as firstWeekday, b as parseJsonObject, w as weekdayShort, c as addDays, d as isTone } from './shared/dates-CNWaJf09.js';
+import { i as isoDate, r as resolveLocale, f as formatters, p as parseIso, a as firstWeekday, b as parseJsonObject, w as weekdayShort, c as addDays, d as isTone } from './shared/dates-D4JTqoiG.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
 // One month with a day to pick. Came back from EhrenPfoten in 1.16.0.
@@ -8,7 +8,7 @@ import '@jungherz-de/glasskit/glasskit-styles.js';
 //             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)
@@ -66,7 +66,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);
@@ -243,7 +243,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/dist/components/glk-date-strip.js

@@ -1,5 +1,5 @@
 import { GlkElement } from './base.js';
-import { f as formatters, r as resolveLocale, b as parseJsonObject, p as parseIso, i as isoDate, c as addDays, w as weekdayShort, d as isTone } from './shared/dates-CNWaJf09.js';
+import { f as formatters, r as resolveLocale, b as parseJsonObject, p as parseIso, i as isoDate, c as addDays, w as weekdayShort, d as isTone } from './shared/dates-D4JTqoiG.js';
 import { r as revealCentered } from './shared/reveal-CjjzoxTa.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
@@ -9,7 +9,8 @@ import '@jungherz-de/glasskit/glasskit-styles.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
@@ -42,7 +43,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());
@@ -154,7 +155,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/dist/components/shared/{dates-CNWaJf09.js → dates-D4JTqoiG.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.
 
 const pad = n => String(n).padStart(2, '0');
 
@@ -30,8 +30,29 @@ function parseJsonObject(text) {
   }
 }
 
-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.)
+ */
+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.

package/dist/glasskit-elements.esm.js

@@ -692,8 +692,8 @@ customElements.define('glk-steps', GlkSteps);
 // 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.
 
 const pad = n => String(n).padStart(2, '0');
 
@@ -721,8 +721,29 @@ function parseJsonObject(text) {
   }
 }
 
-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.)
+ */
+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.
@@ -790,7 +811,8 @@ function revealCentered(scroller, item, smooth) {
 // 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
@@ -823,7 +845,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());
@@ -935,7 +957,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');
@@ -2487,7 +2509,7 @@ customElements.define('glk-segmented', GlkSegmented);
 //             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)
@@ -2545,7 +2567,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);
@@ -2722,7 +2744,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/dist/glasskit-elements.js

@@ -695,8 +695,8 @@ var GlassKitElements = (function (exports) {
   // 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.
 
   const pad = n => String(n).padStart(2, '0');
 
@@ -724,8 +724,29 @@ var GlassKitElements = (function (exports) {
     }
   }
 
-  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.)
+   */
+  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.
@@ -793,7 +814,8 @@ var GlassKitElements = (function (exports) {
   // 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
@@ -826,7 +848,7 @@ var GlassKitElements = (function (exports) {
     }
 
     _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());
@@ -938,7 +960,7 @@ var GlassKitElements = (function (exports) {
     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');
@@ -2490,7 +2512,7 @@ var GlassKitElements = (function (exports) {
   //             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)
@@ -2548,7 +2570,7 @@ var GlassKitElements = (function (exports) {
     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);
@@ -2725,7 +2747,7 @@ var GlassKitElements = (function (exports) {
     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');