{%- include 'libdoc_before_html' -%}<!DOCTYPE html>
<html lang="{{ pageLang }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ pageTitle }}</title>
{% comment %} <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> {% endcomment %}
<meta itemprop="name" content="{{ pageTitle }}">
<meta name="description" itemprop="description" content="{{ pageDescription }}">
<meta name="application-name" content="{{ pageTitle }}">
<meta name="author" content="{{ pageAuthor }}">
<link rel="icon" type="image/png" href="{{ libdocConfig.faviconUrl }}">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="msapplication-starturl" content="{{ page.url }}">
<meta name="msapplication-tooltip" content="{{ pageTitle }}">
<meta property="og:type" content="website">
<meta property="og:url" content="{{ page.url }}">
<meta property="og:title" content="{{ pageTitle }}">
<meta property="og:description" content="{{ pageDescription }}">
<meta property="og:image" content="{{ pageOgImageUrl }}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ pageTitle }}">
<meta name="twitter:description" content="{{ pageDescription }}">
<meta name="twitter:url" content="{{ page.url }}">
<meta name="twitter:image" content="{{ pageOgImageUrl }}">
<meta name="apple-mobile-web-app-title" content="{{ pageTitle }}">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="color-scheme" content="light dark">
<meta name="generator" content="{{ eleventy.generator }}">
<style>
@font-face {
font-family: "fallbackFont";
src: local("Arial");
size-adjust: 103%;
}
html, body {
font-family: fallbackFont, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
font-display: swap;
}
pre, code {
font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
}
</style>
<link rel="stylesheet" href="/core/assets/css/fonts.css">
<link rel="stylesheet" href="/core/assets/css/ds.css">
<link rel="stylesheet" href="/core/assets/css/ds__defaults.css">
<link rel="stylesheet" href="/core/assets/css/ds__colors.css">
<link rel="stylesheet" href="/core/assets/css/ds__dark_mode.css" id="libdoc_dark_mode_css">
<link rel="stylesheet" href="/assets/prism-night-owl.css">
<link rel="stylesheet" href="/core/assets/css/icons.css">
<link rel="stylesheet" href="/assets/theme.css">
<style>
:root {
--libdoc-image-background-color-light-mode: {{ libdocConfig.imgBgColorLightMode }};
--libdoc-image-background-color-dark-mode: {{ libdocConfig.imgBgColorDarkMode }};
--libdoc-image-background-color: var(--libdoc-image-background-color-light-mode);
--ita-widths-sidebar: {{ libdocSystem.widthSidebar }}px;
--ita-widths-content: {{ libdocSystem.widthContent }}px;
--ita-widths-main-container-max: calc(2 * var(--ita-widths-content) + var(--ita-widths-sidebar));
}
{% if libdocConfig.roundedImagesCorners %}
main img {
border-radius: 9px;
}
{% endif %}
</style>
<noscript>
<link rel="stylesheet" href="/core/assets/css/noscript.css">
</noscript>
<script>
const libdocMessages = {
{% for key in libdocMessages %}
{{ key[0] }}: `{{ libdocMessages[key[0]][pageLang] }}`,
{%- endfor %}
}
const libdocConfig = {
htmlBasePathPrefix: `{{ libdocConfig.htmlBasePathPrefix }}`,
blogTitle: `{{ libdocConfig.blogTitle }}`,
blogDescription: `{{ libdocConfig.blogDescription }}`,
displayTagsListLink: {{ libdocConfig.displayTagsListLink }}
}
const libdocSystem = {
searchIndexUrl: `{{ '/core/assets/js/search_index.json' | url }}`,
fuzzyIndexUrl: `{{ '/core/assets/js/fuzzy_index.json' | url }}`,
productionUrl: `{{ libdocSystem.productionUrl }}`,
blogPostsCount: `{{ collections.post.size }}`
}
</script>
</head>
<body class="d-flex fd-column ai-center | m-0">
<div class="d-flex | w-100"
fd-column="xs,sm"
ai-start="md"
ai-center="xs,sm"
pl-5="md"
style="max-width: var(--ita-widths-main-container-max)">
<div id="sidebar"
class="d-flex fd-column | pos-sticky top-0 z-3"
ai-center="xs,sm"
w-100="xs,sm"
w-sidebar="md">
<nav id="nav_small_devices"
class="d-flex | pos-fixed bottom-0 left-0 z-1 | w-100 h-60px"
d-none="md">
<div class="d-flex jc-space-between | w-100 | bc-neutral-100 btwidth-1 btstyle-dashed bcolor-neutral-500">
<a href="/"
class="d-flex fd-column jc-center ai-center gap-1 | pl-5 pr-2 | td-none ta-center | c-primary-900 b-0 brad-3">
<span class="icon-house fs-6"></span>
<span class="fvs-wght-400 fs-1 tt-uppercase">{{ libdocMessages.homepageShort[pageLang] }}</span>
</a>
{% if libdocConfig.searchEnabled %}
<a href="/search/"
class="d-flex fd-column jc-center ai-center gap-1 | pl-2 pr-2 | td-none ta-center | c-primary-900 b-0 brad-3">
<span class="icon-magnifying-glass fs-6"></span>
<span class="fvs-wght-400 fs-1 tt-uppercase">{{ libdocMessages.search[pageLang] }}</span>
</a>
{% endif %}
<button type="button"
id="sd_floating_toc_toggle_btn"
class="d-flex fd-column jc-center ai-center gap-1 | pl-2 pr-2 | ta-center | cur-pointer c-primary-900 bc-neutral-100 b-0 brad-3"
disabled>
<span class="icon-list-dashes fs-6"></span>
<span class="fvs-wght-400 fs-1 tt-uppercase">{{ libdocMessages.tableOfContentAbbr[pageLang] }}</span>
</button>
<button type="button"
id="sd_gtt_btn"
class="d-flex fd-column jc-center ai-center gap-1 | pl-2 pr-2 | ta-center | cur-pointer c-primary-900 bc-neutral-100 b-0 brad-3"
onclick="libdocUi.handlers._clickGTT()">
<span class="icon-arrow-line-up fs-6"></span>
<span class="fvs-wght-400 fs-1 tt-uppercase">{{ libdocMessages.top[pageLang] }}</span>
</button>
<div class="d-flex ai-center">
<input type="checkbox"
name="nav_primary"
id="nav_primary_checkbox"
value=""
class="pos-absolute opa-0 pe-none">
<label for="nav_primary_checkbox"
class="d-flex fd-column jc-center ai-center gap-1 | h-100 pl-2 pr-5 | ta-center | cur-pointer c-primary-900 bc-neutral-100">
<span class="icon-list fs-6"></span>
<span class="fvs-wght-400 fs-1 tt-uppercase">{{ libdocMessages.menu[pageLang] }}</span>
</label>
</div>
</div>
</nav>
<nav id="nav_primary_container"
class="d-flex d-none--xs d-none--sm fd-column | w-100 | bwidth-1 bstyle-dashed bcolor-neutral-500 | __soft-shadow"
mt-5="md"
maxw-sidebar="md"
maxh-sidebar="md"
h-sidebar="xs,sm"
brad-3="md"
brad-3="md">
<menu id="nav_primary_header"
class="
d-flex fd-column
pos-sticky top-0 z-1
m-0 p-0 {% if libdocConfig.customLinks.size == 0 %}pb-7{% endif %}
ls-none
{% if eleventyNavigationMenu.size > 0 %}bbwidth-1 bbstyle-dashed bcolor-neutral-500{% endif %}"
gap-5="md"
bradtl-3="md"
bradtr-3="md">
<li class="d-flex ai-center">
{% if libdocConfig.siteLogoUrl != '' %}
<a href="/"
class="pl-5 pt-5 pr-5 | td-none fvs-wght-700 lsp-5 fs-8 tws-balance | c-neutral-900"
title="{{ libdocConfig.siteDescription }}">
<img src="{{ libdocConfig.siteLogoUrl }}"
alt="{{ libdocConfig.siteTitle }}"
eleventy:widths="{{ libdocSystem.widthSidebar | minus: 40 | times: 2 }}"
class="maxw-100 w-auto"
style="max-height: {{ libdocConfig.siteLogoMaxHeight }}px">
</a>
{% else %}
<a href="/"
class="p-5 | td-none tws-balance"
title="{{ libdocConfig.siteDescription }}">
<span class="wh-wordmark">{{ libdocConfig.siteTitle }}</span>
</a>
{% endif %}
</li>
{% if libdocConfig.searchEnabled %}
<li class="pos-relative z-1" d-none="xs,sm">
<form action="/search/"
class="d-flex fd-column | pos-relative | pl-5 pr-5 | search_form | auto-search-wrapper">
<label for="searchInput"
class="pos-absolute z-2 | ml-5 t-tY-50 | fvs-wght-400 fs-1 tt-uppercase | c-neutral-900 bc-neutral-100">
{{ libdocMessages.search[pageLang] }}
</label>
<input id="searchInput"
type="search"
name="search"
autocomplete="off"
class="pos-relative z-1 | pl-5 pr-5 pt-4 pb-4 | fs-3 | c-neutral-900 bc-neutral-100 brad-4 bwidth-1 bstyle-dashed bcolor-neutral-500"
placeholder="{{ libdocMessages.searchPlaceholder[pageLang] }}"
value="">
<div class="pos-relative z-1 | d-flex ai-center | pos-absolute top-0 right-0 | h-100 mr-5">
<button type="button"
class="pos-relative | p-4 pr-7 | fs-3 | c-neutral-900 bc-neutral-100 c-neutral-900 b-0 cur-pointer | search_form__clear_btn"
title="{{ libdocMessages.searchClear[pageLang] }}"
hidden>
<span class="icon-x | pos-absolute top-50 left-50 t-tY-50 t-tX-50"></span>
</button>
<button type="submit"
class="pos-relative | h-100 p-0 ar-square | fs-5 | brad-4 bc-primary-500 c-neutral-100 bwidth-1 bstyle-dashed bcolor-neutral-100 cur-pointer"
title="{{ libdocMessages.searchSubmit[pageLang] }}">
<span class="icon-magnifying-glass | pos-absolute top-50 left-50 t-tY-50 t-tX-50"></span>
</button>
</div>
</form>
</li>
{% endif %}
{% if libdocConfig.customLinks.size > 0 %}
<li id="custom_links"
class="d-flex ai-center rgap-1 | pos-relative | pb-3 pl-5 o-auto">
{% for item in libdocConfig.customLinks %}
<a href="{{ item.url }}"
class="
d-flex ai-center gap-1
pt-2 pb-2 pr-5
fvs-wght-700 fs-2 lsp-3 lh-1 tt-uppercase td-none ws-nowrap
c-primary-600"
target="_blank">
{{ item.text }}
</a>
{% endfor %}
</li>
{% endif %}
</menu>
{% if collections.post.size > 0 %}
<a href="/{{ libdocConfig.blogSlug }}/"
id="nav_primary_blog_link"
{% if pageUrlSplit[1] == libdocConfig.blogSlug %}
aria-current="page"
{% endif %}
class="d-flex ai-center | pt-5 pb-5 | fvs-wght-500 fs-4 td-none lsp-2 | c-neutral-900 bbwidth-1 bbstyle-dashed bcolor-neutral-500 cur-pointer">
{% comment %} <span class="icon-tag-simple | c-primary-500"></span> {% endcomment %}
{{ libdocConfig.blogTitle }}
</a>
{% endif %}
{% if collections.myTags.size > 0 and libdocConfig.displayTagsListLink %}
<a href="/tags/"
id="nav_primary_blog_link"
{% if pageUrlSplit[1] == 'tags'%}
aria-current="page"
{% endif %}
class="d-flex ai-center | pt-5 pb-5 | fvs-wght-500 fs-4 td-none lsp-2 | c-neutral-900 bbwidth-1 bbstyle-dashed bcolor-neutral-500 cur-pointer">
{% comment %} <span class="icon-tag-simple | c-primary-500"></span> {% endcomment %}
{{ libdocMessages.tagsList[pageLang] }}
</a>
{% endif %}
<div id="nav_primary"
class="pos-relative | fg-1 o-auto">
{{ eleventyNavigationMenu }}
</div>
</nav>
</div>
<main class="pos-relative"
w-100-minus-sidebar="md"
w-100="xs,sm">
<header class="d-flex fd-column | pt-5 {{ headerPadding }} {{ headerMargin }}">
<nav class="d-flex jc-space-between | pos-relative">
{% include 'libdoc_breadcrumb' %}
<details id="user_preferences">
<summary class="d-flex | pos-relative z-2 | p-5 | fs-4 td-none | brad-4 bc-neutral-100 bwidth-1 bstyle-dashed bcolor-neutral-500 cur-pointer __hover-1 __soft-shadow"
title="{{ libdocMessages.userPreferences[pageLang] }}">
<span class="icons">
<span class="icon-faders | pos-absolute top-50 left-50 t-tY-50 t-tX-50"></span>
<span class="icon-x | pos-absolute top-50 left-50 t-tY-50 t-tX-50"></span>
</span>
</summary>
<menu class="d-flex fd-column | pos-absolute right-0 z-1 | w-100 mt-3 mb-0 p-4 | ls-none bc-neutral-100 brad-2 bwidth-1 bstyle-dashed bcolor-neutral-500 | __soft-shadow"
style="max-width: 400px">
<li class="d-flex fd-column gap-3 | c-neutral-900">
<p class="m-0 | fs-3 fvs-wght-500">{{ libdocMessages.colorSchemes[pageLang] }}</p>
<div class="d-flex fd-column gap-3">
{% for item in libdocSystem.preferences.colorSchemes.choices %}
<div>
<input type="radio"
name="libdoc_color_scheme"
id="libdoc_color_scheme__{{ item.value }}"
class="pos-absolute opa-0"
value="{{ item.value }}"
{%- if forloop.first %}
checked
{%- endif %}>
<label for="libdoc_color_scheme__{{ item.value }}"
class="d-flex ai-start gap-2">
<span class="d-flex fd-column gap-1">
<strong class="fs-2 tt-uppercase">{{ libdocMessages[item.labelMainKey][pageLang] }}</strong>
<span class="fs-2 | c-neutral-700">{{ libdocMessages[item.labelHelpKey][pageLang] }}</span>
</span>
</label>
</div>
{% endfor %}
</div>
</li>
</menu>
</details>
</nav>
<h1 class="mt-3 mb-0 | lsp-5 fvs-wght-700 tws-balance {% if pageTitle == page.inputPath %}wb-break-work{% endif %}"
fs-10="md"
fs-9="xs,sm">
{{ pageTitle }}
</h1>
{% if pageDescription != '' %}
<p class="d-flex ai-center fw-wrap gap-2 | pt-5 pl-5 pb-5 m-0 | fvs-wght-400 tws-balance fs-7 lsp-3 lh-5 | blwidth-1 blstyle-dashed bcolor-neutral-500"
pt-3="xs"
pb-3="xs"
fs-6="sm"
fs-5="xs">
{{ pageDescription }}
</p>
{% else %}
<div class="pt-5 | blwidth-1 blstyle-dashed bcolor-neutral-500"></div>
{% endif %}
{% if page.url != '/search/' %}
{% if tags.size > 0 %}
<nav class="d-flex gap-2 fw-wrap | pl-5 pt-3 pb-5 | blwidth-1 blstyle-dashed bcolor-neutral-500">
{% for tagName in tags %}
{% if tagName != 'post' %}
<a href="/tags/{{ tagName }}/"
class="
d-flex ai-center gap-1
pl-2 pr-3 pt-1 pb-1
fs-2 lsp-2 td-none
bc-primary-200 bwidth-1 bstyle-solid bcolor-primary-400 brad-1 bradtl-3 bradbl-3">
<span class="icon-tag-simple"></span>
<span class="page_tag">{{ tagName }}</span>
</a>
{% endif %}
{% endfor %}
</nav>
{% endif %}
<div class="d-flex ai-center | m-0 | blwidth-1 blstyle-dashed bcolor-neutral-500">
<div class="pl-5 | bbwidth-1 bbstyle-dashed bcolor-neutral-500"></div>
{% if date != false %}
<p class="d-flex ai-center gap-2 | m-0 pr-2 | fvs-wght-400 fs-3 lsp-3 lh-3 | c-neutral-700 bc-primary-100"
fs-2="xs">
<span class="icon-calendar-dots fs-6"></span>
<time ws-nowrap="sm,md">
{% assign dateString = page.date | dateString %}
{% if dateString == "1111-11-11" %}
{{ libdocMessages.lastModified[pageLang] }}
{{ page.inputPath | gitLastModifiedDate }}
{% else %}
{{ date | datePrefixText }}
{{ dateString }}
{% endif %}
</time>
</p>
{% endif %}
<div class="pl-5 w-100 | bbwidth-1 bbstyle-dashed bcolor-neutral-500"></div>
{% if author != false and pageAuthor != false %}
<div class="d-flex ai-center gap-3">
<div class="pos-relative | p-5 | brad-4 bc-neutral-100 bwidth-1 bstyle-dashed bcolor-neutral-500">
<div class="icon-user | pos-absolute top-50 left-50 t-tY-50 t-tX-50 | fs-6"></div>
</div>
<p class="d-flex fd-column | m-0 | fvs-wght-400 fs-3 lsp-3 lh-3 | c-neutral-700 bc-primary-100"
fs-2="xs"
ws-nowrap="sm,md">
{{ pageAuthor }}
</p>
</div>
{% else %}
<div class="pt-5 pb-5"></div>
{% endif %}
</div>
{% endif %}
{% if tocMarkup != '' %}
<details id="toc_main" open>
<summary class="d-flex ai-center | pt-5 pb-5 | fvs-wght-500 fs-3 | bwidth-1 bstyle-dashed bcolor-neutral-500 btwidth-0 brwidth-0 cur-pointer">
<span class="pl-5 | bbwidth-1 bbstyle-dashed bcolor-neutral-500"></span>
<span class="d-flex ai-center gap-1 | lsp-2">
<span class="icon-minus-circle | fs-6 | c-primary-500"></span>
<span class="icon-plus-circle | fs-6 | c-primary-500"></span>
{{ libdocMessages.tableOfContent[pageLang] }}
</span>
</summary>
{{ tocMarkup }}
</details>
{% endif %}
</header>
<noscript>
{% assign noscriptAlert = libdocMessages.noscriptAlert[pageLang] %}
{% alert noscriptAlert %}
</noscript>
{{ content | cleanup | autoids }}
<footer class="minh-100vh">
<div class="pt-11 | blwidth-1 blstyle-dashed bcolor-neutral-500"></div>
<nav class="d-flex ai-center rgap-7 | blwidth-1 blstyle-dashed bcolor-neutral-500"
fw-wrap="xs">
<div class="pl-5 | bbwidth-1 bbstyle-dashed bcolor-neutral-500"></div>
{% if editThisPageRootUrl.size > 0 %}
<a href="{{ editThisPageUrl }}"
target="_blank"
class="btn btn-primary-light">
<span class="icon-pencil-simple"></span>
{{ libdocMessages.editThisPage[libdocConfig.lang] }}
</a>
{% endif %}
<div class="w-100" d-none="sm,md"></div>
<div class="pl-5 | bbwidth-1 bbstyle-dashed bcolor-neutral-500" w-100="sm,md"></div>
<a href="https://github.com/ita-design-system/eleventy-libdoc"
target="_blank"
class="d-flex ai-center gap-2 | pl-2 pr-2 | fvs-wght-400 fs-2 lsp-3 lh-3 td-none ws-nowrap">
11ty LibDoc {{ libdocUtils.version }}
</a>
</nav>
</footer>
</main>
</div>
<script src="/core/assets/js/sandbox.js"></script>
<script src="/core/assets/js/ui.js"></script>
{% if libdocConfig.searchEnabled %}
<link rel="stylesheet" href="/core/assets/css/autocomplete.css">
<script src="/core/assets/js/autocomplete.min.js"></script>
<script src="/core/assets/js/fuse.js"></script>
<script src="/core/assets/js/fuzzy.js"></script>
<script src="/core/assets/js/hotkeys.min.js"></script>
{% endif %}
</body>
</html>