@datatechsolutions/tympan 0.3.0 → 0.3.1

package/src/elements/markdown-view/element.ts

@@ -0,0 +1,183 @@
+import { TyElement } from '../base.ts'
+import { markdownViewDefinition } from './definition.ts'
+import { readBlocks, type Block, type Inline } from '../../components/markdown-view/parse.ts'
+
+const SVG = 'http://www.w3.org/2000/svg'
+
+function el(tag: string, className: string, attrs: Record<string, string> = {}): HTMLElement {
+  const node = document.createElement(tag)
+  node.className = className
+  for (const [name, value] of Object.entries(attrs)) node.setAttribute(name, value)
+  return node
+}
+
+/** The external-link glyph (lucide strokes, ISC, THIRD_PARTY_NOTICES), as `<ty-link>` renders it. */
+function externalIcon(): SVGSVGElement {
+  const svg = document.createElementNS(SVG, 'svg')
+  svg.setAttribute('class', 'ty-icon ty-mirror-rtl ty-link__external')
+  svg.setAttribute('aria-hidden', 'true')
+  svg.setAttribute('focusable', 'false')
+  svg.setAttribute('width', '24')
+  svg.setAttribute('height', '24')
+  svg.setAttribute('viewBox', '0 0 24 24')
+  svg.setAttribute('fill', 'none')
+  svg.setAttribute('stroke', 'currentColor')
+  svg.setAttribute('stroke-width', '2')
+  svg.setAttribute('stroke-linecap', 'round')
+  svg.setAttribute('stroke-linejoin', 'round')
+  for (const d of ['M15 3h6v6', 'M10 14 21 3', 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6']) {
+    const path = document.createElementNS(SVG, 'path')
+    path.setAttribute('d', d)
+    svg.append(path)
+  }
+  return svg
+}
+
+/** `headingBase` clamped to the spec range (2 to 6). */
+function headingLevel(raw: unknown, depth: number): number {
+  const n = Number(raw)
+  const base = Number.isFinite(n) ? Math.min(6, Math.max(2, Math.floor(n))) : 3
+  return Math.min(6, base + depth - 1)
+}
+
+/**
+ * `<ty-markdown-view>`. Self-rendering: on connect and on every attribute
+ * change the element parses `text` with the shared MarkdownView parser and
+ * builds the whole subtree as elements and text nodes — never from an HTML
+ * string, so source markup stays text. The output mirrors the React
+ * MarkdownView node for node (`.ty-markdown` root with `data-density`,
+ * real headings offset by `heading-base`, lists, sunken code blocks with
+ * their language tag), and its links mirror an external `<ty-link>`
+ * (`target="_blank"`, `rel="noopener noreferrer"`, the icon and the hidden
+ * new-tab hint from `new-tab-label`). A code block becomes a focusable,
+ * labelled scroll region only when it overflows.
+ */
+export class TyMarkdownViewElement extends TyElement {
+  static override definition = markdownViewDefinition
+
+  protected override connected(): void {
+    this.#render()
+  }
+
+  protected override changed(): void {
+    if (this.isConnected) this.#render()
+  }
+
+  #render(): void {
+    const props = this.props
+    const source = typeof props.text === 'string' ? props.text : ''
+    const blocks = readBlocks(source)
+    if (blocks.length === 0) {
+      this.replaceChildren()
+      return
+    }
+    const root = el('div', 'ty-markdown', { 'data-density': String(props.density) })
+    for (const block of blocks) root.append(this.#block(block, props.headingBase))
+    this.replaceChildren(root)
+    this.#labelOverflowingCodeBlocks(root)
+  }
+
+  #block(block: Block, base: unknown): HTMLElement {
+    if (block.kind === 'heading') {
+      const heading = el(`h${headingLevel(base, block.depth)}`, 'ty-markdown__heading', {
+        'data-depth': String(block.depth),
+        dir: 'auto',
+      })
+      heading.append(...this.#inline(block.content))
+      return heading
+    }
+    if (block.kind === 'list') {
+      const list = el(block.ordered ? 'ol' : 'ul', 'ty-markdown__list')
+      for (const item of block.items) {
+        const li = document.createElement('li')
+        li.setAttribute('dir', 'auto')
+        li.append(...this.#inline(item))
+        list.append(li)
+      }
+      return list
+    }
+    if (block.kind === 'code') return this.#codeBlock(block)
+    const paragraph = el('p', 'ty-markdown__paragraph', { dir: 'auto' })
+    paragraph.append(...this.#inline(block.content))
+    return paragraph
+  }
+
+  /** Inline nodes as DOM: text stays text; only the parser's own elements are created. */
+  #inline(nodes: Inline[]): Node[] {
+    return nodes.map((node) => {
+      switch (node.kind) {
+        case 'text':
+          return document.createTextNode(node.value)
+        case 'code': {
+          const code = el('code', 'ty-markdown__code-span')
+          code.textContent = node.value
+          return code
+        }
+        case 'strong': {
+          const strong = document.createElement('strong')
+          strong.append(...this.#inline(node.children))
+          return strong
+        }
+        case 'em': {
+          const em = document.createElement('em')
+          em.append(...this.#inline(node.children))
+          return em
+        }
+        case 'link':
+          return this.#link(node)
+      }
+    })
+  }
+
+  /**
+   * A safe link: the parser only produces absolute http(s) hrefs, and every
+   * one opens in a new tab with no opener and no referrer, with the external
+   * icon and the hidden hint — the external `<ty-link>` anatomy.
+   */
+  #link(node: { href: string; children: Inline[] }): HTMLElement {
+    const link = el('a', 'ty-link', {
+      href: node.href,
+      target: '_blank',
+      rel: 'noopener noreferrer',
+      'data-emphasis': 'underlined',
+    })
+    link.append(...this.#inline(node.children))
+    link.append(externalIcon())
+    const hint = el('span', 'ty-visually-hidden ty-link__hint')
+    hint.textContent = ` ${String(this.props.newTabLabel)}`
+    link.append(hint)
+    return link
+  }
+
+  /** A fenced code block: sunken surface, mono text, the language tag as meta. */
+  #codeBlock(block: { language?: string; value: string }): HTMLElement {
+    const wrap = el('div', 'ty-markdown__code-block')
+    if (block.language) {
+      const tag = el('span', 'ty-markdown__language', { 'aria-hidden': 'true' })
+      tag.textContent = block.language
+      wrap.append(tag)
+    }
+    const pre = el('pre', 'ty-markdown__pre', { dir: 'ltr' })
+    if (block.language) pre.setAttribute('data-language', block.language)
+    const code = document.createElement('code')
+    code.textContent = block.value
+    pre.append(code)
+    wrap.append(pre)
+    return wrap
+  }
+
+  /** A code block that scrolls is a focusable region with an accessible name; one that fits stays passive. */
+  #labelOverflowingCodeBlocks(root: HTMLElement): void {
+    const props = this.props
+    for (const pre of root.querySelectorAll('pre.ty-markdown__pre')) {
+      if (pre.scrollWidth <= pre.clientWidth) continue
+      const language = pre.getAttribute('data-language')
+      const label = language
+        ? String(props.codeBlockLanguageLabel).replaceAll('{language}', language)
+        : String(props.codeBlockLabel)
+      pre.setAttribute('tabindex', '0')
+      pre.setAttribute('role', 'region')
+      pre.setAttribute('aria-label', label)
+    }
+  }
+}

package/src/elements/modal/definition.ts

@@ -0,0 +1,175 @@
+import type { ElementDefinition, ElementNode } from '../definition.ts'
+
+/** A lucide glyph (ISC, THIRD_PARTY_NOTICES): every child carries a class so the element's patch pass can match it. */
+const glyph = (tag: string, attrs: Record<string, string>): ElementNode => ({
+  tag,
+  class: 'ty-modal-dialog__glyph',
+  attrs: Object.fromEntries(Object.entries(attrs).map(([name, value]) => [name, { value }])),
+})
+
+/** A decorative 24px icon (lucide strokes). */
+const icon = (children: ElementNode[], className = 'ty-icon'): ElementNode => ({
+  tag: 'svg',
+  class: className,
+  attrs: {
+    viewBox: { value: '0 0 24 24' },
+    fill: { value: 'none' },
+    stroke: { value: 'currentColor' },
+    'stroke-width': { value: '2' },
+    'stroke-linecap': { value: 'round' },
+    'stroke-linejoin': { value: 'round' },
+    'aria-hidden': { value: 'true' },
+    focusable: { value: 'false' },
+  },
+  children,
+})
+
+/**
+ * The close control: a quiet, compact, icon-only button, exactly the
+ * Button chrome ModalDialog.tsx composes (`variant="quiet" size="compact"
+ * shape="circle" iconOnly`).
+ */
+const closeButton: ElementNode = {
+  tag: 'button',
+  class: 'ty-button ty-modal-dialog__close',
+  // Unset: shown on a dialog, hidden on an alertdialog. `show-close-button`
+  // overrides both ways.
+  when: ['!showCloseButton:false', 'showCloseButton:true|!role:alertdialog'],
+  attrs: {
+    type: { value: 'button' },
+    'aria-label': { prop: 'closeLabel' },
+    title: { prop: 'closeLabel' },
+    disabled: { prop: 'busy', kind: 'boolean-attr' },
+    'data-variant': { value: 'quiet' },
+    'data-size': { value: 'compact' },
+    'data-shape': { value: 'circle' },
+    'data-icon-only': { value: '' },
+  },
+  children: [
+    {
+      tag: 'span',
+      class: 'ty-button__icon',
+      attrs: { 'aria-hidden': { value: 'true' } },
+      children: [icon([glyph('path', { d: 'M18 6 6 18' }), glyph('path', { d: 'm6 6 12 12' })])],
+    },
+  ],
+}
+
+/** `<ty-modal>`: the ModalDialog's single source (spec: wave-1/modal-dialog.md). */
+export const modalDefinition = {
+  tag: 'ty-modal',
+  name: 'TyModal',
+  kind: 'enhancing',
+  doc: 'Focused modal window for a decision or a short form: a backdrop and a panel (title, optional description, scrolling body, actions row, optional close button). Controlled through `open`; the element asks to close with `ty-open-change` (Escape, the close button, an allowed backdrop press) and the host flips `open`. Focus moves into the panel on open, is trapped while open, and returns to the invoking element on close; the page behind is inert and does not scroll.',
+  props: {
+    isOpen: { type: 'boolean', attribute: 'open', doc: 'Shown (controlled). The anatomy stays mounted but `hidden` while closed, so nothing reaches the accessibility tree.' },
+    width: { type: 'enum', values: ['narrow', 'regular', 'wide', 'xwide'], default: 'regular', attribute: 'width', doc: 'Maximum panel width step.' },
+    role: { type: 'enum', values: ['dialog', 'alertdialog'], default: 'dialog', attribute: 'dialog-role', doc: '`alertdialog` for destructive or blocking confirmations: the backdrop never dismisses it and the close button is hidden, unless the props below say otherwise.' },
+    dismissOnBackdrop: { type: 'string', attribute: 'dismiss-on-backdrop', doc: '`true` or `false`; unset: the backdrop dismisses a `dialog`, never an `alertdialog`.' },
+    showCloseButton: { type: 'string', attribute: 'show-close-button', doc: '`true` or `false`; unset: shown on a `dialog`, hidden on an `alertdialog`.' },
+    initialFocus: { type: 'enum', values: ['first', 'title'], default: 'first', attribute: 'initial-focus', doc: 'Where focus lands on open; a `[data-autofocus]` control inside wins either way. Unset on an `alertdialog`: the first action (the least destructive, by convention).' },
+    busy: { type: 'boolean', attribute: 'busy', doc: 'An action is pending: closing (Escape, the backdrop, the close button) is disabled and the panel is `aria-busy`.' },
+    closeLabel: { type: 'string', default: 'Close', attribute: 'close-label', doc: 'Accessible name of the close button.' },
+    accessibleLabel: { type: 'string', attribute: 'accessible-label', doc: 'Accessible name of the panel when the title slot is empty and no `labelledBy` is given.' },
+    labelledBy: { type: 'string', attribute: 'labelled-by', doc: '`aria-labelledby` of the panel (a host that renders its own title element), joined before the title slot\'s heading.' },
+    describedBy: { type: 'string', attribute: 'described-by', doc: '`aria-describedby` of the panel, joined before the description slot\'s paragraph.' },
+    panelTestId: { type: 'string', attribute: 'panel-test-id', doc: 'Test hook on the panel (`data-testid`).' },
+    backdropTestId: { type: 'string', attribute: 'backdrop-test-id', doc: 'Test hook on the backdrop (`data-testid`).' },
+  },
+  events: [
+    { type: 'ty-open-change', kind: 'custom', detail: { open: 'boolean' }, reactProp: 'onOpenChange', doc: 'The element asks the host to change visibility — `open: false` on Escape, the close button or an allowed backdrop press. Controlled: the element does not close itself; the host flips `isOpen`.' },
+  ],
+  slots: {
+    title: { doc: 'The accessible name, rendered as the panel\'s heading (required by the spec; `accessibleLabel` or `labelledBy` names the panel when it is empty).' },
+    description: { doc: 'Accessible description under the header.' },
+    default: { doc: 'The body; scrolls when long while the header and the actions stay visible.' },
+    actions: { doc: 'The actions row (primary last on the end side). Pressing an action runs its own handler; the dialog stays open unless the host flips `isOpen`.' },
+  },
+  anatomy: {
+    tag: 'div',
+    class: 'ty-modal-dialog__backdrop',
+    // Always rendered (a framework's closed modal has an anatomy to find);
+    // `hidden` while closed, so nothing reaches the accessibility tree.
+    attrs: { hidden: { value: '', when: ['!isOpen'] }, 'data-testid': { prop: 'backdropTestId' } },
+    children: [
+      {
+        tag: 'div',
+        class: 'ty-modal-dialog',
+        attrs: { 'data-width': { prop: 'width' } },
+        children: [
+          {
+            tag: 'div',
+            class: 'ty-modal-dialog__panel',
+            attrs: {
+              role: { prop: 'role' },
+              'aria-modal': { value: 'true' },
+              tabindex: { value: '-1' },
+              'aria-labelledby': {
+                idrefs: [{ prop: 'labelledBy' }, { id: 'title', when: ['slot:title'] }],
+              },
+              'aria-describedby': {
+                idrefs: [{ prop: 'describedBy' }, { id: 'description', when: ['slot:description'] }],
+              },
+              'aria-label': { prop: 'accessibleLabel', when: ['!slot:title', '!labelledBy'] },
+              'data-busy': { prop: 'busy', kind: 'flag' },
+              'data-testid': { prop: 'panelTestId' },
+            },
+            children: [
+              {
+                tag: 'div',
+                class: 'ty-modal-dialog__inner',
+                attrs: { 'aria-busy': { prop: 'busy', kind: 'bool' } },
+                children: [
+                  {
+                    tag: 'header',
+                    class: 'ty-modal-dialog__header',
+                    // The header holds the title and the close button; with
+                    // neither there is no header.
+                    when: ['slot:title|showCloseButton:true|!role:alertdialog', 'slot:title|!showCloseButton:false'],
+                    children: [
+                      {
+                        tag: 'h2',
+                        class: 'ty-modal-dialog__title',
+                        when: ['slot:title'],
+                        attrs: { id: { idref: 'title' }, tabindex: { value: '-1' } },
+                        children: [{ slot: 'title' }],
+                      },
+                      closeButton,
+                    ],
+                  },
+                  {
+                    tag: 'p',
+                    class: 'ty-modal-dialog__description',
+                    when: ['slot:description'],
+                    attrs: { id: { idref: 'description' } },
+                    children: [{ slot: 'description' }],
+                  },
+                  {
+                    tag: 'div',
+                    class: 'ty-modal-dialog__body',
+                    when: ['slot:default'],
+                    children: [{ slot: 'default' }],
+                  },
+                  {
+                    tag: 'footer',
+                    class: 'ty-modal-dialog__actions',
+                    when: ['slot:actions'],
+                    children: [{ slot: 'actions' }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  examples: [
+    { name: 'closed', props: {}, slots: {} },
+    { name: 'open', props: { isOpen: true }, slots: { title: 'Delete file?', default: 'This cannot be undone.', actions: 'Delete' } },
+    { name: 'open-description', props: { isOpen: true }, slots: { title: 'Invite member', description: 'They get an email with a link.', default: 'Form fields', actions: 'Invite' } },
+    { name: 'alertdialog', props: { isOpen: true, role: 'alertdialog' }, slots: { title: 'Discard changes?', default: 'Your edits are not saved.', actions: 'Discard' } },
+    { name: 'wide-busy', props: { isOpen: true, width: 'wide', busy: true }, slots: { title: 'Publishing', default: 'Uploading the bundle.' } },
+    { name: 'no-close-button', props: { isOpen: true, showCloseButton: 'false' }, slots: { title: 'Terms of service', default: 'Scroll to the end.', actions: 'Accept' } },
+  ],
+} as const satisfies ElementDefinition

package/src/elements/modal/element.ts

@@ -0,0 +1,226 @@
+import { TyElement } from '../base.ts'
+import { modalDefinition } from './definition.ts'
+
+/** Elements that may take keyboard focus inside the panel. */
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+/** Marker of the elements this element made inert (a host's own inert is left alone). */
+const INERT_MARK = 'data-ty-modal-inert'
+
+/** Open modals share one page scroll lock; the last one to close releases it. */
+let scrollLocks = 0
+
+const lockScroll = () => {
+  if (++scrollLocks === 1) document.documentElement.setAttribute('data-ty-modal-open', '')
+}
+const unlockScroll = () => {
+  if (scrollLocks > 0 && --scrollLocks === 0) document.documentElement.removeAttribute('data-ty-modal-open')
+}
+
+/**
+ * `<ty-modal>`. The host framework renders the anatomy (backdrop, panel,
+ * header, body, actions) from the definition while `open`; the element adds
+ * the modal behaviour:
+ *
+ * - **Focus** — on open, focus moves to a `[data-autofocus]` control, else
+ *   the title (`initial-focus="title"`), else the first tabbable element
+ *   (an `alertdialog` without `initial-focus` starts on its first action,
+ *   the least destructive by convention), else the panel itself. Tab and
+ *   Shift+Tab wrap inside the panel. On close, focus returns to the element
+ *   that had it when the modal opened.
+ * - **Escape** asks to close (`ty-open-change`, `open: false`) unless
+ *   `busy`; the close button and an allowed backdrop press do the same. A
+ *   press that starts inside the panel and is released outside (selecting
+ *   text) does not count as a backdrop press. An `alertdialog` never closes
+ *   through the backdrop.
+ * - **Isolation** — the page behind is `inert` and does not scroll while
+ *   open (`data-ty-modal-open` on the root, a shared counter for stacked
+ *   modals).
+ *
+ * Visibility is controlled: the element never closes itself, the host flips
+ * `open` (the spec's `isOpen`/`onOpenChange`). The open animation is
+ * `data-entering`, applied after the first frame and removed when it ends.
+ */
+export class TyModalElement extends TyElement {
+  static override definition = modalDefinition
+
+  #wasOpen = false
+  #returnFocus: HTMLElement | null = null
+  #inerted: Element[] = []
+  #pressOnBackdrop = false
+
+  protected override connected(): void {
+    this.addEventListener('keydown', this.#onKeydown)
+    this.addEventListener('mousedown', this.#onMousedown)
+    this.addEventListener('click', this.#onClick)
+    if (this.props.isOpen) this.#activate()
+  }
+
+  protected override disconnected(): void {
+    this.removeEventListener('keydown', this.#onKeydown)
+    this.removeEventListener('mousedown', this.#onMousedown)
+    this.removeEventListener('click', this.#onClick)
+    this.#deactivate(true)
+  }
+
+  protected override changed(): void {
+    if (!this.isConnected) return
+    if (this.props.isOpen) this.#activate()
+    else this.#deactivate(true)
+  }
+
+  /** The backdrop press dismisses a dialog unless told otherwise; an alertdialog never. */
+  get #dismissOnBackdrop(): boolean {
+    const value = this.getAttribute('dismiss-on-backdrop')
+    if (value !== null) return value !== 'false'
+    return this.props.role !== 'alertdialog'
+  }
+
+  #activate(): void {
+    if (this.#wasOpen) return
+    this.#wasOpen = true
+    const active = document.activeElement
+    this.#returnFocus = active instanceof HTMLElement && !this.contains(active) ? active : null
+    lockScroll()
+    this.#applyInert()
+    // The anatomy may land a beat after the `open` attribute (a framework
+    // commits children and host attributes separately), so focus and the
+    // entering animation wait a frame.
+    requestAnimationFrame(() => {
+      if (!this.isConnected || !this.props.isOpen) return
+      this.#focusInitial()
+      for (const part of this.querySelectorAll('.ty-modal-dialog__backdrop, .ty-modal-dialog')) {
+        part.setAttribute('data-entering', '')
+        part.addEventListener('animationend', () => part.removeAttribute('data-entering'), { once: true })
+      }
+    })
+  }
+
+  #deactivate(restoreFocus: boolean): void {
+    if (!this.#wasOpen) return
+    this.#wasOpen = false
+    unlockScroll()
+    for (const element of this.#inerted) {
+      if (element.getAttribute(INERT_MARK) !== null) {
+        element.removeAttribute('inert')
+        element.removeAttribute(INERT_MARK)
+      }
+    }
+    this.#inerted = []
+    const target = this.#returnFocus
+    this.#returnFocus = null
+    // A framework keeps owning focus across the commit that closed the
+    // modal (React re-focuses what was active before its mutations), so the
+    // return waits a frame; a modal opened in between still wins, its own
+    // frame callback running later.
+    if (restoreFocus && target?.isConnected) {
+      requestAnimationFrame(() => {
+        if (target.isConnected) target.focus()
+      })
+    }
+  }
+
+  /** Everything between this element and `<body>` gets inert siblings. */
+  #applyInert(): void {
+    let node: Element | null = this
+    while (node && node !== document.body) {
+      const parent: Element | null = node.parentElement
+      if (!parent) break
+      for (const sibling of Array.from(parent.children)) {
+        if (sibling === node || sibling.hasAttribute('inert')) continue
+        sibling.setAttribute('inert', '')
+        sibling.setAttribute(INERT_MARK, '')
+        this.#inerted.push(sibling)
+      }
+      node = parent
+    }
+  }
+
+  #panel(): HTMLElement | null {
+    return this.querySelector('.ty-modal-dialog__panel')
+  }
+
+  #tabbables(): HTMLElement[] {
+    const panel = this.#panel()
+    if (!panel) return []
+    return Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE)).filter((el) => !el.closest('[hidden]'))
+  }
+
+  #focusInitial(): void {
+    const panel = this.#panel()
+    if (!panel) return
+    const active = document.activeElement
+    if (active instanceof HTMLElement && panel.contains(active)) return
+    const chosen = panel.querySelector<HTMLElement>('[data-autofocus]')
+    if (chosen) {
+      chosen.focus()
+      return
+    }
+    if (this.props.initialFocus === 'title') {
+      panel.querySelector<HTMLElement>('.ty-modal-dialog__title')?.focus()
+      return
+    }
+    const tabbables = this.#tabbables()
+    // An alertdialog without explicit initial focus starts on its first
+    // action (the least destructive, by convention).
+    if (this.props.role === 'alertdialog' && !this.hasAttribute('initial-focus')) {
+      const action = panel.querySelector<HTMLElement>('.ty-modal-dialog__actions button:not([disabled])')
+      if (action) {
+        action.focus()
+        return
+      }
+    }
+    ;(tabbables[0] ?? panel).focus()
+  }
+
+  /** Ask the host to close; the host flips `open` (controlled visibility). */
+  #requestClose(): void {
+    if (this.props.busy) return
+    this.emit('ty-open-change', { open: false })
+  }
+
+  #onKeydown = (event: Event): void => {
+    const key = (event as KeyboardEvent).key
+    if (key === 'Escape') {
+      if ((event as KeyboardEvent).isComposing || this.props.busy) return
+      event.preventDefault()
+      event.stopPropagation()
+      this.#requestClose()
+      return
+    }
+    if (key !== 'Tab') return
+    const tabbables = this.#tabbables()
+    const panel = this.#panel()
+    if (!panel) return
+    event.preventDefault()
+    event.stopPropagation()
+    const backwards = (event as KeyboardEvent).shiftKey
+    if (!tabbables.length) {
+      panel.focus()
+      return
+    }
+    const current = tabbables.indexOf(document.activeElement as HTMLElement)
+    const next = current === -1 ? (backwards ? tabbables.length - 1 : 0) : (current + (backwards ? -1 : 1) + tabbables.length) % tabbables.length
+    tabbables[next]!.focus()
+  }
+
+  #onMousedown = (event: Event): void => {
+    this.#pressOnBackdrop = event.target === this.querySelector('.ty-modal-dialog__backdrop')
+    // Keep focus inside the dialog: a press on the backdrop must not move
+    // focus to the body (Escape is listened for on the panel's subtree).
+    if (this.#pressOnBackdrop) event.preventDefault()
+  }
+
+  #onClick = (event: Event): void => {
+    const target = event.target as Element | null
+    if (!target || typeof target.closest !== 'function') return
+    const close = target.closest('.ty-modal-dialog__close')
+    if (close && this.contains(close)) {
+      this.#requestClose()
+      return
+    }
+    const backdrop = this.querySelector('.ty-modal-dialog__backdrop')
+    if (target === backdrop && this.#pressOnBackdrop && this.#dismissOnBackdrop) this.#requestClose()
+    this.#pressOnBackdrop = false
+  }
+}