<% add_gem_component_stylesheet("modal-dialogue") id ||= "modal-dialogue-#{SecureRandom.hex(4)}" wide ||= false data_attributes = {} aria_label ||= nil dialog_classes = ["gem-c-modal-dialogue__box"] dialog_classes << "gem-c-modal-dialogue__box--wide" if wide %> <%= tag.div class: "gem-c-modal-dialogue", data: { module: "modal-dialogue" }, id: id do %> <%= tag.div class: "gem-c-modal-dialogue__overlay" %> <%= tag.dialog class: dialog_classes, data: data_attributes, aria: { modal: true, label: aria_label }, role: "dialog", tabindex: 0 do %> <%= tag.div class: "gem-c-modal-dialogue__header" do %> <% end %> <%= tag.div yield, class: "gem-c-modal-dialogue__content" %> <%= tag.button "×", class: "gem-c-modal-dialogue__close-button", aria: { label: t("components.modal_dialogue.close_modal") } %> <% end %> <% end %>