@jungherz-de/glasskit-elements 1.15.2 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/glasskit-elements",
-  "version": "1.15.2",
+  "version": "1.16.0",
   "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/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 };

package/src/components/forms/glk-image-picker.js

@@ -0,0 +1,173 @@
+import { GlkElement } from '../../base.js';
+
+// One image with a preview, resized on the client before it goes anywhere.
+// Came back from EhrenPfoten in 1.16.0, where it was the photo picker.
+//
+// Attributes: src (starting image: URL or data URL), label (visible; names
+//             the group), hint (small muted line; none by default), round
+//             (circular preview, for avatars), max (longest edge after
+//             resizing, default 1024), type (output MIME, default
+//             image/jpeg; image/webp where the browser encodes it, PNG
+//             otherwise), quality (0–1, default 0.82), accept (file dialog
+//             filter, default image/*), choose-label, change-label,
+//             remove-label (button texts, English by default)
+// Property:   src — the current image as a data URL or the given URL; set
+//             it to swap the preview. Not reflected to the attribute, so a
+//             data URL of megabytes never lands in the DOM.
+// Events:     glk-change { dataUrl, width, height, size } — after a pick;
+//             on remove with an empty dataUrl and zeros
+//             glk-error { message, name } — when the file cannot be decoded
+//             (Chrome cannot read HEIC; a corrupt file)
+// Parts:      picker, preview, meta, label, hint, actions
+//
+// Decoding goes through createImageBitmap with imageOrientation 'from-image',
+// which applies the EXIF rotation of a phone photo without a library, then
+// onto a canvas no larger than max. The file input is hidden and opened from
+// a real button — a <label> around a hidden input cannot be reached by
+// keyboard — and cleared after every pick, so the same file can be chosen
+// again. Not form-associated: the form value would be either the original
+// file, which is not what gets uploaded, or a data URL of megabytes. Listen
+// to glk-change and upload, or copy the data URL into a hidden field.
+
+const PLACEHOLDER = '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="10" r="2"/><path d="M21 15l-5-4-8 8"/></svg>';
+
+function dataUrlBytes(url) {
+  const b64 = url.slice(url.indexOf(',') + 1);
+  const padding = b64.endsWith('==') ? 2 : b64.endsWith('=') ? 1 : 0;
+  return Math.floor((b64.length * 3) / 4) - padding;
+}
+
+class GlkImagePicker extends GlkElement {
+  static get observedAttributes() {
+    return ['src', 'label', 'hint', 'round', 'max', 'type', 'quality', 'accept', 'choose-label', 'change-label', 'remove-label'];
+  }
+
+  constructor() {
+    super();
+    this._src = '';
+  }
+
+  render() {
+    this._src = this.getAttribute('src') || '';
+    this._root = this.createElement('div', ['glass-image-picker'], { part: 'picker', role: 'group' });
+    this._preview = this.createElement('div', ['glass-image-picker__preview'], { part: 'preview' });
+    const meta = this.createElement('div', ['glass-image-picker__meta'], { part: 'meta' });
+    this._label = this.createElement('span', ['glass-image-picker__label'], { part: 'label', id: 'label' });
+    this._hint = this.createElement('span', ['glass-image-picker__hint'], { part: 'hint', id: 'hint' });
+    const actions = this.createElement('div', ['glass-image-picker__actions'], { part: 'actions' });
+    this._choose = this.createElement('button', ['glass-btn', 'glass-btn--secondary', 'glass-btn--sm', 'glass-btn--auto'], { type: 'button' });
+    this._remove = this.createElement('button', ['glass-btn', 'glass-btn--tertiary', 'glass-btn--sm', 'glass-btn--auto'], { type: 'button' });
+    this._input = this.createElement('input', [], { type: 'file', tabindex: '-1' });
+    this._input.hidden = true;
+    actions.append(this._choose, this._remove, this._input);
+    meta.append(this._label, this._hint, actions);
+    this._root.append(this._preview, meta);
+    this._wrapper.appendChild(this._root);
+    this._update();
+  }
+
+  get _max() { return Math.max(1, Math.floor(Number(this.getAttribute('max'))) || 1024); }
+  get _type() { return this.getAttribute('type') || 'image/jpeg'; }
+  get _quality() {
+    const q = Number(this.getAttribute('quality'));
+    return this.hasAttribute('quality') && q >= 0 && q <= 1 ? q : 0.82;
+  }
+
+  _update() {
+    if (!this._root) return;
+    const label = this.getAttribute('label') || '';
+    const hint = this.getAttribute('hint') || '';
+    this._preview.classList.toggle('glass-image-picker__preview--round', this.getBoolAttr('round'));
+    if (!this._src) {
+      this._img = null;
+      this._preview.innerHTML = PLACEHOLDER;
+    } else if (!this._img || this._img.getAttribute('src') !== this._src) {
+      this._img = this.createElement('img', [], { alt: '', src: this._src });
+      this._preview.replaceChildren(this._img);
+    }
+    this._label.textContent = label;
+    this._label.hidden = !label;
+    this._hint.textContent = hint;
+    this._hint.hidden = !hint;
+    if (label) this._root.setAttribute('aria-labelledby', 'label');
+    else this._root.removeAttribute('aria-labelledby');
+    if (hint) this._root.setAttribute('aria-describedby', 'hint');
+    else this._root.removeAttribute('aria-describedby');
+    this._choose.textContent = this._src
+      ? (this.getAttribute('change-label') || 'Change')
+      : (this.getAttribute('choose-label') || 'Choose');
+    this._remove.textContent = this.getAttribute('remove-label') || 'Remove';
+    this._remove.hidden = !this._src;
+    this._input.accept = this.getAttribute('accept') || 'image/*';
+  }
+
+  async _pick(file) {
+    if (!file) return;
+    try {
+      const bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' });
+      const scale = Math.min(1, this._max / Math.max(bitmap.width, bitmap.height));
+      const canvas = document.createElement('canvas');
+      canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+      canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+      const ctx = canvas.getContext('2d');
+      if (this._type === 'image/jpeg') {
+        // JPEG has no alpha; without this a transparent PNG comes out on black.
+        ctx.fillStyle = '#fff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      }
+      ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+      bitmap.close();
+      const dataUrl = canvas.toDataURL(this._type, this._quality);
+      this.src = dataUrl;
+      this.emit('glk-change', { dataUrl, width: canvas.width, height: canvas.height, size: dataUrlBytes(dataUrl) });
+    } catch (error) {
+      this.emit('glk-error', { message: error?.message || String(error), name: file.name });
+    }
+  }
+
+  setupEvents() {
+    this._onChoose = () => this._input.click();
+    this._onChange = (event) => {
+      const file = event.target.files?.[0];
+      event.target.value = '';
+      this._pick(file);
+    };
+    this._onRemove = () => {
+      this.src = '';
+      this._choose.focus();   // the remove button just went away under the focus
+      this.emit('glk-change', { dataUrl: '', width: 0, height: 0, size: 0 });
+    };
+    this._choose.addEventListener('click', this._onChoose);
+    this._input.addEventListener('change', this._onChange);
+    this._remove.addEventListener('click', this._onRemove);
+  }
+
+  teardownEvents() {
+    this._choose?.removeEventListener('click', this._onChoose);
+    this._input?.removeEventListener('change', this._onChange);
+    this._remove?.removeEventListener('click', this._onRemove);
+  }
+
+  onAttributeChanged(name, _old, value) {
+    if (name === 'src') this._src = value || '';
+    this._update();
+  }
+
+  get src() { return this._src; }
+  set src(v) {
+    this._src = v || '';
+    this._update();
+  }
+
+  get label() { return this.getAttribute('label') || ''; }
+  set label(v) {
+    if (v) this.setAttribute('label', v);
+    else this.removeAttribute('label');
+  }
+
+  get round() { return this.getBoolAttr('round'); }
+  set round(v) { this.setBoolAttr('round', v); }
+}
+
+customElements.define('glk-image-picker', GlkImagePicker);
+export { GlkImagePicker };

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

@@ -0,0 +1,178 @@
+import { GlkElement } from '../../base.js';
+import { isoDate, parseIso, addDays, parseJsonObject, resolveLocale, formatters, weekdayShort, isTone } from '../../dates.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 };