@jungherz-de/glasskit-elements 1.29.1 → 1.30.0

package/CHANGELOG.md

@@ -7,6 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.30.0] – 2026-10-22
+
+Versions stay aligned with GlassKit at 1.30.0, which this release is built against (peer dependency `>=1.30.0`).
+
+### Changed
+
+- **`<glk-sheet>` is a native `<dialog>` in the top layer.** Its overlay was a `div` with `position: fixed` and `z-index: 1000` in its shadow root, so whether it covered the page depended on stacking contexts and on how the browser composites: on an iPhone a fixed bottom tab bar with a backdrop filter and a transform now and then landed above an open sheet. Since 1.30.0 the overlay is a `<dialog>` opened with `showModal()`, as `<glk-modal>`'s has been since 1.20.0: it lies in the top layer, above every fixed or transformed element whatever its `z-index`, the page behind it is inert for pointer, keyboard and screen readers, focus moves in — an `autofocus` element takes it — and Escape arrives as the dialog's `cancel` event and slides it out. The slide and the fade stay as they were, on GlassKit 1.30.0's rules for `dialog.glass-sheet-overlay`; `inline` keeps the panel in the flow, and switching between the two works while open. The part `overlay` is the `<dialog>` now; the title names the dialog through `aria-labelledby`. ([#21](https://github.com/JUNGHERZ/GlassKit-Elements/issues/21))
+
+### Added
+
+- **`glk-open` on `<glk-sheet>` and `<glk-modal>`.** Nobody learned that a sheet had opened: only `glk-close` existed, and only for the visitor's close. Both now emit `glk-open` whenever they open — attribute, property or `show()`, also when they start open — so a page can hide its own fixed bars, for instance. `glk-close` keeps its meaning. ([#21](https://github.com/JUNGHERZ/GlassKit-Elements/issues/21))
+- **The page behind an open sheet or modal does not scroll.** The top layer made the page inert for pointer and keyboard, but a wheel or a finger over the dimmed area still scrolled it, and on a phone touch scrolling moved the page and slid its bars. While either is open, the root scroller takes `overflow: hidden`, and a classic scrollbar keeps its room so the page does not shift; the lock is shared, so it ends only when the last open sheet or modal closes. Scripts of the page can still scroll it. ([#21](https://github.com/JUNGHERZ/GlassKit-Elements/issues/21))
+- **Parts on `<glk-accordion-item>`:** `item`, `trigger`, `content`, `body`. Its shadow root had none, so a page could not reach the content at all. ([#20](https://github.com/JUNGHERZ/GlassKit-Elements/issues/20))
+
+### Fixed
+
+- **An open `<glk-accordion-item>` shows all of its content.** GlassKit capped the open content at `max-height: 500px` with `overflow: hidden`, so a section with 40 rows of 30px showed 500 of 1,220px and the rest, a "show more" row included, could not be reached. GlassKit 1.30.0 slides a grid row from `0fr` to `1fr` instead: the section takes the height of its content, however long, also when the content grows while open, and the slide stays. ([#20](https://github.com/JUNGHERZ/GlassKit-Elements/issues/20))
+- **Escape pressed twice on `<glk-modal>` emitted `glk-close` twice.** The second press arrived while the modal faded out; it is ignored now, on the sheet as well.
+- **A modal or sheet with nothing to focus no longer rings the screen.** `showModal()` then focuses the dialog itself, and Chromium and WebKit drew its focus ring along the edges of the viewport; GlassKit 1.30.0 gives both dialogs no outline. Tab still goes to the first control.
+
+Measured in Chromium 153, WebKit 26.6 and Firefox 151, with the issues' pages: the accordion item shows 1,220 of 1,220px (1.29.1: 500) and has its four parts. The sheet matches `:modal` after `setAttribute('open', '')`, `glk-open` fires once, the `autofocus` field has the focus, the root takes `overflow: hidden` and a wheel over the scrim leaves the page where it was (1.29.1: no event, focus on the body, the page scrolled); Escape and a scrim click slide it out with one `glk-close`, `close()` with none; a modal and a sheet open together keep the lock until the second closes; a sheet moved while open stays modal; an inline sheet opens no dialog and locks nothing, and turned into an overlay while open it becomes modal with `glk-open`. The modal emits `glk-open` and locks the page as well, and two Escapes give one `glk-close` (1.29.1: two). An open sheet renders pixel-identical to the `div` of 1.29.1, light and dark, 390 and 800px wide.
+
+---
+
 ## [1.29.1] – 2026-10-21
 
 Rebuilt against GlassKit 1.29.1; the peer dependency moves to `>=1.29.1`.
@@ -956,7 +980,8 @@ Starting with this release, GlassKit Elements version numbers are aligned with G
 
 ---
 
-[Unreleased]: https://github.com/JUNGHERZ/GlassKit-Elements/compare/v1.29.1...HEAD
+[Unreleased]: https://github.com/JUNGHERZ/GlassKit-Elements/compare/v1.30.0...HEAD
+[1.30.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.30.0
 [1.29.1]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.29.1
 [1.29.0]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.29.0
 [1.28.1]: https://github.com/JUNGHERZ/GlassKit-Elements/releases/tag/v1.28.1

package/README.md

@@ -5,7 +5,7 @@
   <a href="#"><img src="https://img.shields.io/badge/vanilla_JS-no_dependencies-44cc11?style=flat-square" alt="Vanilla JS"></a>
   <a href="#"><img src="https://img.shields.io/badge/components-36-7ec8e3?style=flat-square" alt="36 Components"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT License"></a>
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.29.1-lightgrey?style=flat-square" alt="Changelog"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/changelog-v1.30.0-lightgrey?style=flat-square" alt="Changelog"></a>
   <a href="https://www.npmjs.com/package/@jungherz-de/glasskit-elements"><img src="https://img.shields.io/badge/npm-%40jungherz--de%2Fglasskit--elements-cb3837?style=flat-square&logo=npm" alt="npm"></a>
 </p>
 
@@ -67,7 +67,7 @@ It is the **app layer** of the GlassKit family — three layers, one design lang
 
 ```html
 <!-- 1. GlassKit CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.29/glasskit.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.30/glasskit.min.css">
 
 <!-- 2. GlassKit Elements -->
 <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
@@ -105,7 +105,7 @@ The per-component files leave `@jungherz-de/glasskit/glasskit-styles.js` as an e
 <!DOCTYPE html>
 <html data-theme="dark">
 <head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.29/glasskit.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.30/glasskit.min.css">
   <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>
 </head>
 <body>
@@ -174,10 +174,10 @@ All form components support `name`, `value`, `disabled` and participate in nativ
 | Component | Description | Key Attributes |
 |---|---|---|
 | `<glk-progress>` | Progress bar | `value`, `label`, `variant` (success, error), `size` (sm, lg) |
-| `<glk-modal>` | Modal dialog — a native `<dialog>`: page behind inert, focus in and back | `open`, `title` |
+| `<glk-modal>` | Modal dialog — a native `<dialog>`: page behind inert and still, focus in and back | `open`, `title` |
 | `<glk-toast>` | Notification that hides itself, or an offer with one action and an × | `message`, `variant` (success, error, warning), `duration`, `action-label`, `action-value`, `dismissible` |
 | `<glk-popover>` | Anchored dropdown / menu | `open`, `placement` (top, bottom, start, end) |
-| `<glk-sheet>` | Bottom sheet, the mobile sibling of the modal | `open`, `inline`, `title` |
+| `<glk-sheet>` | Bottom sheet, the mobile sibling of the modal — a native `<dialog>` in the top layer since 1.30.0 | `open`, `inline`, `title` |
 
 ### Containers
 

package/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: glasskit-elements
-description: GlassKit Elements is a vanilla-JS Web Components library (v1.29.1) wrapping GlassKit CSS v1.29.1. It provides 36 custom elements with the `glk-` prefix, Dark/Light mode with automatic theme sync, Shadow DOM encapsulation, and form-associated custom elements. Use this reference whenever generating HTML that uses `<glk-*>` tags to ensure correct attributes, slots, events, and composition.
+description: GlassKit Elements is a vanilla-JS Web Components library (v1.30.0) wrapping GlassKit CSS v1.30.0. It provides 36 custom elements with the `glk-` prefix, Dark/Light mode with automatic theme sync, Shadow DOM encapsulation, and form-associated custom elements. Use this reference whenever generating HTML that uses `<glk-*>` tags to ensure correct attributes, slots, events, and composition.
 ---
 
 # GlassKit Elements – AI Component Reference
@@ -286,6 +286,8 @@ container components are exposed as parts:
 | `<glk-card>` | `card` |
 | `<glk-list>` | `header`, `list` |
 | `<glk-modal>` | `overlay`, `modal`, `header`, `body`, `footer` |
+| `<glk-sheet>` | `overlay`, `sheet`, `title`, `body`, `actions` |
+| `<glk-accordion-item>` | `item`, `trigger`, `content`, `body` (since 1.30.0) |
 
 ```css
 glk-card::part(card) { border-radius: 8px; }
@@ -917,7 +919,9 @@ Slots:
 - default — modal body content
 - `actions` — container for footer buttons (GlassKit expects `<button class="glass-modal__action">`)
 
-Methods: `.show()`, `.close()`. Property: `.open`. Events: `glk-close`.
+Methods: `.show()`, `.close()`. Property: `.open`. Events: `glk-open` — whenever it opens (since 1.30.0); `glk-close` — the user closed it.
+
+While it is open the page behind it does not scroll (since 1.30.0): the top layer kept it inert for pointer and keyboard, but a wheel or a finger over the dimmed area still moved it. The lock is shared with `<glk-sheet>`: it ends when the last of them closes. Scripts of the page can still scroll it.
 
 Closes automatically on overlay click and <kbd>Escape</kbd>, with its fade, and emits `glk-close` then; `.close()` and removing `open` do not emit.
 
@@ -1042,10 +1046,12 @@ Collapsible sections.
 | `title` | String | Trigger label |
 | `open` | Boolean | Expanded state |
 
-Default slot: body content. Events: `glk-toggle` → `{ open }`. Property: `.open`.
+Default slot: body content. Events: `glk-toggle` → `{ open }`. Property: `.open`. Parts: `item`, `trigger`, `content`, `body` (since 1.30.0).
 
 The trigger carries `aria-expanded` and `aria-controls`; a closed section is `inert`, so its links and fields are out of the tab order and the accessibility tree until it opens (since 1.20.0 — before, they were only squeezed to zero height and Tab still reached them).
 
+An open section takes the height of its content, however long, and slides to it (GlassKit 1.30.0: a grid row from `0fr` to `1fr`). Until then it ended at 500px and cut off the rest — a list of 40 rows showed 500 of 1,220px. Never lift a cap with `max-height` of your own; there is none to lift.
+
 ---
 
 ### 3.24 `<glk-list>` + `<glk-list-item>`
@@ -1223,7 +1229,7 @@ Part: `steps`.
 
 ### 3.27 `<glk-sheet>`
 
-Bottom sheet (since 1.15.0) — the mobile sibling of `<glk-modal>`, same API shape. Opening and closing are animated by GlassKit's `.glass-sheet` block: `.is-active` is added one frame after the overlay is unhidden, and on closing the overlay is hidden only after `transitionend` (safety net 400 ms), so no blurred layer idles behind the page; under `prefers-reduced-motion` it switches at once. The Escape listener sits on `document` and is removed in `teardownEvents()`.
+Bottom sheet (since 1.15.0) — the mobile sibling of `<glk-modal>`, same API shape. **Since 1.30.0 a native `<dialog>` opened with `showModal()`**, like the modal: it lies in the top layer, above every fixed or transformed element of the page whatever its `z-index` (on iOS a fixed tab bar with a backdrop filter could land above the old fixed `div`), the page behind it is inert and does not scroll, focus moves in (`autofocus` decides where), and Escape arrives as the dialog's `cancel` event. Opening and closing are animated by GlassKit's `.glass-sheet` 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. `inline` keeps the panel in the flow; the dialog stays closed then.
 
 ```html
 <glk-sheet id="sheet" title="Rebook to …">
@@ -1237,9 +1243,9 @@ Bottom sheet (since 1.15.0) — the mobile sibling of `<glk-modal>`, same API sh
 |---|---|---|
 | `open` | Boolean | Shown as an overlay (reflected property) |
 | `inline` | Boolean | In the flow, no overlay, always visible — e.g. inside a phone frame or a card |
-| `title` | String | Heading and `aria-label` of the dialog |
+| `title` | String | Heading; names the dialog |
 
-Methods: `show()`, `close()`. Slots: default (content), `actions`. Events: `glk-close` — only when the user closes it (scrim click, Escape), like `<glk-modal>`; `close()` does not emit. Parts: `overlay`, `sheet`, `title`, `body`, `actions`.
+Methods: `show()`, `close()`. Slots: default (content), `actions`. Events: `glk-open` — whenever it opens, by attribute, property or `show()` (since 1.30.0), for instance to hide a page's own fixed bars; `glk-close` — only when the user closes it (scrim click, Escape), like `<glk-modal>`; `close()` does not emit. Parts: `overlay` (the `<dialog>`), `sheet`, `title`, `body`, `actions`.
 
 ---
 
@@ -1512,12 +1518,12 @@ Key points:
 | `<glk-checkbox>` | `.checked` | `checked` | `glk-change` | `{ checked }` |
 | `<glk-radio>` | `.checked` | `checked` | `glk-change` | `{ checked, value }` |
 | `<glk-range>` | `.value` | `value` | `glk-input`, `glk-change` | `{ value }` |
-| `<glk-modal>` | `.open` | `open` | `glk-close` | — |
+| `<glk-modal>` | `.open` | `open` | `glk-open`, `glk-close` (user close only) | — |
 | `<glk-popover>` | `.open` | `open` | `glk-open`, `glk-close` | — |
 | `<glk-accordion-item>` | `.open` | `open` | `glk-toggle` | `{ open }` |
 | `<glk-list-item>` | — | `interactive` | `glk-click` (only when interactive) | — |
 | `<glk-segmented>` | `.value` | `value` | `glk-change` | `{ value }` |
-| `<glk-sheet>` | `.open` | `open` | `glk-close` (user close only) | — |
+| `<glk-sheet>` | `.open` | `open` | `glk-open`, `glk-close` (user close only) | — |
 | `<glk-date-strip>` | `.value` | `value` | `glk-change` (user only) | `{ value }` |
 | `<glk-calendar>` | `.value`, `.month` | `value`, `month` | `glk-change` (user only), `glk-month` (user only) | `{ value }`, `{ month }` |
 | `<glk-image-picker>` | `.src` (not reflected) | `src` | `glk-change`, `glk-error` | `{ dataUrl, width, height, size }`, `{ message, name }` |
@@ -1580,7 +1586,7 @@ All `glk-*` events bubble and are `composed: true`, so they pierce shadow bounda
 | `<glk-empty>` | Content | `title`, `text` | default (icon), `action` | — |
 | `<glk-segmented>` | Forms | `options`, `value`, `full`, `overflow`, `droplet`, `icon-only`, `label`, `name` | `icon-<value>` | `glk-change` |
 | `<glk-steps>` | Navigation | `steps`, `current`, `label` | — | — |
-| `<glk-sheet>` | Feedback | `open`, `inline`, `title` | default, `actions` | `glk-close` |
+| `<glk-sheet>` | Feedback | `open`, `inline`, `title` | default, `actions` | `glk-open`, `glk-close` |
 | `<glk-date-strip>` | Navigation | `start`, `days`, `value`, `today`, `marks`, `locale`, `label` | — | `glk-change` |
 | `<glk-calendar>` | Forms | `month`, `value`, `today`, `min`, `max`, `marks`, `locale`, `week-start`, `label`, `name` | — | `glk-change`, `glk-month` |
 | `<glk-image-picker>` | Forms | `src`, `label`, `hint`, `round`, `max`, `type`, `quality`, `accept` | — | `glk-change`, `glk-error` |
@@ -1597,7 +1603,7 @@ All `glk-*` events bubble and are `composed: true`, so they pierce shadow bounda
 | `<glk-select>` | Forms | `label`, `name`, `value`, `disabled`, `required` | default (`<option>`) | `glk-change` |
 | `<glk-textarea>` | Forms | `label`, `rows`, `placeholder`, `name`, `value`, `disabled`, `readonly`, `required` | — | `glk-input`, `glk-change` |
 | `<glk-toggle>` | Forms | `label`, `checked`, `disabled`, `name`, `value`, `required` | — | `glk-change` |
-| `<glk-modal>` | Feedback | `open`, `title` | default, `actions` | `glk-close` |
+| `<glk-modal>` | Feedback | `open`, `title` | default, `actions` | `glk-open`, `glk-close` |
 | `<glk-popover>` | Feedback | `open`, `placement` | `trigger`, default | `glk-open`, `glk-close` |
 | `<glk-progress>` | Feedback | `value`, `label`, `variant`, `size` | — | — |
 | `<glk-toast>` | Feedback | `message`, `variant`, `duration`, `visible`, `action-label`, `action-value`, `dismissible`, `close-label` | `icon` | `glk-action`, `glk-close`, `glk-dismiss` |

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

@@ -3,18 +3,23 @@ import '@jungherz-de/glasskit/glasskit-styles.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 || '');
@@ -22,8 +27,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/dist/components/glk-modal.js

@@ -1,4 +1,5 @@
 import { GlkElement } from './base.js';
+import { s as scrollLock } from './shared/scroll-lock-CPPPbHHK.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
 // Since 1.20.0 the overlay is a native <dialog>, opened with showModal(). The
@@ -17,6 +18,10 @@ import '@jungherz-de/glasskit/glasskit-styles.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;
 
@@ -86,6 +91,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.
   }
@@ -137,6 +143,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);
@@ -155,6 +162,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) {
@@ -177,8 +185,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(() => {
@@ -205,6 +215,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/dist/components/glk-sheet.js

@@ -1,4 +1,5 @@
 import { GlkElement } from './base.js';
+import { s as scrollLock } from './shared/scroll-lock-CPPPbHHK.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
 // Bottom sheet — the mobile sibling of <glk-modal>. Came back from
@@ -7,15 +8,23 @@ import '@jungherz-de/glasskit/glasskit-styles.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;
 
@@ -27,66 +36,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;
     }
@@ -94,36 +121,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/dist/components/shared/scroll-lock-CPPPbHHK.js

@@ -0,0 +1,44 @@
+// 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.
+ */
+function scrollLock() {
+  let held = false;
+  return {
+    hold() { if (!held) { held = true; lockPageScroll(); } },
+    release() { if (held) { held = false; unlockPageScroll(); } },
+  };
+}
+
+export { scrollLock as s };