@jungherz-de/glasskit-elements 1.15.2 → 1.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/glasskit-elements",
-  "version": "1.15.2",
+  "version": "1.16.1",
   "description": "Vanilla JavaScript Web Components wrapping the GlassKit CSS glassmorphism library",
   "license": "MIT",
   "homepage": "https://glasskit-elements.jungherz.com",
@@ -45,10 +45,10 @@
     "vanilla-js"
   ],
   "peerDependencies": {
-    "@jungherz-de/glasskit": ">=1.15.1"
+    "@jungherz-de/glasskit": ">=1.16.0"
   },
   "devDependencies": {
-    "@jungherz-de/glasskit": "^1.15.1",
+    "@jungherz-de/glasskit": "^1.16.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "rollup": "^4.0.0"

package/src/base.js

@@ -181,6 +181,24 @@ export class GlkElement extends HTMLElement {
 
   // ── Utility Methods ──
 
+  /**
+   * For elements whose heading arrives as `title`. That is also the global
+   * HTML attribute, and a title on the host shows as a browser tooltip — the
+   * sheet's heading floating over its form. So the value is read into
+   * this._title and the attribute is taken off the host; a later
+   * setAttribute('title') comes through attributeChangedCallback, is taken
+   * the same way and removed again, and the element's `title` accessor
+   * answers from this._title. The removal fires the callback with null,
+   * which is ignored here — only an empty string clears the heading.
+   * Returns whether a value was taken.
+   */
+  takeTitle(value = this.getAttribute('title')) {
+    if (value === null) return false;
+    this._title = value;
+    this.removeAttribute('title');
+    return true;
+  }
+
   getBoolAttr(name) {
     return this.hasAttribute(name);
   }

package/src/components/containers/glk-accordion-item.js

@@ -13,7 +13,8 @@ class GlkAccordionItem extends GlkElement {
 
     // Trigger button
     this._trigger = this.createElement('button', ['glass-accordion__trigger']);
-    this._triggerText = document.createTextNode(this.getAttribute('title') || '');
+    this.takeTitle();
+    this._triggerText = document.createTextNode(this._title || '');
     this._trigger.appendChild(this._triggerText);
     this._trigger.insertAdjacentHTML('beforeend', CHEVRON_SVG);
 
@@ -41,18 +42,29 @@ class GlkAccordionItem extends GlkElement {
     this._trigger?.removeEventListener('click', this._onClick);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     if (!this._item) return;
     switch (name) {
       case 'open':
         this._item.classList.toggle('is-open', this.getBoolAttr('open'));
         break;
       case 'title':
-        this._triggerText.textContent = this.getAttribute('title') || '';
+        if (this.takeTitle(value)) this._applyTitle();
         break;
     }
   }
 
+  _applyTitle() {
+    if (this._triggerText) this._triggerText.textContent = this._title || '';
+  }
+
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
 }

package/src/components/containers/glk-list-item.js

@@ -48,7 +48,8 @@ class GlkListItem extends GlkElement {
     // Content — title + optional subtitle.
     this._content = this.createElement('div', ['glass-list__content']);
     this._titleEl = this.createElement('div', ['glass-list__title']);
-    this._titleEl.textContent = this.getAttribute('title') || '';
+    this.takeTitle();
+    this._titleEl.textContent = this._title || '';
     this._subtitleEl = this.createElement('div', ['glass-list__subtitle']);
     if (this.getBoolAttr('wrap')) this._subtitleEl.classList.add('glass-list__subtitle--wrap');
     const initialSubtitle = this.getAttribute('subtitle') || '';
@@ -114,11 +115,11 @@ class GlkListItem extends GlkElement {
     this._item?.removeEventListener('click', this._onClick);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     if (!this._item) return;
     switch (name) {
       case 'title':
-        this._titleEl.textContent = this.getAttribute('title') || '';
+        if (this.takeTitle(value)) this._applyTitle();
         break;
       case 'subtitle': {
         const value = this.getAttribute('subtitle') || '';
@@ -162,6 +163,17 @@ class GlkListItem extends GlkElement {
     }
   }
 
+  _applyTitle() {
+    if (this._titleEl) this._titleEl.textContent = this._title || '';
+  }
+
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get interactive() { return this.getBoolAttr('interactive'); }
   set interactive(v) { this.setBoolAttr('interactive', v); }
 

package/src/components/content/glk-empty.js

@@ -24,11 +24,12 @@ class GlkEmpty extends GlkElement {
     action.appendChild(this.createElement('slot', [], { name: 'action' }));
     root.append(icon, this._titleEl, this._textEl, action);
     this._wrapper.appendChild(root);
+    this.takeTitle();
     this._update();
   }
 
   _update() {
-    const title = this.getAttribute('title') || '';
+    const title = this._title || '';
     const text = this.getAttribute('text') || '';
     this._titleEl.textContent = title;
     this._titleEl.hidden = !title;
@@ -36,10 +37,22 @@ class GlkEmpty extends GlkElement {
     this._textEl.hidden = !text;
   }
 
-  onAttributeChanged() {
+  onAttributeChanged(name, _old, value) {
+    if (name === 'title' && !this.takeTitle(value)) return;
     if (this._titleEl) this._update();
   }
 
+  _applyTitle() {
+    if (this._titleEl) this._update();
+  }
+
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get text() { return this.getAttribute('text') || ''; }
   set text(v) {
     if (v) this.setAttribute('text', v);

package/src/components/feedback/glk-modal.js

@@ -15,7 +15,8 @@ class GlkModal extends GlkElement {
     // Header
     const header = this.createElement('div', ['glass-modal__header'], { part: 'header' });
     this._titleEl = this.createElement('h2', ['glass-modal__title']);
-    this._titleEl.textContent = this.getAttribute('title') || '';
+    this.takeTitle();
+    this._applyTitle();
     header.appendChild(this._titleEl);
 
     // Body
@@ -84,14 +85,14 @@ class GlkModal extends GlkElement {
     document.removeEventListener('keydown', this._onKeydown);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     if (!this._overlay) return;
     switch (name) {
       case 'open':
         this._overlay.classList.toggle('is-active', this.getBoolAttr('open'));
         break;
       case 'title':
-        this._titleEl.textContent = this.getAttribute('title') || '';
+        if (this.takeTitle(value)) this._applyTitle();
         break;
     }
   }
@@ -99,6 +100,17 @@ class GlkModal extends GlkElement {
   show() { this.setAttribute('open', ''); }
   close() { this.removeAttribute('open'); }
 
+  _applyTitle() {
+    if (this._titleEl) this._titleEl.textContent = this._title || '';
+  }
+
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
 }

package/src/components/feedback/glk-sheet.js

@@ -37,12 +37,14 @@ class GlkSheet extends GlkElement {
     this._panel.append(this._titleEl, body, actions);
     this._overlay.appendChild(this._panel);
     this._wrapper.appendChild(this._overlay);
+    this.takeTitle();
     this._applyTitle();
     this._applyMode();
   }
 
   _applyTitle() {
-    const title = this.getAttribute('title') || '';
+    if (!this._titleEl) return;
+    const title = this._title || '';
     this._titleEl.textContent = title;
     this._titleEl.hidden = !title;
     if (title) this._panel.setAttribute('aria-label', title);
@@ -112,7 +114,7 @@ class GlkSheet extends GlkElement {
     document.removeEventListener('keydown', this._onKeydown);
   }
 
-  onAttributeChanged(name) {
+  onAttributeChanged(name, _old, value) {
     if (!this._overlay) return;
     switch (name) {
       case 'open':
@@ -121,13 +123,20 @@ class GlkSheet extends GlkElement {
         else this._hide();
         break;
       case 'inline': this._applyMode(); break;
-      case 'title': this._applyTitle(); break;
+      case 'title': if (this.takeTitle(value)) this._applyTitle(); break;
     }
   }
 
   show() { this.setAttribute('open', ''); }
   close() { this.removeAttribute('open'); }
 
+  // `title` is the heading, never a tooltip — see GlkElement.takeTitle().
+  get title() { return this._title ?? ''; }
+  set title(v) {
+    this._title = v == null ? '' : String(v);
+    this._applyTitle();
+  }
+
   get open() { return this.getBoolAttr('open'); }
   set open(v) { this.setBoolAttr('open', v); }
 

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

@@ -0,0 +1,259 @@
+import { GlkFormElement } from '../../base.js';
+import { isoDate, parseIso, addDays, parseJsonObject, resolveLocale, formatters, weekdayShort, firstWeekday, isTone } from '../../dates.js';
+
+// One month with a day to pick. Came back from EhrenPfoten in 1.16.0.
+//
+// Attributes: month (YYYY-MM; without it the month of the value, else of
+//             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;
+//             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)
+// Properties: month, value, marks, locale, label
+// Form:       associated — a surrounding <form> receives name=value, reset
+//             restores the initial value, like <glk-segmented>
+// Events:     glk-change { value } — on a pick by the user
+//             glk-month { month } — when the user moves to another month
+// Parts:      calendar, head, title, grid
+//
+// The days are buttons in a role="group" with aria-pressed on the chosen
+// one, each named with its full date; the weekday row is decorative. One tab
+// stop (roving tabindex): arrows move by a day or a week, Home/End to the
+// ends of the week, PageUp/PageDown by a month; moving past the month's edge
+// shows that month and emits glk-month. Arrows only move focus — Enter or
+// Space picks — so a calendar that opens a sheet on every pick stays quiet
+// while the user looks around. Days outside min/max carry aria-disabled
+// rather than disabled: they stay in the arrow path and are announced, but
+// neither click nor Enter picks them. A value set to another month flips the
+// calendar to that month.
+
+const CHEVRON_LEFT = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>';
+const CHEVRON_RIGHT = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>';
+const STEPS = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+const CELLS = 42;
+const MONTH = /^\d{4}-\d{2}$/;
+
+function tonesOf(entry) {
+  const list = Array.isArray(entry) ? entry : [entry];
+  return list.filter(isTone).slice(0, 3);
+}
+
+class GlkCalendar extends GlkFormElement {
+  static get observedAttributes() {
+    return ['month', 'value', 'today', 'min', 'max', 'marks', 'locale', 'week-start', 'label', 'prev-label', 'next-label'];
+  }
+
+  render() {
+    this._root = this.createElement('div', ['glass-calendar'], { part: 'calendar' });
+    const head = this.createElement('div', ['glass-calendar__head'], { part: 'head' });
+    this._prev = this.createElement('button', ['glass-calendar__nav'], { type: 'button' });
+    this._prev.innerHTML = CHEVRON_LEFT;
+    this._title = this.createElement('div', ['glass-calendar__title'], { part: 'title', 'aria-live': 'polite' });
+    this._next = this.createElement('button', ['glass-calendar__nav'], { type: 'button' });
+    this._next.innerHTML = CHEVRON_RIGHT;
+    head.append(this._prev, this._title, this._next);
+    this._grid = this.createElement('div', ['glass-calendar__grid'], { role: 'group', part: 'grid' });
+    this._root.append(head, this._grid);
+    this._wrapper.appendChild(this._root);
+    this._initialValue = this.value;
+    this._applyLabels();
+    this._build();
+  }
+
+  get _todayIso() { return this.getAttribute('today') || isoDate(new Date()); }
+
+  _build() {
+    const locale = resolveLocale(this.getAttribute('locale'));
+    const f = formatters(locale);
+    const month = this.month;
+    const first = parseIso(month);
+    const weekStartAttr = this.hasAttribute('week-start') ? Number(this.getAttribute('week-start')) : NaN;
+    this._weekStart = Number.isInteger(weekStartAttr) && weekStartAttr >= 0 && weekStartAttr <= 6 ? weekStartAttr : firstWeekday(locale);
+    const marks = parseJsonObject(this.getAttribute('marks'));
+    const today = this._todayIso;
+    const min = this.getAttribute('min') || '';
+    const max = this.getAttribute('max') || '';
+    this._shown = month;
+    this._title.textContent = f.month.format(first);
+    this._grid.replaceChildren();
+    const offset = (first.getDay() - this._weekStart + 7) % 7;   // cells before the 1st
+    for (let i = 0; i < 7; i += 1) {
+      const wd = this.createElement('span', ['glass-calendar__wd'], { 'aria-hidden': 'true' });
+      wd.textContent = weekdayShort(f, addDays(first, i - offset));
+      this._grid.appendChild(wd);
+    }
+    for (let i = 0; i < CELLS; i += 1) {
+      const date = addDays(first, i - offset);
+      const iso = isoDate(date);
+      const day = this.createElement('button', ['glass-calendar__day'], { type: 'button', 'data-value': iso, 'aria-label': f.day.format(date) });
+      if (date.getMonth() !== first.getMonth()) day.classList.add('glass-calendar__day--other');
+      if (iso === today) day.classList.add('glass-calendar__day--today');
+      if ((min && iso < min) || (max && iso > max)) day.setAttribute('aria-disabled', 'true');
+      const num = this.createElement('span');
+      num.textContent = String(date.getDate());
+      const dots = this.createElement('span', ['glass-calendar__marks']);
+      for (const tone of tonesOf(marks[iso])) {
+        dots.appendChild(this.createElement('span', ['glass-calendar__mark', `glass-calendar__mark--${tone}`]));
+      }
+      day.append(num, dots);
+      this._grid.appendChild(day);
+    }
+    this._syncValue();
+  }
+
+  _days() { return [...this._grid.querySelectorAll('button[data-value]')]; }
+  _dayFor(iso) { return this._grid.querySelector(`button[data-value="${iso}"]`); }
+
+  _syncValue() {
+    const value = this.value;
+    let pressed = null;
+    for (const day of this._days()) {
+      const on = day.dataset.value === value;
+      day.setAttribute('aria-pressed', String(on));
+      if (on) pressed = day;
+    }
+    const today = this._todayIso;
+    const fallback = today.startsWith(this._shown) ? this._dayFor(today) : this._dayFor(`${this._shown}-01`);
+    this._setTabStop(pressed ?? fallback ?? this._days()[0]);
+    this.setFormValue(value);
+  }
+
+  _setTabStop(target) {
+    for (const day of this._days()) day.tabIndex = day === target ? 0 : -1;
+  }
+
+  _applyLabels() {
+    const label = this.getAttribute('label');
+    if (label) this._grid.setAttribute('aria-label', label);
+    else this._grid.removeAttribute('aria-label');
+    this._prev.setAttribute('aria-label', this.getAttribute('prev-label') || 'Previous month');
+    this._next.setAttribute('aria-label', this.getAttribute('next-label') || 'Next month');
+  }
+
+  // Show another month because the user asked for it — nav buttons or a key
+  // that crossed the month's edge. Setting the attribute rebuilds the grid.
+  _show(month) {
+    this.month = month;
+    this.emit('glk-month', { month });
+  }
+
+  _shift(delta) {
+    const first = parseIso(this.month);
+    const next = new Date(first.getFullYear(), first.getMonth() + delta, 1);
+    this._show(isoDate(next).slice(0, 7));
+  }
+
+  _focusDay(date) {
+    const iso = isoDate(date);
+    if (!iso.startsWith(this._shown)) this._show(iso.slice(0, 7));
+    const day = this._dayFor(iso);
+    if (!day) return;
+    this._setTabStop(day);
+    day.focus();
+  }
+
+  _pick(value) {
+    if (value === this.value) return;
+    this.value = value;
+    this.emit('glk-change', { value });
+  }
+
+  setupEvents() {
+    this._onPrev = () => this._shift(-1);
+    this._onNext = () => this._shift(1);
+    this._onClick = (event) => {
+      const day = event.target.closest('button[data-value]');
+      if (!day) return;
+      this._setTabStop(day);
+      if (day.getAttribute('aria-disabled') === 'true') return;
+      this._pick(day.dataset.value);
+    };
+    this._onKeydown = (event) => {
+      const from = event.target.closest('button[data-value]');
+      if (!from) return;
+      const date = parseIso(from.dataset.value);
+      const weekday = (date.getDay() - this._weekStart + 7) % 7;
+      let target;
+      if (event.key in STEPS) target = addDays(date, STEPS[event.key]);
+      else if (event.key === 'Home') target = addDays(date, -weekday);
+      else if (event.key === 'End') target = addDays(date, 6 - weekday);
+      else if (event.key === 'PageUp' || event.key === 'PageDown') {
+        const months = event.key === 'PageUp' ? -1 : 1;
+        const last = new Date(date.getFullYear(), date.getMonth() + months + 1, 0).getDate();
+        target = new Date(date.getFullYear(), date.getMonth() + months, Math.min(date.getDate(), last));
+      } else return;
+      event.preventDefault();
+      this._focusDay(target);
+    };
+    this._prev.addEventListener('click', this._onPrev);
+    this._next.addEventListener('click', this._onNext);
+    this._grid.addEventListener('click', this._onClick);
+    this._grid.addEventListener('keydown', this._onKeydown);
+  }
+
+  teardownEvents() {
+    this._prev?.removeEventListener('click', this._onPrev);
+    this._next?.removeEventListener('click', this._onNext);
+    this._grid?.removeEventListener('click', this._onClick);
+    this._grid?.removeEventListener('keydown', this._onKeydown);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._grid) return;
+    switch (name) {
+      case 'value': {
+        const value = this.value;
+        if (value && !value.startsWith(this._shown)) this.month = value.slice(0, 7);   // rebuilds via 'month'
+        else this._syncValue();
+        break;
+      }
+      case 'label':
+      case 'prev-label':
+      case 'next-label':
+        this._applyLabels();
+        break;
+      default:
+        this._build();
+    }
+  }
+
+  resetValue() { this.value = this._initialValue; }
+  restoreValue(state) { if (typeof state === 'string') this.value = state; }
+
+  get month() {
+    const attr = this.getAttribute('month');
+    if (attr && MONTH.test(attr) && parseIso(attr)) return attr;
+    const value = this.value;
+    return (value && parseIso(value) ? value : this._todayIso).slice(0, 7);
+  }
+  set month(v) {
+    if (v && MONTH.test(String(v))) this.setAttribute('month', String(v));
+    else this.removeAttribute('month');
+  }
+
+  get value() { return this.getAttribute('value') ?? ''; }
+  set value(v) {
+    if (v == null || v === '') this.removeAttribute('value');
+    else this.setAttribute('value', String(v));
+  }
+
+  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')); }
+  set locale(v) {
+    if (v) this.setAttribute('locale', v);
+    else this.removeAttribute('locale');
+  }
+
+  get label() { return this.getAttribute('label') || ''; }
+  set label(v) {
+    if (v) this.setAttribute('label', v);
+    else this.removeAttribute('label');
+  }
+}
+
+customElements.define('glk-calendar', GlkCalendar);
+export { GlkCalendar };