@jungherz-de/glasskit-elements 1.14.0 → 1.15.0

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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { 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 { GlkFormElement } from './base.js';
+import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkToggle extends GlkFormElement {
   static get observedAttributes() {