Add support for modal window

markup for bs 5.3 modal window is as follows:

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

see https://getbootstrap.com/docs/5.3/components/modal/

Added patch that adds a modal window. This requires the following:

1. new modal block type to be created
2. The following template or similar to be added for this new block type
3. Bootstrap based theme

{#
/**
 * @file
 * Default theme implementation to display a block.
 *
 * Available variables:
 * - plugin_id: The ID of the block implementation.
 * - label: The configured label of the block if visible.
 * - configuration: A list of the block's configuration values.
 *   - label: The configured label for the block.
 *   - label_display: The display settings for the label.
 *   - provider: The module or other provider that provided this block plugin.
 *   - Block plugin specific settings will also be stored here.
 * - content: The content of this block.
 * - attributes: array of HTML attributes populated by modules, intended to
 *   be added to the main container tag of this template.
 *   - id: A valid HTML ID and guaranteed unique.
 * - title_attributes: Same as attributes, except applied to the main title
 *   tag that appears in the template.
 * - content_attributes: Same as attributes, except applied to the main content
 *   tag that appears in the template.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 *
 * @see template_preprocess_block()
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
    'block',
    'block-' ~ configuration.provider|clean_class,
    'block-' ~ plugin_id|clean_class,
    'mb-3',
    'modal',
    'fade',
  ]
%}
{% set content_exists = content|render|striptags('<img><video><audio><drupal-render-placeholder>')|trim is not empty %}
{% set label_exists = label|render|striptags('<img><video><audio><drupal-render-placeholder>')|trim is not empty %}
{% set title_prefix_exists = title_prefix|render|striptags('<img><video><audio><drupal-render-placeholder>')|trim is not empty %}

{% if content_exists or label_exists or title_prefix_exists %}
<div{{ attributes.addClass(classes) }} tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
  {{ title_prefix }}
  {% if label %}
  <div class="modal-header">
    <h2{{ title_attributes.addclass('modal-title', 'fs-5') }}>{{ label }}</h2>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  {% endif %}
  {{ title_suffix }}
  {% block content %}
  <div{{ content_attributes.addClass('content', 'modal-body') }}>
    {{ content }}
  </div>
  {% endblock %}
  <div class="modal-footer">
    <button type="button" class="btn btn-primary">Configure</button>
  </div>
</div>
{% endif %}

Attached screenshots show the user journey. When Web Push Notifications are enabled from Drupal end, users is prompted to set their browser preference (accept or reject) for notifications on first visit, only if web push notification response is rejected due to requirement for a user gesture.

Once accepted or rejected the notification preference is stored in the browser (until cleared) and the user should not be prompted again (unless they delete their notification setting for this site).

What is somewhat peculiar for Mac users is that there are also site settings that can be also be viewed globally. Howver for Firefox and Chrome users, there is a single setting. This is peculiar as the sites are still managed from the web browser. This is how Safari manages notifications as well.

Also I really do not know what the benefit of ensuring that notifications are set per user gesture. This just means that an additional step is required afaict. Not great.