@jungherz-de/glasskit-elements 1.13.0 → 1.15.0

package/dist/components/glk-segmented.js

@@ -0,0 +1,124 @@
+import { GlkFormElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
+
+// One button per option, the chosen one marked aria-pressed="true" — GlassKit
+// styles exactly that attribute. Came back from EhrenPfoten in 1.15.0.
+//
+// Attributes: options (JSON [{value,label,tone?,disabled?}]), value, full,
+//             label (aria-label of the group), name (form field name)
+// Properties: value, options (array or JSON text), full, label
+// Event:      glk-change { value } — only on a change made by the user
+// Part:       group
+//
+// Form-associated: a surrounding <form> receives name=value, reset restores
+// the initial value. A value change only re-sets aria-pressed, never rebuilds,
+// so focus stays on the button that was pressed.
+
+const TONES = ['success', 'warning', 'error'];
+
+function parseList(json) {
+  try {
+    const list = JSON.parse(json || '[]');
+    return Array.isArray(list) ? list : [];
+  } catch {
+    return [];
+  }
+}
+
+class GlkSegmented extends GlkFormElement {
+  static get observedAttributes() { return ['options', 'value', 'full', 'label']; }
+
+  render() {
+    this._group = this.createElement('div', ['glass-segmented'], { role: 'group', part: 'group' });
+    this._wrapper.appendChild(this._group);
+    this._initialValue = this.value;
+    this._build();
+    this._applyFull();
+    this._applyLabel();
+  }
+
+  _build() {
+    this._group.replaceChildren();
+    for (const option of parseList(this.getAttribute('options'))) {
+      const value = String(option.value ?? '');
+      const button = this.createElement('button', ['glass-segmented__item'], { type: 'button', 'data-value': value });
+      if (TONES.includes(option.tone)) {
+        button.classList.add(`glass-segmented__item--${option.tone}`);
+        button.appendChild(this.createElement('span', ['glass-segmented__dot']));
+      }
+      if (option.disabled) button.disabled = true;
+      button.appendChild(document.createTextNode(option.label ?? value));
+      this._group.appendChild(button);
+    }
+    this._syncValue();
+  }
+
+  _syncValue() {
+    const value = this.value;
+    for (const button of this._group.querySelectorAll('button[data-value]')) {
+      button.setAttribute('aria-pressed', String(button.dataset.value === value));
+    }
+    this.setFormValue(value);
+  }
+
+  _applyFull() {
+    this._group.classList.toggle('glass-segmented--full', this.getBoolAttr('full'));
+  }
+
+  _applyLabel() {
+    const label = this.getAttribute('label');
+    if (label) this._group.setAttribute('aria-label', label);
+    else this._group.removeAttribute('aria-label');
+  }
+
+  setupEvents() {
+    this._onClick = (event) => {
+      const button = event.target.closest('button[data-value]');
+      if (!button || button.disabled) return;
+      const { value } = button.dataset;
+      if (value === this.value) return;
+      this.value = value;
+      this.emit('glk-change', { value });
+    };
+    this._group.addEventListener('click', this._onClick);
+  }
+
+  teardownEvents() {
+    this._group?.removeEventListener('click', this._onClick);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._group) return;
+    switch (name) {
+      case 'value': this._syncValue(); break;
+      case 'options': this._build(); break;
+      case 'full': this._applyFull(); break;
+      case 'label': this._applyLabel(); break;
+    }
+  }
+
+  resetValue() { this.value = this._initialValue; }
+  restoreValue(state) { if (typeof state === 'string') this.value = state; }
+
+  get value() { return this.getAttribute('value') ?? ''; }
+  set value(v) {
+    if (v == null) this.removeAttribute('value');
+    else this.setAttribute('value', String(v));
+  }
+
+  get options() { return parseList(this.getAttribute('options')); }
+  set options(v) { this.setAttribute('options', typeof v === 'string' ? v : JSON.stringify(v ?? [])); }
+
+  get full() { return this.getBoolAttr('full'); }
+  set full(v) { this.setBoolAttr('full', v); }
+
+  get label() { return this.getAttribute('label') || ''; }
+  set label(v) {
+    if (v) this.setAttribute('label', v);
+    else this.removeAttribute('label');
+  }
+}
+
+customElements.define('glk-segmented', GlkSegmented);
+
+export { GlkSegmented };

package/dist/components/glk-select.js

@@ -1,4 +1,5 @@
-import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
+import { GlkFormElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkSelect extends GlkFormElement {
   static get observedAttributes() {

package/dist/components/glk-sheet.js

@@ -0,0 +1,141 @@
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
+
+// Bottom sheet — the mobile sibling of <glk-modal>. Came back from
+// EhrenPfoten in 1.15.0.
+//
+// Attributes: open, inline (no overlay, always visible), title
+// Properties: open, inline · Methods: show(), close()
+// Slots:      default (content), actions
+// Event:      glk-close — only when the user closes it (scrim click, Escape),
+//             like <glk-modal>
+// Parts:      overlay, sheet, title, body, actions
+//
+// Opening and closing are animated by the CSS block: the overlay gets
+// .is-active one frame after it is unhidden, and on closing it is hidden
+// only after transitionend (safety net 400 ms), so the blurred overlay
+// leaves the layout instead of idling at opacity 0. Under
+// prefers-reduced-motion it switches at once.
+
+const HIDE_FALLBACK_MS = 400;
+
+function reducedMotion() {
+  return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+class GlkSheet extends GlkElement {
+  static get observedAttributes() { return ['open', 'inline', 'title']; }
+
+  render() {
+    this._overlay = this.createElement('div', [], { part: 'overlay' });
+    this._panel = this.createElement('div', ['glass-sheet'], { role: 'dialog', part: 'sheet' });
+    this._panel.appendChild(this.createElement('div', ['glass-sheet__grip'], { 'aria-hidden': 'true' }));
+    this._titleEl = this.createElement('h2', ['glass-sheet__title'], { part: 'title' });
+    const body = this.createElement('div', ['glass-sheet__body'], { part: 'body' });
+    body.appendChild(document.createElement('slot'));
+    const actions = this.createElement('div', ['glass-sheet__actions'], { part: 'actions' });
+    actions.appendChild(this.createElement('slot', [], { name: 'actions' }));
+    this._panel.append(this._titleEl, body, actions);
+    this._overlay.appendChild(this._panel);
+    this._wrapper.appendChild(this._overlay);
+    this._applyTitle();
+    this._applyMode();
+  }
+
+  _applyTitle() {
+    const title = this.getAttribute('title') || '';
+    this._titleEl.textContent = title;
+    this._titleEl.hidden = !title;
+    if (title) this._panel.setAttribute('aria-label', title);
+    else this._panel.removeAttribute('aria-label');
+  }
+
+  _applyMode() {
+    const inline = this.inline;
+    this._overlay.classList.toggle('glass-sheet-overlay', !inline);
+    this._panel.classList.toggle('glass-sheet--inline', inline);
+    this._panel.setAttribute('aria-modal', String(!inline));
+    clearTimeout(this._hideTimer);
+    if (inline) {
+      this._overlay.classList.remove('is-active');
+      this._overlay.hidden = false;
+    } else if (this.open) {
+      this._show();
+    } else {
+      this._overlay.classList.remove('is-active');
+      this._overlay.hidden = true;
+    }
+  }
+
+  _show() {
+    clearTimeout(this._hideTimer);
+    this._panel.removeEventListener('transitionend', this._onHidden);
+    this._overlay.hidden = false;
+    void this._overlay.offsetHeight; // reflow, so the transition starts from the hidden state
+    requestAnimationFrame(() => {
+      if (this.open && !this.inline) this._overlay.classList.add('is-active');
+    });
+  }
+
+  _hide() {
+    this._overlay.classList.remove('is-active');
+    this._onHidden = () => {
+      clearTimeout(this._hideTimer);
+      this._panel.removeEventListener('transitionend', this._onHidden);
+      if (!this.open && !this.inline) this._overlay.hidden = true;
+    };
+    if (reducedMotion()) {
+      this._onHidden();
+      return;
+    }
+    this._panel.addEventListener('transitionend', this._onHidden);
+    this._hideTimer = setTimeout(this._onHidden, HIDE_FALLBACK_MS);
+  }
+
+  _dismiss() {
+    this.removeAttribute('open');
+    this.emit('glk-close');
+  }
+
+  setupEvents() {
+    this._onOverlayClick = (event) => {
+      if (!this.inline && event.target === this._overlay) this._dismiss();
+    };
+    this._onKeydown = (event) => {
+      if (event.key === 'Escape' && this.open && !this.inline) this._dismiss();
+    };
+    this._overlay.addEventListener('click', this._onOverlayClick);
+    document.addEventListener('keydown', this._onKeydown);
+  }
+
+  teardownEvents() {
+    this._overlay?.removeEventListener('click', this._onOverlayClick);
+    document.removeEventListener('keydown', this._onKeydown);
+  }
+
+  onAttributeChanged(name) {
+    if (!this._overlay) return;
+    switch (name) {
+      case 'open':
+        if (this.inline) return;
+        if (this.open) this._show();
+        else this._hide();
+        break;
+      case 'inline': this._applyMode(); break;
+      case 'title': this._applyTitle(); break;
+    }
+  }
+
+  show() { this.setAttribute('open', ''); }
+  close() { this.removeAttribute('open'); }
+
+  get open() { return this.getBoolAttr('open'); }
+  set open(v) { this.setBoolAttr('open', v); }
+
+  get inline() { return this.getBoolAttr('inline'); }
+  set inline(v) { this.setBoolAttr('inline', v); }
+}
+
+customElements.define('glk-sheet', GlkSheet);
+
+export { GlkSheet };

package/dist/components/glk-status.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkStatus extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-steps.js

@@ -0,0 +1,75 @@
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
+
+// Progress through a short flow — purely presentational. Came back from
+// EhrenPfoten in 1.15.0.
+//
+// Attributes: steps (comma-separated labels), current (0-based), label
+//             (aria-label of the list, optional)
+// Property:   current, steps (array or comma-separated text)
+// Part:       steps
+//
+// The narrowing in tight frames is the CSS block's container query; the
+// element knows nothing about it. Done steps show an SVG check, not a text
+// glyph, so the mark does not depend on the font.
+
+const CHECK = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg>';
+
+class GlkSteps extends GlkElement {
+  static get observedAttributes() { return ['steps', 'current', 'label']; }
+
+  render() {
+    this._list = this.createElement('ol', ['glass-steps'], { part: 'steps' });
+    this._wrapper.appendChild(this._list);
+    this._build();
+    this._applyLabel();
+  }
+
+  _build() {
+    const items = this.steps;
+    const current = this.current;
+    this._list.replaceChildren();
+    items.forEach((label, i) => {
+      const item = this.createElement('li', ['glass-steps__item']);
+      if (i < current) item.classList.add('glass-steps__item--done');
+      if (i === current) {
+        item.classList.add('glass-steps__item--current');
+        item.setAttribute('aria-current', 'step');
+      }
+      const num = this.createElement('span', ['glass-steps__num']);
+      if (i < current) num.innerHTML = CHECK;
+      else num.textContent = String(i + 1);
+      const text = this.createElement('span', ['glass-steps__label']);
+      text.textContent = label;
+      item.append(num, text);
+      this._list.appendChild(item);
+      if (i < items.length - 1) {
+        this._list.appendChild(this.createElement('li', ['glass-steps__line'], { 'aria-hidden': 'true' }));
+      }
+    });
+  }
+
+  _applyLabel() {
+    const label = this.getAttribute('label');
+    if (label) this._list.setAttribute('aria-label', label);
+    else this._list.removeAttribute('aria-label');
+  }
+
+  onAttributeChanged(name) {
+    if (!this._list) return;
+    if (name === 'label') this._applyLabel();
+    else this._build();
+  }
+
+  get current() { return Number(this.getAttribute('current')) || 0; }
+  set current(v) { this.setAttribute('current', String(Number(v) || 0)); }
+
+  get steps() {
+    return (this.getAttribute('steps') || '').split(',').map(s => s.trim()).filter(Boolean);
+  }
+  set steps(v) { this.setAttribute('steps', Array.isArray(v) ? v.join(',') : String(v ?? '')); }
+}
+
+customElements.define('glk-steps', GlkSteps);
+
+export { GlkSteps };

package/dist/components/glk-tab-accessory.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 const VARIANTS = ['accent', 'success', 'error'];
 

package/dist/components/glk-tab-bar.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkTabBar extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-tab-dock.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkTabDock extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-tab-item.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkTabItem extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-textarea.js

@@ -1,4 +1,5 @@
-import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
+import { GlkFormElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkTextarea extends GlkFormElement {
   static get observedAttributes() {

package/dist/components/glk-title.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkTitle extends GlkElement {
   static get observedAttributes() {

package/dist/components/glk-toast.js

@@ -1,4 +1,5 @@
-import { G as GlkElement } from './shared/base-ClsXgLON.js';
+import { GlkElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 const VARIANTS = ['success', 'error', 'warning'];
 

package/dist/components/glk-toggle.js

@@ -1,4 +1,5 @@
-import { a as GlkFormElement } from './shared/base-ClsXgLON.js';
+import { GlkFormElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkToggle extends GlkFormElement {
   static get observedAttributes() {