@jungherz-de/glasskit-elements 1.29.1 → 1.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungherz-de/glasskit-elements",
-  "version": "1.29.1",
+  "version": "1.30.0",
   "description": "Vanilla JavaScript Web Components wrapping the GlassKit CSS glassmorphism library",
   "license": "MIT",
   "homepage": "https://glasskit-elements.jungherz.com",
@@ -49,10 +49,10 @@
     "vanilla-js"
   ],
   "peerDependencies": {
-    "@jungherz-de/glasskit": ">=1.29.1"
+    "@jungherz-de/glasskit": ">=1.30.0"
   },
   "devDependencies": {
-    "@jungherz-de/glasskit": "^1.29.1",
+    "@jungherz-de/glasskit": "^1.30.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "rollup": "^4.0.0"

package/src/components/containers/glk-accordion-item.js

@@ -2,18 +2,23 @@ import { GlkElement } from '../../base.js';
 
 const CHEVRON_SVG = `<span class="glass-accordion__trigger-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="6 9 12 15 18 9"/></svg></span>`;
 
+// Open, the content takes its own height (GlassKit 1.30.0: a grid row that
+// slides from 0fr to 1fr; until then it ended at 500 px). Parts since
+// 1.30.0: item, trigger, content, body.
+
 class GlkAccordionItem extends GlkElement {
   static get observedAttributes() {
     return ['title', 'open'];
   }
 
   render() {
-    this._item = this.createElement('div', ['glass-accordion__item']);
+    this._item = this.createElement('div', ['glass-accordion__item'], { part: 'item' });
 
     // Trigger button — says whether its section is open, and which one it is
     this._trigger = this.createElement('button', ['glass-accordion__trigger'], {
       type: 'button',
-      'aria-controls': 'content'
+      'aria-controls': 'content',
+      part: 'trigger'
     });
     this.takeTitle();
     this._triggerText = document.createTextNode(this._title || '');
@@ -21,8 +26,8 @@ class GlkAccordionItem extends GlkElement {
     this._trigger.insertAdjacentHTML('beforeend', CHEVRON_SVG);
 
     // Content
-    this._content = this.createElement('div', ['glass-accordion__content'], { id: 'content' });
-    const body = this.createElement('div', ['glass-accordion__body']);
+    this._content = this.createElement('div', ['glass-accordion__content'], { id: 'content', part: 'content' });
+    const body = this.createElement('div', ['glass-accordion__body'], { part: 'body' });
     body.appendChild(document.createElement('slot'));
     this._content.appendChild(body);
 

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

@@ -1,4 +1,5 @@
 import { GlkElement } from '../../base.js';
+import { scrollLock } from '../../scroll-lock.js';
 
 // Since 1.20.0 the overlay is a native <dialog>, opened with showModal(). The
 // browser then does what a modal needs: the dialog lies in the top layer, the
@@ -16,6 +17,10 @@ import { GlkElement } from '../../base.js';
 // Chrome takes the first field of the content, Safari the first action. An
 // element marked autofocus — in the content or among the actions — settles
 // it in both.
+//
+// Since 1.30.0 it emits glk-open whenever it opens — attribute, property or
+// show() — and the page does not scroll while it is open (glk-close stays
+// the user's close only).
 
 const CLOSE_FALLBACK_MS = 400;
 
@@ -85,6 +90,7 @@ class GlkModal extends GlkElement {
 
     this._overlay.appendChild(modal);
     this._wrapper.appendChild(this._overlay);
+    this._scrollLock = scrollLock();
     // `open` is applied in setupEvents, which also runs when a moved element
     // comes back.
   }
@@ -136,6 +142,7 @@ class GlkModal extends GlkElement {
     this._onClose = () => {
       if (this._overlay.open) return;       // a late event from an earlier close
       this._overlay.classList.remove('is-active');
+      this._scrollLock.release();
       if (this.open) this._dismiss();
     };
     this._overlay.addEventListener('close', this._onClose);
@@ -154,6 +161,7 @@ class GlkModal extends GlkElement {
     this._overlay?.removeEventListener('transitionend', this._onFaded);
     this._overlay?.classList.remove('is-active');
     if (this._overlay?.open) this._overlay.close();
+    this._scrollLock?.release();
   }
 
   onAttributeChanged(name, _old, value) {
@@ -176,8 +184,10 @@ class GlkModal extends GlkElement {
     dialog.removeEventListener('transitionend', this._onFaded);
     if (!dialog.open) {
       dialog.showModal();
+      this._scrollLock.hold();
       // The actions are copies in the shadow root; the originals are not shown.
       (this._footer.querySelector('[autofocus]') || this.querySelector('[autofocus]'))?.focus();
+      this.emit('glk-open');
     }
     void dialog.offsetHeight; // reflow, so the fade starts from the closed state
     requestAnimationFrame(() => {
@@ -204,6 +214,7 @@ class GlkModal extends GlkElement {
 
   /** Closed by the user — a click outside, Escape. */
   _dismiss() {
+    if (!this.open) return;               // Escape again while it fades out
     this.removeAttribute('open');
     this.emit('glk-close');
   }

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

@@ -1,4 +1,5 @@
 import { GlkElement } from '../../base.js';
+import { scrollLock } from '../../scroll-lock.js';
 
 // Bottom sheet — the mobile sibling of <glk-modal>. Came back from
 // EhrenPfoten in 1.15.0.
@@ -6,15 +7,23 @@ import { GlkElement } from '../../base.js';
 // 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>
+// Events:     glk-open — whenever it opens: attribute, property or show()
+//             (since 1.30.0); 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.
+// Since 1.30.0 the overlay is a native <dialog> opened with showModal(), as
+// <glk-modal>'s. It lies in the top layer, above every fixed or transformed
+// element of the page whatever its z-index — a fixed tab bar with a
+// backdrop filter landed above the old fixed div now and then on iOS — the
+// page behind it is inert and does not scroll, and Escape arrives as the
+// dialog's cancel event. Inline, the panel sits in the flow and the dialog
+// stays closed.
+//
+// Opening and closing are animated by the CSS block: .is-active is added one
+// frame after showModal(), and on closing the dialog closes only after the
+// panel's transitionend (safety net 400 ms). Under prefers-reduced-motion it
+// switches at once.
 
 const HIDE_FALLBACK_MS = 400;
 
@@ -26,66 +35,84 @@ 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._overlay = this.createElement('dialog', ['glass-sheet-overlay'], { part: 'overlay' });
+    this._panel = this.createElement('div', ['glass-sheet'], { part: 'sheet' });
     this._panel.appendChild(this.createElement('div', ['glass-sheet__grip'], { 'aria-hidden': 'true' }));
-    this._titleEl = this.createElement('h2', ['glass-sheet__title'], { part: 'title' });
+    this._titleEl = this.createElement('h2', ['glass-sheet__title'], { id: '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._scrollLock = scrollLock();
     this.takeTitle();
-    this._applyTitle();
     this._applyMode();
+    // `open` is applied in setupEvents, which also runs when a moved element
+    // comes back.
   }
 
+  /** The title names the dialog, or the inline panel. */
   _applyTitle() {
     if (!this._titleEl) return;
     const title = this._title || '';
     this._titleEl.textContent = title;
     this._titleEl.hidden = !title;
-    if (title) this._panel.setAttribute('aria-label', title);
-    else this._panel.removeAttribute('aria-label');
+    const named = this.inline ? this._panel : this._overlay;
+    const other = this.inline ? this._overlay : this._panel;
+    other.removeAttribute('aria-labelledby');
+    if (title) named.setAttribute('aria-labelledby', 'title');
+    else named.removeAttribute('aria-labelledby');
   }
 
+  /** Inline the panel sits in the flow; else it lives in the dialog. */
   _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._settle();
       this._overlay.classList.remove('is-active');
-      this._overlay.hidden = false;
-    } else if (this.open) {
-      this._show();
+      if (this._overlay.open) this._overlay.close();
+      this._scrollLock.release();
+      this._panel.setAttribute('role', 'dialog');
+      this._wrapper.appendChild(this._panel);
     } else {
-      this._overlay.classList.remove('is-active');
-      this._overlay.hidden = true;
+      this._panel.removeAttribute('role');
+      this._overlay.appendChild(this._panel);
     }
+    this._applyTitle();
   }
 
-  _show() {
+  /** Drops a pending close. */
+  _settle() {
     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
+    if (this._onHidden) this._panel.removeEventListener('transitionend', this._onHidden);
+  }
+
+  _show() {
+    const dialog = this._overlay;
+    this._settle();
+    if (!dialog.open) {
+      dialog.showModal();
+      this._scrollLock.hold();
+      this.querySelector('[autofocus]')?.focus();
+      this.emit('glk-open');
+    }
+    void dialog.offsetHeight; // reflow, so the transition starts from the closed state
     requestAnimationFrame(() => {
-      if (this.open && !this.inline) this._overlay.classList.add('is-active');
+      if (this.open && !this.inline) dialog.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;
+    const dialog = this._overlay;
+    dialog.classList.remove('is-active');
+    this._onHidden = (event) => {
+      if (event && event.target !== this._panel) return;   // a transition inside the panel
+      this._settle();
+      if (!this.open && dialog.open) dialog.close();
     };
-    if (reducedMotion()) {
+    if (!dialog.open || reducedMotion()) {
       this._onHidden();
       return;
     }
@@ -93,36 +120,60 @@ class GlkSheet extends GlkElement {
     this._hideTimer = setTimeout(this._onHidden, HIDE_FALLBACK_MS);
   }
 
+  /** Closed by the user — a click outside, Escape. */
   _dismiss() {
+    if (!this.open) return;
     this.removeAttribute('open');
     this.emit('glk-close');
   }
 
   setupEvents() {
     this._onOverlayClick = (event) => {
-      if (!this.inline && event.target === this._overlay) this._dismiss();
+      if (event.target === this._overlay) this._dismiss();
     };
-    this._onKeydown = (event) => {
-      if (event.key === 'Escape' && this.open && !this.inline) this._dismiss();
+    // Escape: the dialog would close at once; it slides out like a click outside.
+    this._onCancel = (event) => {
+      event.preventDefault();
+      this._dismiss();
+    };
+    // Every close ends the lock. The browser may also close the dialog by
+    // itself — Chrome does on a second Escape without user activation.
+    this._onClose = () => {
+      if (this._overlay.open) return;       // a late event from an earlier close
+      this._overlay.classList.remove('is-active');
+      this._scrollLock.release();
+      if (this.open && !this.inline) this._dismiss();
     };
     this._overlay.addEventListener('click', this._onOverlayClick);
-    document.addEventListener('keydown', this._onKeydown);
+    this._overlay.addEventListener('cancel', this._onCancel);
+    this._overlay.addEventListener('close', this._onClose);
+    if (this.open && !this.inline) this._show();
   }
 
   teardownEvents() {
     this._overlay?.removeEventListener('click', this._onOverlayClick);
-    document.removeEventListener('keydown', this._onKeydown);
+    this._overlay?.removeEventListener('cancel', this._onCancel);
+    this._overlay?.removeEventListener('close', this._onClose);
+    // Taken out of the document, the dialog leaves the top layer but stays
+    // open. Closed now, it opens as a modal again when the element comes back.
+    this._settle();
+    this._overlay?.classList.remove('is-active');
+    if (this._overlay?.open) this._overlay.close();
+    this._scrollLock?.release();
   }
 
   onAttributeChanged(name, _old, value) {
     if (!this._overlay) return;
     switch (name) {
       case 'open':
-        if (this.inline) return;
+        if (this.inline || !this.isConnected) return;   // setupEvents applies it on connect
         if (this.open) this._show();
         else this._hide();
         break;
-      case 'inline': this._applyMode(); break;
+      case 'inline':
+        this._applyMode();
+        if (!this.inline && this.open && this.isConnected) this._show();
+        break;
       case 'title': if (this.takeTitle(value)) this._applyTitle(); break;
     }
   }

package/src/scroll-lock.js

@@ -0,0 +1,42 @@
+// Keep the page still behind an open <glk-modal> or <glk-sheet> (since
+// 1.30.0). The top layer makes the page inert for pointer and keyboard, but
+// a wheel or a finger over the dimmed area still scrolled the document.
+// overflow: hidden on the root scroller stops that; inner scrollers of the
+// page cannot be reached through the overlay, and the page's own scripts can
+// still scroll it. One count for every open overlay, so closing one of two
+// keeps the lock. Where a classic scrollbar disappears with it, the body
+// takes its width as padding, so the page does not shift sideways; measured
+// before and after, so a gutter the browser keeps is not paid twice.
+
+let locks = 0;
+let saved = null;
+
+function lockPageScroll() {
+  if (locks++ > 0) return;
+  const root = document.documentElement, body = document.body;
+  const bar = window.innerWidth - root.clientWidth;
+  saved = { overflow: root.style.overflow, padding: body.style.paddingRight };
+  const padding = getComputedStyle(body).paddingRight;
+  root.style.overflow = 'hidden';
+  const gone = bar - (window.innerWidth - root.clientWidth);
+  if (gone > 0) body.style.paddingRight = `calc(${padding} + ${gone}px)`;
+}
+
+function unlockPageScroll() {
+  if (locks === 0 || --locks > 0) return;
+  document.documentElement.style.overflow = saved.overflow;
+  document.body.style.paddingRight = saved.padding;
+  saved = null;
+}
+
+/**
+ * One overlay's share of the lock: hold() while it is open, release() on
+ * every way it closes — both are safe to call twice.
+ */
+export function scrollLock() {
+  let held = false;
+  return {
+    hold() { if (!held) { held = true; lockPageScroll(); } },
+    release() { if (held) { held = false; unlockPageScroll(); } },
+  };
+}