#let meta-og(property: "", content: "") = {
  // "property" attr is not supported by html.meta ?
  html.elem("meta", attrs: (property: property, content: content))
}

#let site-wrapper = html.elem.with("site-wrapper")
#let site-container = html.elem.with("site-container")
/// Element used to group radio buttons for theme selection.
/// label is the aria-label, for accessibility (ie screen reader)
#let theme-picker(label: "Theme Picker", body) = {
  // Role 'radiogroup' is needed because of bug in chromium with screenreaders (https://lyra.horse/blog/2025/08/you-dont-need-js/#fn:10)
  html.elem("theme-picker", attrs: (aria-label: label, role: "radiogroup"), body)
}
#let code-block = html.elem.with("code-block")
#let code-block-button-container = html.elem.with("code-block-button-container")

#let icon-container(..args, body) = {
  html.elem("icon-container", attrs: args.named(), body)
}
#let nav-menu = html.elem.with("nav-menu")
#let home-symbol = html.elem.with("home-symbol")

#let fullscreen-overlay = html.elem.with("fullscreen-overlay")
#let image-magnifier-group(body) = {
  // Role 'radiogroup' is needed because of bug in chromium with screenreaders (https://lyra.horse/blog/2025/08/you-dont-need-js/#fn:10)
  html.elem("image-magnifier-group", attrs: (role: "radiogroup"), body)
}
#let image-alt-group = html.elem.with("image-alt-group")

#let summary-card = html.elem.with("summary-card")
#let summary-card-preview = html.elem.with("summary-card-preview")
#let summary-card-description = html.elem.with("summary-card-description")
#let summary-card-details = html.elem.with("summary-card-details")

#let summary-card-list = html.elem.with("summary-card-list")