@jungherz-de/glasskit-elements 1.15.2 → 1.16.1

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.15.2-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.16.1-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>
 
@@ -66,7 +66,7 @@ It is the **app layer** of the GlassKit family — three layers, one design lang
 
 ```html
 <!-- 1. GlassKit CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.15/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.16/glasskit.min.css">
 
 <!-- 2. GlassKit Elements -->
 <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
@@ -104,7 +104,7 @@ The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` as an e
 <!DOCTYPE html>
 <html data-theme="dark">
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.15/glasskit.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.16/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -130,6 +130,7 @@ The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` as an e
 | `<glk-tab-dock>` | Wrapper for floating tab bar + optional accessory | `accessory-left` |
 | `<glk-tab-accessory>` | Standalone glass capsule (search, compose…) | `label`, `variant` (accent, success, error), `disabled` |
 | `<glk-steps>` | Progress through a short flow | `steps`, `current`, `label` |
+| `<glk-date-strip>` | Scrolling row of day chips with tone dots; arrow keys, chosen chip centred | `start`, `days`, `value`, `today`, `marks`, `locale`, `label` |
 
 ### Content
 
@@ -151,7 +152,7 @@ The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` as an e
 
 ### Form Elements
 
-All form components support `name`, `value`, `disabled` and participate in native `<form>` submission via `ElementInternals`.
+All form components support `name`, `value`, `disabled` and participate in native `<form>` submission via `ElementInternals` — except `<glk-image-picker>`, which hands its result to `glk-change` instead: a data URL is no form value.
 
 | Component | Description | Key Attributes |
 |---|---|---|
@@ -164,6 +165,8 @@ All form components support `name`, `value`, `disabled` and participate in nativ
 | `<glk-radio>` | Radio button | `label`, `name`, `value`, `checked` |
 | `<glk-range>` | Range slider | `label`, `min`, `max`, `value`, `step` |
 | `<glk-segmented>` | Small exclusive choice as one control; form-associated | `options` (JSON), `value`, `full`, `label`, `name` |
+| `<glk-calendar>` | One month with a day to pick; keyboard navigation, `Intl` names; form-associated | `month`, `value`, `today`, `min`, `max`, `marks`, `locale`, `week-start`, `label`, `name` |
+| `<glk-image-picker>` | One image with preview, resized on the client, EXIF rotation applied; not form-associated | `src`, `label`, `hint`, `round`, `max`, `type`, `quality`, `accept` |
 
 ### Feedback & Notifications
 
@@ -317,7 +320,7 @@ Requires `adoptedStyleSheets`, `ElementInternals`, and `customElements` v1.
 
 ## 🤖 AI / LLM Reference
 
-[`SKILL.md`](SKILL.md) is a tag-based, machine-readable reference for LLMs and AI copilots. It contains copy-paste-ready HTML for all 33 elements, attribute / slot / event tables, composition patterns, and a common-mistakes section. It is the companion to the class-based `SKILL.md` in [GlassKit CSS](https://github.com/JUNGHERZ/GlassKit) — use both together for complete coverage of the glass stack.
+[`SKILL.md`](SKILL.md) is a tag-based, machine-readable reference for LLMs and AI copilots. It contains copy-paste-ready HTML for all 36 elements, attribute / slot / event tables, composition patterns, and a common-mistakes section. It is the companion to the class-based `SKILL.md` in [GlassKit CSS](https://github.com/JUNGHERZ/GlassKit) — use both together for complete coverage of the glass stack.
 
 ---
 

package/dist/components/base.js

@@ -181,6 +181,24 @@ 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/dist/components/glk-accordion-item.js

@@ -14,7 +14,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);
 
@@ -42,18 +43,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/dist/components/glk-calendar.js

@@ -0,0 +1,261 @@
+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 '@jungherz-de/glasskit/glasskit-styles.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 };

package/dist/components/glk-date-strip.js

@@ -0,0 +1,180 @@
+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 '@jungherz-de/glasskit/glasskit-styles.js';
+
+// A row of day chips that scrolls sideways — a booking horizon, the days
+// around today. Came back from EhrenPfoten in 1.16.0.
+//
+// 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)
+// Properties: value, marks (object or JSON text), locale, label
+// Event:      glk-change { value } — only on a change made by the user
+// Part:       strip
+//
+// The chips are buttons in a role="group" with aria-pressed on the chosen
+// one, like <glk-segmented>; each chip is named with its full date, so a
+// screen reader hears "Monday, 22 September 2026" rather than "Mo 22". One
+// tab stop: arrow keys move between chips, Home/End jump to the ends, Enter
+// or Space presses. The chosen chip is scrolled to the middle of the strip
+// after the first layout and on every value change — the strip alone
+// scrolls, never the page. A value change only re-sets state; the chips are
+// rebuilt for start, days, today, marks and locale.
+
+const KEYS = { ArrowLeft: -1, ArrowRight: 1, Home: -Infinity, End: Infinity };
+
+function readMark(entry) {
+  if (isTone(entry)) return { tone: entry, disabled: false };
+  if (entry && typeof entry === 'object') return { tone: isTone(entry.tone) ? entry.tone : '', disabled: Boolean(entry.disabled) };
+  return { tone: '', disabled: false };
+}
+
+class GlkDateStrip extends GlkElement {
+  static get observedAttributes() { return ['start', 'days', 'value', 'today', 'marks', 'locale', 'label']; }
+
+  render() {
+    this._strip = this.createElement('div', ['glass-date-strip'], { role: 'group', part: 'strip' });
+    this._wrapper.appendChild(this._strip);
+    this._build();
+    this._applyLabel();
+  }
+
+  _build() {
+    const f = formatters(resolveLocale(this.getAttribute('locale')));
+    const marks = parseJsonObject(this.getAttribute('marks'));
+    const start = parseIso(this.getAttribute('start')) ?? new Date();
+    const today = this.getAttribute('today') || isoDate(new Date());
+    const count = Math.max(1, Math.floor(Number(this.getAttribute('days'))) || 7);
+    this._strip.replaceChildren();
+    for (let i = 0; i < count; i += 1) {
+      const date = addDays(start, i);
+      const iso = isoDate(date);
+      const mark = readMark(marks[iso]);
+      const chip = this.createElement('button', ['glass-date-strip__day'], { type: 'button', 'data-value': iso, 'aria-label': f.day.format(date) });
+      if (iso === today) chip.classList.add('glass-date-strip__day--today');
+      if (mark.disabled) chip.disabled = true;
+      const wd = this.createElement('span', ['glass-date-strip__wd']);
+      wd.textContent = weekdayShort(f, date);
+      const num = this.createElement('span', ['glass-date-strip__num']);
+      num.textContent = String(date.getDate());
+      const dot = this.createElement('span', ['glass-date-strip__mark']);
+      if (mark.tone) dot.classList.add(`glass-date-strip__mark--${mark.tone}`);
+      chip.append(wd, num, dot);
+      this._strip.appendChild(chip);
+    }
+    this._syncValue();
+  }
+
+  _chips() { return [...this._strip.querySelectorAll('button[data-value]')]; }
+
+  _syncValue() {
+    const value = this.value;
+    let chosen = null;
+    for (const chip of this._chips()) {
+      const pressed = chip.dataset.value === value;
+      chip.setAttribute('aria-pressed', String(pressed));
+      if (pressed) chosen = chip;
+    }
+    const chips = this._chips();
+    this._setTabStop(chosen ?? chips.find(chip => !chip.disabled) ?? chips[0]);
+    this._reveal(this._revealedAt ? 'smooth' : 'instant');
+  }
+
+  _setTabStop(target) {
+    for (const chip of this._chips()) chip.tabIndex = chip === target ? 0 : -1;
+  }
+
+  // Scroll the chosen chip to the middle of the strip. Computed from client
+  // rects and applied to the strip's own scrollLeft, so the page never moves —
+  // scrollIntoView would scroll every ancestor. Before the first layout the
+  // strip has no width; the ResizeObserver in setupEvents centres then, and
+  // again whenever the strip's width changes — a parent that upgrades later
+  // and adds its padding, a window resize, a strip that starts out hidden. A
+  // value change glides unless the user asked for reduced motion; a size
+  // change snaps, so a settling layout never animates.
+  _reveal(behavior = 'instant') {
+    const chip = this._strip.querySelector('[aria-pressed="true"]');
+    const width = this._strip.clientWidth;
+    if (!chip || !width) return;
+    const strip = this._strip.getBoundingClientRect();
+    const box = chip.getBoundingClientRect();
+    const left = this._strip.scrollLeft + (box.left - strip.left) - (strip.width - box.width) / 2;
+    const smooth = behavior === 'smooth' && !matchMedia('(prefers-reduced-motion: reduce)').matches;
+    this._strip.scrollTo({ left: Math.max(0, left), behavior: smooth ? 'smooth' : 'instant' });
+    this._revealedAt = width;
+  }
+
+  _applyLabel() {
+    const label = this.getAttribute('label');
+    if (label) this._strip.setAttribute('aria-label', label);
+    else this._strip.removeAttribute('aria-label');
+  }
+
+  setupEvents() {
+    this._onClick = (event) => {
+      const chip = event.target.closest('button[data-value]');
+      if (!chip || chip.disabled || chip.getAttribute('aria-disabled') === 'true') return;
+      this._setTabStop(chip);
+      const { value } = chip.dataset;
+      if (value === this.value) return;
+      this.value = value;
+      this.emit('glk-change', { value });
+    };
+    this._onKeydown = (event) => {
+      const step = KEYS[event.key];
+      if (step === undefined) return;
+      const chips = this._chips().filter(chip => !chip.disabled);
+      const from = chips.indexOf(event.target.closest('button[data-value]'));
+      if (from < 0) return;
+      const to = Number.isFinite(step) ? Math.min(chips.length - 1, Math.max(0, from + step)) : (step < 0 ? 0 : chips.length - 1);
+      event.preventDefault();
+      this._setTabStop(chips[to]);
+      chips[to].focus();
+    };
+    this._onResize = () => { if (this._strip.clientWidth !== this._revealedAt) this._reveal('instant'); };
+    this._strip.addEventListener('click', this._onClick);
+    this._strip.addEventListener('keydown', this._onKeydown);
+    this._resizeObserver = new ResizeObserver(this._onResize);
+    this._resizeObserver.observe(this._strip);
+  }
+
+  teardownEvents() {
+    this._strip?.removeEventListener('click', this._onClick);
+    this._strip?.removeEventListener('keydown', this._onKeydown);
+    this._resizeObserver?.disconnect();
+    this._resizeObserver = null;
+  }
+
+  onAttributeChanged(name) {
+    if (!this._strip) return;
+    if (name === 'value') this._syncValue();
+    else if (name === 'label') this._applyLabel();
+    else this._build();
+  }
+
+  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-date-strip', GlkDateStrip);
+
+export { GlkDateStrip };

package/dist/components/glk-empty.js

@@ -25,11 +25,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;
@@ -37,10 +38,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);