@jungherz-de/glasskit-elements 1.13.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/glasskit-elements",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "description": "Vanilla JavaScript Web Components wrapping the GlassKit CSS glassmorphism library",
   "license": "MIT",
   "homepage": "https://glasskit-elements.jungherz.com",
@@ -19,6 +19,7 @@
       "import": "./dist/glasskit-elements.esm.js",
       "default": "./dist/glasskit-elements.js"
     },
+    "./base.js": "./dist/components/base.js",
     "./components/*.js": "./dist/components/*.js",
     "./package.json": "./package.json"
   },
@@ -44,10 +45,10 @@
     "vanilla-js"
   ],
   "peerDependencies": {
-    "@jungherz-de/glasskit": ">=1.12.0"
+    "@jungherz-de/glasskit": ">=1.15.0"
   },
   "devDependencies": {
-    "@jungherz-de/glasskit": "^1.12.0",
+    "@jungherz-de/glasskit": "^1.15.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "rollup": "^4.0.0"

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

@@ -0,0 +1,51 @@
+import { GlkElement } from '../../base.js';
+
+// Empty state for lists and result pages. Came back from EhrenPfoten in 1.15.0.
+//
+// Attributes: title, text — an empty one hides its element instead of
+//             leaving an empty paragraph
+// Slots:      default (icon, with a plain circle as slot fallback), action
+// Parts:      empty, icon, title, text, action
+
+const FALLBACK_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M8 12h8"/></svg>';
+
+class GlkEmpty extends GlkElement {
+  static get observedAttributes() { return ['title', 'text']; }
+
+  render() {
+    const root = this.createElement('div', ['glass-empty'], { part: 'empty' });
+    const icon = this.createElement('span', ['glass-empty__icon'], { part: 'icon' });
+    const iconSlot = document.createElement('slot');
+    iconSlot.innerHTML = FALLBACK_ICON;
+    icon.appendChild(iconSlot);
+    this._titleEl = this.createElement('p', ['glass-empty__title'], { part: 'title' });
+    this._textEl = this.createElement('p', ['glass-empty__text'], { part: 'text' });
+    const action = this.createElement('div', ['glass-empty__action'], { part: 'action' });
+    action.appendChild(this.createElement('slot', [], { name: 'action' }));
+    root.append(icon, this._titleEl, this._textEl, action);
+    this._wrapper.appendChild(root);
+    this._update();
+  }
+
+  _update() {
+    const title = this.getAttribute('title') || '';
+    const text = this.getAttribute('text') || '';
+    this._titleEl.textContent = title;
+    this._titleEl.hidden = !title;
+    this._textEl.textContent = text;
+    this._textEl.hidden = !text;
+  }
+
+  onAttributeChanged() {
+    if (this._titleEl) this._update();
+  }
+
+  get text() { return this.getAttribute('text') || ''; }
+  set text(v) {
+    if (v) this.setAttribute('text', v);
+    else this.removeAttribute('text');
+  }
+}
+
+customElements.define('glk-empty', GlkEmpty);
+export { GlkEmpty };

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

@@ -0,0 +1,139 @@
+import { GlkElement } from '../../base.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/src/components/forms/glk-segmented.js

@@ -0,0 +1,122 @@
+import { GlkFormElement } from '../../base.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/src/components/navigation/glk-steps.js

@@ -0,0 +1,73 @@
+import { GlkElement } from '../../base.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/src/index.js

@@ -1,6 +1,12 @@
 // GlassKit Elements — Web Components for GlassKit CSS
 // https://github.com/JUNGHERZ/GlassKit
 
+// Base classes — so a project can build its own elements on the same
+// lifecycle, stylesheet adoption, theme sync and emit(). Also reachable as
+// GlassKitElements.GlkElement from the IIFE bundle, and via the stable
+// subpath '@jungherz-de/glasskit-elements/base.js' for per-component setups.
+export { GlkElement, GlkFormElement } from './base.js';
+
 // Navigation
 export { GlkNav } from './components/navigation/glk-nav.js';
 export { GlkPill } from './components/navigation/glk-pill.js';
@@ -8,6 +14,7 @@ export { GlkTabBar } from './components/navigation/glk-tab-bar.js';
 export { GlkTabItem } from './components/navigation/glk-tab-item.js';
 export { GlkTabDock } from './components/navigation/glk-tab-dock.js';
 export { GlkTabAccessory } from './components/navigation/glk-tab-accessory.js';
+export { GlkSteps } from './components/navigation/glk-steps.js';
 
 // Content
 export { GlkCard } from './components/content/glk-card.js';
@@ -16,6 +23,7 @@ export { GlkAvatar } from './components/content/glk-avatar.js';
 export { GlkTitle } from './components/content/glk-title.js';
 export { GlkDivider } from './components/content/glk-divider.js';
 export { GlkStatus } from './components/content/glk-status.js';
+export { GlkEmpty } from './components/content/glk-empty.js';
 
 // Buttons
 export { GlkButton } from './components/buttons/glk-button.js';
@@ -29,12 +37,14 @@ export { GlkToggle } from './components/forms/glk-toggle.js';
 export { GlkCheckbox } from './components/forms/glk-checkbox.js';
 export { GlkRadio } from './components/forms/glk-radio.js';
 export { GlkRange } from './components/forms/glk-range.js';
+export { GlkSegmented } from './components/forms/glk-segmented.js';
 
 // Feedback
 export { GlkProgress } from './components/feedback/glk-progress.js';
 export { GlkModal } from './components/feedback/glk-modal.js';
 export { GlkToast } from './components/feedback/glk-toast.js';
 export { GlkPopover } from './components/feedback/glk-popover.js';
+export { GlkSheet } from './components/feedback/glk-sheet.js';
 
 // Containers
 export { GlkAccordion } from './components/containers/glk-accordion.js';