diff --git a/snapshots/tng/404.html b/snapshots/tng/404.html
index ffea005f3..a39d81846 100644
--- a/snapshots/tng/404.html
+++ b/snapshots/tng/404.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
diff --git a/snapshots/tng/elements/dialog/index.html b/snapshots/tng/elements/dialog/index.html
index cf3cbd650..219990702 100644
--- a/snapshots/tng/elements/dialog/index.html
+++ b/snapshots/tng/elements/dialog/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/flickable/index.html b/snapshots/tng/elements/flickable/index.html
index f76211030..f49bf2b4d 100644
--- a/snapshots/tng/elements/flickable/index.html
+++ b/snapshots/tng/elements/flickable/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/focusscope/index.html b/snapshots/tng/elements/focusscope/index.html
index 461c99116..10dbaa9cd 100644
--- a/snapshots/tng/elements/focusscope/index.html
+++ b/snapshots/tng/elements/focusscope/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/gridlayout/index.html b/snapshots/tng/elements/gridlayout/index.html
index eb369d5c3..ed5116318 100644
--- a/snapshots/tng/elements/gridlayout/index.html
+++ b/snapshots/tng/elements/gridlayout/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/horizontallayout/index.html b/snapshots/tng/elements/horizontallayout/index.html
index c3f2c2e5b..dca1b1178 100644
--- a/snapshots/tng/elements/horizontallayout/index.html
+++ b/snapshots/tng/elements/horizontallayout/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/image/index.html b/snapshots/tng/elements/image/index.html
index 0ea04b69e..26e73a480 100644
--- a/snapshots/tng/elements/image/index.html
+++ b/snapshots/tng/elements/image/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/path/index.html b/snapshots/tng/elements/path/index.html
index 00f3d882a..cc630ea47 100644
--- a/snapshots/tng/elements/path/index.html
+++ b/snapshots/tng/elements/path/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/popupwindow/index.html b/snapshots/tng/elements/popupwindow/index.html
index 5764740f1..1124c5c98 100644
--- a/snapshots/tng/elements/popupwindow/index.html
+++ b/snapshots/tng/elements/popupwindow/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/rectangle/index.html b/snapshots/tng/elements/rectangle/index.html
index 082402e56..0c38181dd 100644
--- a/snapshots/tng/elements/rectangle/index.html
+++ b/snapshots/tng/elements/rectangle/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/swipegestrurehandler/index.html b/snapshots/tng/elements/swipegestrurehandler/index.html
index 1830dc4f7..9281b9255 100644
--- a/snapshots/tng/elements/swipegestrurehandler/index.html
+++ b/snapshots/tng/elements/swipegestrurehandler/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/text/index.html b/snapshots/tng/elements/text/index.html
index bf85d027a..33ed43e61 100644
--- a/snapshots/tng/elements/text/index.html
+++ b/snapshots/tng/elements/text/index.html
@@ -32,9 +32,10 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
-<script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><style>.code-image-container:where(.astro-xvlhowr4){display:flex;flex-direction:row;width:100%}.code-block:where(.astro-xvlhowr4){width:80%;overflow-x:auto}.image-block:where(.astro-xvlhowr4){width:100px;display:flex;align-items:center;margin-left:20px}.image-block:where(.astro-xvlhowr4) img:where(.astro-xvlhowr4){width:100%;height:auto}
+<script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><style>.code-image-container:where(.astro-2fp7lvqc){display:flex;flex-direction:row;width:100%}.code-block:where(.astro-2fp7lvqc){width:80%;overflow-x:auto}.image-block:where(.astro-2fp7lvqc){width:100px;display:flex;align-items:center;margin-left:20px}.image-block:where(.astro-2fp7lvqc) img:where(.astro-2fp7lvqc){width:100%;height:auto}
 </style><script src="/tng/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
 	(() => {
 		const openBtn = document.querySelector('button[data-open-modal]');
@@ -49,7 +50,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -72,7 +73,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
@@ -89,9 +90,11 @@
 a <code dir="auto">width</code> and <code dir="auto">height</code>, the text will be wrapped into multiple lines
 of text.</p>
 <h3 id="color"><code dir="auto">color</code></h3>
-<div class="sl-markdown-content"> <p> <strong>type:</strong> <a href="/tng/guide/types/#colors-and-brushes" dir="auto"> <code>brush</code> </a>  <br> <strong>default:</strong> <code dir="auto">&lt;depends on theme&gt;</code><br>   </p> <p>The color of the text.</p><div class="code-image-container astro-xvlhowr4"> <div class="code-block astro-xvlhowr4"> <div class="expressive-code astro-xvlhowr4"><link rel="stylesheet" href="/tng/_astro/ec.fq3m0.css"><script type="module" src="/tng/_astro/ec.8zarh.js"></script><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span style="--0:#4EC9B0;--1:#227188">Text</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">text</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#CE9178;--1:#A31515">"Hello"</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line highlight mark"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">color</span><span style="--0:#CCCCCC;--1:#3B3B3B">: red;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="Text {    text: &#x22;Hello&#x22;;    color: red;}"><div></div></button></div></figure></div> </div> <div class="image-block astro-xvlhowr4"> <img src="/tng/_astro/slint-logo-square-dark.DwYyWyio_Z20R5kO.webp" alt="Colored text" class="astro-xvlhowr4" width="100" height="100" loading="lazy" decoding="async"> </div> </div>  </div>
+<div class="sl-markdown-content"> <p> <strong>type:</strong> <a href="/tng/guide/types/#colors-and-brushes" dir="auto"> <code>brush</code> </a>  <br> <strong>default:</strong> <code dir="auto">&lt;depends on theme&gt;</code><br>   </p> <p>The color of the text.</p> </div>
+
+<div class="code-image-container astro-2fp7lvqc"> <div class="code-block astro-2fp7lvqc"> <div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span style="--0:#4EC9B0;--1:#227188">Text</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">text</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#CE9178;--1:#A31515">"Hello"</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line highlight mark"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">color</span><span style="--0:#CCCCCC;--1:#3B3B3B">: red;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="Text {    text: &#x22;Hello&#x22;;    color: red;}"><div></div></button></div></figure></div> </div> <div class="image-block astro-2fp7lvqc"> <img src="/tng/_astro/slint-logo-square-dark.DwYyWyio_Z20R5kO.webp" alt="Colored text" class="astro-2fp7lvqc" width="100" height="100" loading="lazy" decoding="async"> </div> </div> 
 <h3 id="font-family"><code dir="auto">font-family</code></h3>
-<div class="sl-markdown-content"> <p> <strong>type:</strong> <a href="/tng/guide/types/#string" dir="auto"> <code>string</code> </a>  <br> <strong>default:</strong> <code dir="auto">&quot;&quot;</code><br>   </p> <p>The name of the font family selected for rendering the text.</p><div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span style="--0:#4EC9B0;--1:#227188">Text</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">text</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#CE9178;--1:#A31515">&quot;Hello&quot;</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">color</span><span style="--0:#CCCCCC;--1:#3B3B3B">: black;</span></div></div><div class="ec-line highlight mark"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">font-family</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#d8a995;--1:#9b1414">&quot;Arial&quot;</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="Text {    text: &#34;Hello&#34;;    color: black;    font-family: &#34;Arial&#34;;}"><div></div></button></div></figure></div><aside aria-label="Note" class="starlight-aside starlight-aside--note"> <p class="starlight-aside__title" aria-hidden="true"> <svg aria-hidden="true" class="starlight-aside__icon astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 11a1 1 0 0 0-1 1v4a1 1 0 0 0 2 0v-4a1 1 0 0 0-1-1Zm.38-3.92a1 1 0 0 0-.76 0 1 1 0 0 0-.33.21 1.15 1.15 0 0 0-.21.33 1 1 0 0 0 .21 1.09c.097.088.209.16.33.21A1 1 0 0 0 13 8a1.05 1.05 0 0 0-.29-.71 1 1 0 0 0-.33-.21ZM12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16.001A8 8 0 0 1 12 20Z"/></svg> Note </p> <section class="starlight-aside__content"> <p>Make sure the font is loaded before using it in a <code dir="auto">Text</code> element.
+<div class="sl-markdown-content"> <p> <strong>type:</strong> <a href="/tng/guide/types/#string" dir="auto"> <code>string</code> </a>  <br> <strong>default:</strong> <code dir="auto">&quot;&quot;</code><br>   </p> <p>The name of the font family selected for rendering the text.</p><div class="code-image-container astro-2fp7lvqc"> <div class="code-block astro-2fp7lvqc"> <div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span style="--0:#4EC9B0;--1:#227188">Text</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">text</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#CE9178;--1:#A31515">"Hello"</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">color</span><span style="--0:#CCCCCC;--1:#3B3B3B">: black;</span></div></div><div class="ec-line highlight mark"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">font-family</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#d8a995;--1:#9b1414">"Arial"</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="Text {    text: &#x22;Hello&#x22;;    color: black;    font-family: &#x22;Arial&#x22;;}"><div></div></button></div></figure></div> </div> <div class="image-block astro-2fp7lvqc"> <img src="/tng/_astro/slint-logo-square-dark.DwYyWyio_Z20R5kO.webp" alt="font-family" class="astro-2fp7lvqc" width="100" height="100" loading="lazy" decoding="async"> </div> </div> <aside aria-label="Note" class="starlight-aside starlight-aside--note"> <p class="starlight-aside__title" aria-hidden="true"> <svg aria-hidden="true" class="starlight-aside__icon astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 11a1 1 0 0 0-1 1v4a1 1 0 0 0 2 0v-4a1 1 0 0 0-1-1Zm.38-3.92a1 1 0 0 0-.76 0 1 1 0 0 0-.33.21 1.15 1.15 0 0 0-.21.33 1 1 0 0 0 .21 1.09c.097.088.209.16.33.21A1 1 0 0 0 13 8a1.05 1.05 0 0 0-.29-.71 1 1 0 0 0-.33-.21ZM12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16.001A8 8 0 0 1 12 20Z"/></svg> Note </p> <section class="starlight-aside__content"> <p>Make sure the font is loaded before using it in a <code dir="auto">Text</code> element.
 See ??????.</p> </section> </aside> </div>
 <h3 id="font-size"><code dir="auto">font-size</code></h3>
 <div class="sl-markdown-content"> <p> <strong>type:</strong> <a href="/tng/guide/types/" dir="auto"> <code>length</code> </a>  <br> <strong>default:</strong> <code dir="auto">0px</code><br>   </p> <p>The font size of the text.</p><div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span style="--0:#4EC9B0;--1:#227188">Text</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">text</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#CE9178;--1:#A31515">"Hello"</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">color</span><span style="--0:#CCCCCC;--1:#3B3B3B">: black;</span></div></div><div class="ec-line highlight mark"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">font-size</span><span style="--0:#CCCCCC;--1:#3B3B3B">: 2rem;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="Text {    text: &#x22;Hello&#x22;;    color: black;    font-size: 2rem;}"><div></div></button></div></figure></div> </div>
diff --git a/snapshots/tng/elements/textinput/index.html b/snapshots/tng/elements/textinput/index.html
index a3a6a84fa..03ee0eb0c 100644
--- a/snapshots/tng/elements/textinput/index.html
+++ b/snapshots/tng/elements/textinput/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/timer/index.html b/snapshots/tng/elements/timer/index.html
index 866877ecc..c7a040e9b 100644
--- a/snapshots/tng/elements/timer/index.html
+++ b/snapshots/tng/elements/timer/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><script src="/tng/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/toucharea/index.html b/snapshots/tng/elements/toucharea/index.html
index 08e3cb681..9eeeb0122 100644
--- a/snapshots/tng/elements/toucharea/index.html
+++ b/snapshots/tng/elements/toucharea/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/verticallayout/index.html b/snapshots/tng/elements/verticallayout/index.html
index 5270cb89d..e60bdf47c 100644
--- a/snapshots/tng/elements/verticallayout/index.html
+++ b/snapshots/tng/elements/verticallayout/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/elements/window/index.html b/snapshots/tng/elements/window/index.html
index 73682140b..d08b26797 100644
--- a/snapshots/tng/elements/window/index.html
+++ b/snapshots/tng/elements/window/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><script src="/tng/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/getting-started/intro/index.html b/snapshots/tng/getting-started/intro/index.html
index ea164268a..0592754d4 100644
--- a/snapshots/tng/getting-started/intro/index.html
+++ b/snapshots/tng/getting-started/intro/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><script src="/tng/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
@@ -80,11 +81,40 @@
 		})();
 	</script> </sl-sidebar-state-persist>  <div class="md:sl-hidden"> <div class="mobile-preferences sl-flex astro-auvtkur5"> <div class="sl-flex social-icons astro-auvtkur5"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div>  </div> </div> </div> </nav> <div class="main-frame astro-p25nhtne">   <div class="lg:sl-flex astro-rwvehgl4"> <aside class="right-sidebar-container astro-rwvehgl4"> <div class="right-sidebar astro-rwvehgl4"> <div class="lg:sl-hidden astro-hwfertka"><mobile-starlight-toc data-min-h="2" data-max-h="3" class="astro-zpk4atjs"><nav aria-labelledby="starlight__on-this-page--mobile" class="astro-zpk4atjs"><details id="starlight__mobile-toc" class="astro-zpk4atjs"><summary id="starlight__on-this-page--mobile" class="sl-flex astro-zpk4atjs"><div class="toggle sl-flex astro-zpk4atjs">On this page<svg aria-hidden="true" class="caret astro-zpk4atjs astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </div><span class="display-current astro-zpk4atjs"></span></summary><div class="dropdown astro-zpk4atjs"><ul class="isMobile astro-37ee4puk" style="--depth: 0;"> <li class="astro-37ee4puk" style="--depth: 0;"> <a href="#_top" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Overview</span> </a>  </li><li class="astro-37ee4puk" style="--depth: 0;"> <a href="#setting-up-vscode" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Setting up VSCode</span> </a>  </li> </ul> </div></details></nav></mobile-starlight-toc></div><div class="right-sidebar-panel sl-hidden lg:sl-block astro-hwfertka"><div class="sl-container astro-hwfertka"><starlight-toc data-min-h="2" data-max-h="3"><nav aria-labelledby="starlight__on-this-page"><h2 id="starlight__on-this-page">On this page</h2><ul class="astro-37ee4puk" style="--depth: 0;"> <li class="astro-37ee4puk" style="--depth: 0;"> <a href="#_top" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Overview</span> </a>  </li><li class="astro-37ee4puk" style="--depth: 0;"> <a href="#setting-up-vscode" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Setting up VSCode</span> </a>  </li> </ul> </nav></starlight-toc></div></div> </div> </aside> <div class="main-pane astro-rwvehgl4">  <main data-pagefind-body lang="en" dir="ltr" class="astro-77jcyavj">    <div class="content-panel astro-4r574wmc"> <div class="sl-container astro-4r574wmc"> <h1 id="_top" class="astro-7wrulwsq">Getting started</h1>  </div> </div>  <div class="content-panel astro-4r574wmc"> <div class="sl-container astro-4r574wmc"> <div class="sl-markdown-content"> <img src="/tng/_astro/mattermost-logo-light.DpTp-7cz_9zQW5.svg" class="light:sl-hidden" alt="A description of my image." width="50" height="50" loading="lazy" decoding="async">
+</script>   </div>  </div> </div> </div> </nav> <div class="main-frame astro-p25nhtne">   <div class="lg:sl-flex astro-rwvehgl4"> <aside class="right-sidebar-container astro-rwvehgl4"> <div class="right-sidebar astro-rwvehgl4"> <div class="lg:sl-hidden astro-hwfertka"><mobile-starlight-toc data-min-h="2" data-max-h="3" class="astro-zpk4atjs"><nav aria-labelledby="starlight__on-this-page--mobile" class="astro-zpk4atjs"><details id="starlight__mobile-toc" class="astro-zpk4atjs"><summary id="starlight__on-this-page--mobile" class="sl-flex astro-zpk4atjs"><div class="toggle sl-flex astro-zpk4atjs">On this page<svg aria-hidden="true" class="caret astro-zpk4atjs astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </div><span class="display-current astro-zpk4atjs"></span></summary><div class="dropdown astro-zpk4atjs"><ul class="isMobile astro-37ee4puk" style="--depth: 0;"> <li class="astro-37ee4puk" style="--depth: 0;"> <a href="#_top" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Overview</span> </a>  </li><li class="astro-37ee4puk" style="--depth: 0;"> <a href="#setting-up-vscode" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Setting up VSCode</span> </a> <ul class="isMobile astro-37ee4puk" style="--depth: 1;"> <li class="astro-37ee4puk" style="--depth: 1;"> <a href="#slint-project-structure" class="astro-37ee4puk" style="--depth: 1;"> <span class="astro-37ee4puk" style="--depth: 1;">Slint project structure</span> </a>  </li> </ul>  </li> </ul> </div></details></nav></mobile-starlight-toc></div><div class="right-sidebar-panel sl-hidden lg:sl-block astro-hwfertka"><div class="sl-container astro-hwfertka"><starlight-toc data-min-h="2" data-max-h="3"><nav aria-labelledby="starlight__on-this-page"><h2 id="starlight__on-this-page">On this page</h2><ul class="astro-37ee4puk" style="--depth: 0;"> <li class="astro-37ee4puk" style="--depth: 0;"> <a href="#_top" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Overview</span> </a>  </li><li class="astro-37ee4puk" style="--depth: 0;"> <a href="#setting-up-vscode" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Setting up VSCode</span> </a> <ul class="astro-37ee4puk" style="--depth: 1;"> <li class="astro-37ee4puk" style="--depth: 1;"> <a href="#slint-project-structure" class="astro-37ee4puk" style="--depth: 1;"> <span class="astro-37ee4puk" style="--depth: 1;">Slint project structure</span> </a>  </li> </ul>  </li> </ul> </nav></starlight-toc></div></div> </div> </aside> <div class="main-pane astro-rwvehgl4">  <main data-pagefind-body lang="en" dir="ltr" class="astro-77jcyavj">    <div class="content-panel astro-4r574wmc"> <div class="sl-container astro-4r574wmc"> <h1 id="_top" class="astro-7wrulwsq">Getting started</h1>  </div> </div>  <div class="content-panel astro-4r574wmc"> <div class="sl-container astro-4r574wmc"> <div class="sl-markdown-content"> <img src="/tng/_astro/mattermost-logo-light.DpTp-7cz_9zQW5.svg" class="light:sl-hidden" alt="A description of my image." width="50" height="50" loading="lazy" decoding="async">
 <img src="/tng/_astro/mattermost-logo-dark.ButNiD4U_Wo44T.svg" class="dark:sl-hidden" alt="A description of my image." width="50" height="50" loading="lazy" decoding="async">
 <p>As a first step we invite you to join our community on <a href="https://chat.slint.dev/">Mattermost</a>. This is a great place to ask questions and get help from other Slint users.</p>
 <p>This guide will help you get started with Slint. It will cover the basics of the language and how to get started with the Slint extension for Visual Studio Code.</p>
 <h2 id="setting-up-vscode">Setting up VSCode</h2>
+<starlight-tabs data-sync-key="dev-platform" class="astro-lisrjliy"> <div class="tablist-wrapper not-content astro-lisrjliy"> <ul role="tablist" class="astro-lisrjliy"> <li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-3" id="tab-3" aria-selected="true" tabindex="0" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M0.125 11.544L0.125 3.450L9.815 2.120L9.815 11.506L0.125 11.544ZM0.125 12.532L9.815 12.570L9.815 21.956L0.125 20.626L0.125 12.532ZM10.993 11.468L10.993 1.968L23.837 0.106L23.837 11.392L10.993 11.468ZM10.955 12.646L23.875 12.684L23.837 23.894L10.993 22.108L10.955 12.646Z"/></svg>  Windows </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-4" id="tab-4" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M14.94 5.19A4.38 4.38 0 0 0 16 2a4.44 4.44 0 0 0-3 1.52 4.17 4.17 0 0 0-1 3.09 3.69 3.69 0 0 0 2.94-1.42Zm2.52 7.44a4.51 4.51 0 0 1 2.16-3.81 4.66 4.66 0 0 0-3.66-2c-1.56-.16-3 .91-3.83.91s-2-.89-3.3-.87a4.92 4.92 0 0 0-4.14 2.53C2.93 12.45 4.24 17 6 19.47c.8 1.21 1.8 2.58 3.12 2.53s1.75-.82 3.28-.82 2 .82 3.3.79 2.22-1.24 3.06-2.45a11 11 0 0 0 1.38-2.85 4.41 4.41 0 0 1-2.68-4.04Z"/></svg>  macOS </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-5" id="tab-5" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M19.7 17.6c-.1-.2-.2-.4-.2-.6 0-.4-.2-.7-.5-1-.1-.1-.3-.2-.4-.2.6-1.8-.3-3.6-1.3-4.9-.8-1.2-2-2.1-1.9-3.7 0-1.9.2-5.4-3.3-5.1-3.6.2-2.6 3.9-2.7 5.2 0 1.1-.5 2.2-1.3 3.1-.2.2-.4.5-.5.7-1 1.2-1.5 2.8-1.5 4.3-.2.2-.4.4-.5.6-.1.1-.2.2-.2.3-.1.1-.3.2-.5.3-.4.1-.7.3-.9.7-.1.3-.2.7-.1 1.1.1.2.1.4 0 .7-.2.4-.2.9 0 1.4.3.4.8.5 1.5.6.5 0 1.1.2 1.6.4.5.3 1.1.5 1.7.5.3 0 .7-.1 1-.2.3-.2.5-.4.6-.7.4 0 1-.2 1.7-.2.6 0 1.2.2 2 .1 0 .1 0 .2.1.3.2.5.7.9 1.3 1h.2c.8-.1 1.6-.5 2.1-1.1.4-.4.9-.7 1.4-.9.6-.3 1-.5 1.1-1 .1-.7-.1-1.1-.5-1.7zM12.8 4.8c.6.1 1.1.6 1 1.2 0 .3-.1.6-.3.9h-.1c-.2-.1-.3-.1-.4-.2.1-.1.1-.3.2-.5 0-.4-.2-.7-.4-.7-.3 0-.5.3-.5.7v.1c-.1-.1-.3-.1-.4-.2V6c-.1-.5.3-1.1.9-1.2zm-.3 2c.1.1.3.2.4.2.1 0 .3.1.4.2.2.1.4.2.4.5s-.3.6-.9.8c-.2.1-.3.1-.4.2-.3.2-.6.3-1 .3-.3 0-.6-.2-.8-.4-.1-.1-.2-.2-.4-.3-.1-.1-.3-.3-.4-.6 0-.1.1-.2.2-.3.3-.2.4-.3.5-.4l.1-.1c.2-.3.6-.5 1-.5.3.1.6.2.9.4zM10.4 5c.4 0 .7.4.8 1.1v.2c-.1 0-.3.1-.4.2v-.2c0-.3-.2-.6-.4-.5-.2 0-.3.3-.3.6 0 .2.1.3.2.4 0 0-.1.1-.2.1-.2-.2-.4-.5-.4-.8 0-.6.3-1.1.7-1.1zm-1 16.1c-.7.3-1.6.2-2.2-.2-.6-.3-1.1-.4-1.8-.4-.5-.1-1-.1-1.1-.3-.1-.2-.1-.5.1-1 .1-.3.1-.6 0-.9-.1-.3-.1-.5 0-.8.1-.3.3-.4.6-.5.3-.1.5-.2.7-.4.1-.1.2-.2.3-.4.3-.4.5-.6.8-.6.6.1 1.1 1 1.5 1.9.2.3.4.7.7 1 .4.5.9 1.2.9 1.6 0 .5-.2.8-.5 1zm4.9-2.2c0 .1 0 .1-.1.2-1.2.9-2.8 1-4.1.3l-.6-.9c.9-.1.7-1.3-1.2-2.5-2-1.3-.6-3.7.1-4.8.1-.1.1 0-.3.8-.3.6-.9 2.1-.1 3.2 0-.8.2-1.6.5-2.4.7-1.3 1.2-2.8 1.5-4.3.1.1.1.1.2.1.1.1.2.2.3.2.2.3.6.4.9.4h.1c.4 0 .8-.1 1.1-.4.1-.1.2-.2.4-.2.3-.1.6-.3.9-.6.4 1.3.8 2.5 1.4 3.6.4.8.7 1.6.9 2.5.3 0 .7.1 1 .3.8.4 1.1.7 1 1.2H18c0-.3-.2-.6-.9-.9-.7-.3-1.3-.3-1.5.4-.1 0-.2.1-.3.1-.8.4-.8 1.5-.9 2.6.1.4 0 .7-.1 1.1zm4.6.6c-.6.2-1.1.6-1.5 1.1-.4.6-1.1 1-1.9.9-.4 0-.8-.3-.9-.7-.1-.6-.1-1.2.2-1.8.1-.4.2-.7.3-1.1.1-1.2.1-1.9.6-2.2 0 .5.3.8.7 1 .5 0 1-.1 1.4-.5h.2c.3 0 .5 0 .7.2.2.2.3.5.3.7 0 .3.2.6.3.9.5.5.5.8.5.9-.1.2-.5.4-.9.6zm-9-12c-.1 0-.1 0-.1.1 0 0 0 .1.1.1s.1.1.1.1c.3.4.8.6 1.4.7.5-.1 1-.2 1.5-.6l.6-.3c.1 0 .1-.1.1-.1 0-.1 0-.1-.1-.1-.2.1-.5.2-.7.3-.4.3-.9.5-1.4.5-.5 0-.9-.3-1.2-.6-.1 0-.2-.1-.3-.1z"/></svg>  Linux </a> </li> </ul> </div> <section id="tab-panel-3" aria-labelledby="tab-3" role="tabpanel"> <ol role="list" class="sl-steps">
+<li>Install VSCode.<br>
+Download it <a href="https://code.visualstudio.com">here</a>.</li>
+<li>Install the Slint extension.
+Find it <a href="https://marketplace.visualstudio.com/items?itemName=Slint.slint">here</a>.</li>
+<li>Create a new project based on a Slint template.
+This is done via the command palette (Ctrl+Shift+P).</li>
+<li>Choose your language.</li>
+</ol> </section><section id="tab-panel-4" aria-labelledby="tab-4" role="tabpanel" hidden> <ol role="list" class="sl-steps">
+<li>Install VSCode.<br>
+Download it <a href="https://code.visualstudio.com">here</a>.</li>
+<li>Install the Slint extension.
+Find it <a href="https://marketplace.visualstudio.com/items?itemName=Slint.slint">here</a>.</li>
+<li>Create a new project based on a Slint template.
+This is done via the command palette (CMD+Shift+P).</li>
+<li>Choose your language.
+<img src="/tng/_astro/macos-vscode-template-1.BBultgM9_aChi4.webp" alt="Command palette" width="1136" height="456" loading="lazy" decoding="async"></li>
+<li>Choose a folder to save the project in.
+<img src="/tng/_astro/macos-vscode-template-2.Ds4TZZIn_Z1uXpav.webp" alt="Project folder" width="1136" height="588" loading="lazy" decoding="async"></li>
+</ol> </section><section id="tab-panel-5" aria-labelledby="tab-5" role="tabpanel" hidden> <ol role="list" class="sl-steps">
+<li>Install VSCode.<br>
+Download it <a href="https://code.visualstudio.com">here</a>.</li>
+<li>Install the Slint extension.
+Find it <a href="https://marketplace.visualstudio.com/items?itemName=Slint.slint">here</a>.</li>
+<li>Create a new project based on a Slint template.
+This is done via the command palette (Ctrl+Shift+P).</li>
+<li>Choose your language.</li>
+</ol> </section> <starlight-tabs-restore class="astro-lisrjliy"></starlight-tabs-restore> </starlight-tabs>  
+<h3 id="slint-project-structure">Slint project structure</h3>
 <script>
 (() => {
 	class StarlightTabsRestore extends HTMLElement {
@@ -113,31 +143,12 @@ <h2 id="setting-up-vscode">Setting up VSCode</h2>
 	}
 	customElements.define('starlight-tabs-restore', StarlightTabsRestore);
 })()
-</script><starlight-tabs data-sync-key="dev-platform" class="astro-lisrjliy"> <div class="tablist-wrapper not-content astro-lisrjliy"> <ul role="tablist" class="astro-lisrjliy"> <li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-0" id="tab-0" aria-selected="true" tabindex="0" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M0.125 11.544L0.125 3.450L9.815 2.120L9.815 11.506L0.125 11.544ZM0.125 12.532L9.815 12.570L9.815 21.956L0.125 20.626L0.125 12.532ZM10.993 11.468L10.993 1.968L23.837 0.106L23.837 11.392L10.993 11.468ZM10.955 12.646L23.875 12.684L23.837 23.894L10.993 22.108L10.955 12.646Z"/></svg>  Windows </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-1" id="tab-1" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M14.94 5.19A4.38 4.38 0 0 0 16 2a4.44 4.44 0 0 0-3 1.52 4.17 4.17 0 0 0-1 3.09 3.69 3.69 0 0 0 2.94-1.42Zm2.52 7.44a4.51 4.51 0 0 1 2.16-3.81 4.66 4.66 0 0 0-3.66-2c-1.56-.16-3 .91-3.83.91s-2-.89-3.3-.87a4.92 4.92 0 0 0-4.14 2.53C2.93 12.45 4.24 17 6 19.47c.8 1.21 1.8 2.58 3.12 2.53s1.75-.82 3.28-.82 2 .82 3.3.79 2.22-1.24 3.06-2.45a11 11 0 0 0 1.38-2.85 4.41 4.41 0 0 1-2.68-4.04Z"/></svg>  macOS </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-2" id="tab-2" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M19.7 17.6c-.1-.2-.2-.4-.2-.6 0-.4-.2-.7-.5-1-.1-.1-.3-.2-.4-.2.6-1.8-.3-3.6-1.3-4.9-.8-1.2-2-2.1-1.9-3.7 0-1.9.2-5.4-3.3-5.1-3.6.2-2.6 3.9-2.7 5.2 0 1.1-.5 2.2-1.3 3.1-.2.2-.4.5-.5.7-1 1.2-1.5 2.8-1.5 4.3-.2.2-.4.4-.5.6-.1.1-.2.2-.2.3-.1.1-.3.2-.5.3-.4.1-.7.3-.9.7-.1.3-.2.7-.1 1.1.1.2.1.4 0 .7-.2.4-.2.9 0 1.4.3.4.8.5 1.5.6.5 0 1.1.2 1.6.4.5.3 1.1.5 1.7.5.3 0 .7-.1 1-.2.3-.2.5-.4.6-.7.4 0 1-.2 1.7-.2.6 0 1.2.2 2 .1 0 .1 0 .2.1.3.2.5.7.9 1.3 1h.2c.8-.1 1.6-.5 2.1-1.1.4-.4.9-.7 1.4-.9.6-.3 1-.5 1.1-1 .1-.7-.1-1.1-.5-1.7zM12.8 4.8c.6.1 1.1.6 1 1.2 0 .3-.1.6-.3.9h-.1c-.2-.1-.3-.1-.4-.2.1-.1.1-.3.2-.5 0-.4-.2-.7-.4-.7-.3 0-.5.3-.5.7v.1c-.1-.1-.3-.1-.4-.2V6c-.1-.5.3-1.1.9-1.2zm-.3 2c.1.1.3.2.4.2.1 0 .3.1.4.2.2.1.4.2.4.5s-.3.6-.9.8c-.2.1-.3.1-.4.2-.3.2-.6.3-1 .3-.3 0-.6-.2-.8-.4-.1-.1-.2-.2-.4-.3-.1-.1-.3-.3-.4-.6 0-.1.1-.2.2-.3.3-.2.4-.3.5-.4l.1-.1c.2-.3.6-.5 1-.5.3.1.6.2.9.4zM10.4 5c.4 0 .7.4.8 1.1v.2c-.1 0-.3.1-.4.2v-.2c0-.3-.2-.6-.4-.5-.2 0-.3.3-.3.6 0 .2.1.3.2.4 0 0-.1.1-.2.1-.2-.2-.4-.5-.4-.8 0-.6.3-1.1.7-1.1zm-1 16.1c-.7.3-1.6.2-2.2-.2-.6-.3-1.1-.4-1.8-.4-.5-.1-1-.1-1.1-.3-.1-.2-.1-.5.1-1 .1-.3.1-.6 0-.9-.1-.3-.1-.5 0-.8.1-.3.3-.4.6-.5.3-.1.5-.2.7-.4.1-.1.2-.2.3-.4.3-.4.5-.6.8-.6.6.1 1.1 1 1.5 1.9.2.3.4.7.7 1 .4.5.9 1.2.9 1.6 0 .5-.2.8-.5 1zm4.9-2.2c0 .1 0 .1-.1.2-1.2.9-2.8 1-4.1.3l-.6-.9c.9-.1.7-1.3-1.2-2.5-2-1.3-.6-3.7.1-4.8.1-.1.1 0-.3.8-.3.6-.9 2.1-.1 3.2 0-.8.2-1.6.5-2.4.7-1.3 1.2-2.8 1.5-4.3.1.1.1.1.2.1.1.1.2.2.3.2.2.3.6.4.9.4h.1c.4 0 .8-.1 1.1-.4.1-.1.2-.2.4-.2.3-.1.6-.3.9-.6.4 1.3.8 2.5 1.4 3.6.4.8.7 1.6.9 2.5.3 0 .7.1 1 .3.8.4 1.1.7 1 1.2H18c0-.3-.2-.6-.9-.9-.7-.3-1.3-.3-1.5.4-.1 0-.2.1-.3.1-.8.4-.8 1.5-.9 2.6.1.4 0 .7-.1 1.1zm4.6.6c-.6.2-1.1.6-1.5 1.1-.4.6-1.1 1-1.9.9-.4 0-.8-.3-.9-.7-.1-.6-.1-1.2.2-1.8.1-.4.2-.7.3-1.1.1-1.2.1-1.9.6-2.2 0 .5.3.8.7 1 .5 0 1-.1 1.4-.5h.2c.3 0 .5 0 .7.2.2.2.3.5.3.7 0 .3.2.6.3.9.5.5.5.8.5.9-.1.2-.5.4-.9.6zm-9-12c-.1 0-.1 0-.1.1 0 0 0 .1.1.1s.1.1.1.1c.3.4.8.6 1.4.7.5-.1 1-.2 1.5-.6l.6-.3c.1 0 .1-.1.1-.1 0-.1 0-.1-.1-.1-.2.1-.5.2-.7.3-.4.3-.9.5-1.4.5-.5 0-.9-.3-1.2-.6-.1 0-.2-.1-.3-.1z"/></svg>  Linux </a> </li> </ul> </div> <section id="tab-panel-0" aria-labelledby="tab-0" role="tabpanel"> <ol role="list" class="sl-steps">
-<li>Install VSCode.<br>
-Download it <a href="https://code.visualstudio.com">here</a>.</li>
-<li>Install the Slint extension.
-Find it <a href="https://marketplace.visualstudio.com/items?itemName=Slint.slint">here</a>.</li>
-<li>Create a new project based on a Slint template.
-This is done via the command palette (Ctrl+Shift+P).</li>
-<li>Choose your language.</li>
-</ol> </section><section id="tab-panel-1" aria-labelledby="tab-1" role="tabpanel" hidden> <ol role="list" class="sl-steps">
-<li>Install VSCode.<br>
-Download it <a href="https://code.visualstudio.com">here</a>.</li>
-<li>Install the Slint extension.
-Find it <a href="https://marketplace.visualstudio.com/items?itemName=Slint.slint">here</a>.</li>
-<li>Create a new project based on a Slint template.
-This is done via the command palette (CMD+Shift+P).</li>
-<li>Choose your language.
-<img src="/tng/_astro/macos-vscode-template-1.BBultgM9_aChi4.webp" alt="Command palette" width="1136" height="456" loading="lazy" decoding="async"></li>
-<li>Choose a folder to save the project in.
-<img src="/tng/_astro/macos-vscode-template-2.Ds4TZZIn_Z1uXpav.webp" alt="Project folder" width="1136" height="588" loading="lazy" decoding="async"></li>
-</ol> </section><section id="tab-panel-2" aria-labelledby="tab-2" role="tabpanel" hidden> <ol role="list" class="sl-steps">
-<li>Install VSCode.<br>
-Download it <a href="https://code.visualstudio.com">here</a>.</li>
-<li>Install the Slint extension.
-Find it <a href="https://marketplace.visualstudio.com/items?itemName=Slint.slint">here</a>.</li>
-<li>Create a new project based on a Slint template.
-This is done via the command palette (Ctrl+Shift+P).</li>
-<li>Choose your language.</li>
-</ol> </section> <starlight-tabs-restore class="astro-lisrjliy"></starlight-tabs-restore> </starlight-tabs>   </div> <footer class="sl-flex astro-eifwj7ft"> <div class="meta sl-flex astro-eifwj7ft">   </div> <div class="pagination-links astro-dyqvxwuo" dir="ltr">  <a href="/tng/getting-started/which_language" rel="next" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg>  <span class="astro-dyqvxwuo"> Next <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Which language?</span> </span> </a> </div>   </footer>  </div> </div>   </main> </div> </div>  </div> </div>  </body></html>
\ No newline at end of file
+</script><starlight-tabs data-sync-key="dev-language" class="astro-lisrjliy"> <div class="tablist-wrapper not-content astro-lisrjliy"> <ul role="tablist" class="astro-lisrjliy"> <li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-0" id="tab-0" aria-selected="true" tabindex="0" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M0.024 11.935L0.024 11.935Q0.024 9.398 0.841 7.377Q1.659 5.356 2.970 4.045Q4.282 2.733 6.216 1.873L6.216 1.873Q7.722 1.185 10.130 1.185L10.130 1.185Q12.151 1.185 13.763 2.002Q15.376 2.819 16.451 3.894L16.451 3.894L13.484 7.248L13.140 6.990Q12.409 6.431 12.021 6.302L12.021 6.302L11.549 6.173Q10.689 5.915 10.130 5.915L10.130 5.915Q9.184 5.915 8.367 6.302L8.367 6.302Q7.463 6.775 6.905 7.528Q6.346 8.280 5.959 9.441Q5.572 10.602 5.572 11.935L5.572 11.935Q5.572 15.031 6.905 16.364L6.905 16.364Q7.593 17.224 8.453 17.611Q9.313 17.998 10.387 17.998Q11.463 17.998 12.280 17.611L12.280 17.611Q13.183 17.138 13.742 16.364L13.742 16.364L16.709 19.761Q15.462 21.180 13.742 22.041L13.742 22.041Q12.151 22.814 10.130 22.814L10.130 22.814Q8.238 22.814 6.216 22.169L6.216 22.169Q4.411 21.567 2.992 20.148L2.992 20.148Q2.389 19.503 1.831 18.471L1.831 18.471Q1.530 17.869 0.970 16.537L0.970 16.537Q0.024 14.644 0.024 11.935ZM13.355 10.731L13.355 8.452L11.463 8.452L11.463 10.731L9.313 10.731L9.313 12.623L11.463 12.623L11.463 15.031L13.355 15.031L13.355 12.623L15.505 12.623L15.505 10.731L13.355 10.731ZM23.976 10.602L21.396 10.602L21.396 7.936L19.117 7.936L19.117 10.602L16.580 10.602L16.580 12.881L19.117 12.881L19.117 15.720L21.396 15.720L21.396 12.881L23.976 12.881L23.976 10.602Z"/></svg>  C++ </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-1" id="tab-1" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5.376 14.300L5.376 3.352L9.286 3.352L9.286 14.300Q9.286 17.842 7.630 19.452L7.630 19.452Q6.112 20.924 3.076 20.924L3.076 20.924Q2.386 20.924 1.558 20.809Q0.730 20.694 0.224 20.464L0.224 20.464L0.638 17.336Q1.512 17.750 2.662 17.750L2.662 17.750Q3.950 17.750 4.594 17.060L4.594 17.060Q5.376 16.232 5.376 14.300L5.376 14.300ZM11.862 19.912L12.736 16.600Q13.564 17.060 14.668 17.382L14.668 17.382Q15.910 17.750 17.014 17.750L17.014 17.750Q18.394 17.750 19.084 17.267Q19.774 16.784 19.774 15.910Q19.774 15.036 19.130 14.507Q18.486 13.978 16.876 13.426L16.876 13.426Q12.138 11.770 12.138 8.274L12.138 8.274Q12.138 5.974 13.909 4.525Q15.680 3.076 18.762 3.076L18.762 3.076Q21.200 3.076 23.224 3.950L23.224 3.950L22.350 7.124L22.074 6.986Q21.246 6.664 20.740 6.526L20.740 6.526Q19.774 6.250 18.762 6.250L18.762 6.250Q17.520 6.250 16.853 6.733Q16.186 7.216 16.186 7.998Q16.186 8.780 16.922 9.286L16.922 9.286Q17.474 9.700 19.314 10.436L19.314 10.436Q21.614 11.310 22.695 12.552Q23.776 13.794 23.776 15.588L23.776 15.588Q23.776 17.888 22.028 19.314L22.028 19.314Q20.142 20.924 16.738 20.924L16.738 20.924Q15.404 20.924 13.932 20.556L13.932 20.556Q12.782 20.326 11.862 19.912L11.862 19.912Z"/></svg>  NodeJS </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-2" id="tab-2" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M18.419 2.539L18.419 2.983L18.419 3.686L18.530 3.797L18.642 3.797Q18.826 3.760 19.178 3.704Q19.529 3.649 19.696 3.575Q19.863 3.501 19.992 3.630Q20.122 3.760 20.047 3.926Q19.973 4.093 19.918 4.444Q19.863 4.796 19.825 4.981L19.825 4.981L19.825 5.092L19.936 5.203Q19.936 5.314 20.159 5.314L20.159 5.314L21.194 5.314Q21.564 5.314 21.527 5.647L21.527 5.647L21.527 5.906Q21.453 6.128 21.232 6.572L21.232 6.572L21.084 6.831L21.084 6.942L21.157 7.016Q21.194 7.090 21.194 7.164L21.194 7.164L21.305 7.164Q21.491 7.238 21.842 7.293Q22.194 7.349 22.360 7.367Q22.526 7.386 22.601 7.589Q22.674 7.793 22.601 7.978L22.601 7.978L22.305 8.385Q22.082 8.644 22.008 8.792L22.008 8.792L22.008 9.014Q22.008 9.088 22.119 9.162L22.119 9.162L22.230 9.236L23.155 9.606Q23.340 9.680 23.396 9.846Q23.451 10.013 23.267 10.161L23.267 10.161Q22.822 10.642 22.489 10.864L22.489 10.864L22.489 11.197L22.526 11.271Q22.637 11.308 22.712 11.308L22.712 11.308L22.970 11.493Q23.303 11.715 23.488 11.789Q23.674 11.863 23.674 12.066Q23.674 12.270 23.526 12.381L23.526 12.381L22.601 12.936L22.601 13.047Q22.601 13.232 22.601 13.269Q22.601 13.306 22.712 13.417L22.712 13.417Q23.155 13.861 23.415 13.972L23.415 13.972Q23.563 14.157 23.507 14.305Q23.451 14.453 23.267 14.564L23.267 14.564Q22.601 14.786 22.341 14.897L22.341 14.897L22.305 14.934Q22.230 14.971 22.194 15.045Q22.156 15.119 22.230 15.267L22.230 15.267L22.230 15.378Q22.415 15.526 22.637 15.933L22.637 15.933L22.822 16.192Q22.896 16.266 22.878 16.414Q22.860 16.562 22.712 16.636L22.712 16.636L22.601 16.673L22.453 16.747Q22.305 16.747 22.008 16.821Q21.712 16.895 21.564 16.895L21.564 16.895L21.416 16.895Q21.416 16.932 21.361 16.987Q21.305 17.043 21.305 17.117L21.305 17.117L21.343 17.228L21.416 17.339L21.787 18.153Q21.860 18.227 21.805 18.375Q21.749 18.523 21.675 18.597L21.675 18.597L20.270 18.597Q20.159 18.745 20.159 18.967L20.159 18.967Q20.232 19.115 20.288 19.411Q20.343 19.707 20.418 19.873Q20.491 20.040 20.343 20.188Q20.195 20.336 19.936 20.336L19.936 20.336Q19.752 20.299 19.400 20.243Q19.049 20.188 18.901 20.114L18.901 20.114L18.790 20.114L18.604 20.299Q18.567 20.336 18.642 20.336L18.642 20.336L18.642 21.372Q18.642 21.742 18.308 21.742L18.308 21.742L18.087 21.742Q17.605 21.594 17.162 21.261L17.162 21.261L17.050 21.261Q16.939 21.261 16.866 21.335Q16.791 21.409 16.791 21.520L16.791 21.520Q16.791 21.668 16.736 21.964Q16.680 22.260 16.680 22.426Q16.680 22.593 16.477 22.667Q16.273 22.741 16.125 22.667L16.125 22.667Q15.756 22.297 15.311 22.075L15.311 22.075L15.200 22.075Q15.090 22.075 15.015 22.149Q14.942 22.223 14.942 22.297L14.942 22.297L14.608 23.222Q14.497 23.481 14.276 23.481L14.276 23.481Q14.201 23.481 14.165 23.407L14.165 23.407L14.128 23.370Q13.683 22.889 13.462 22.556L13.462 22.556L13.203 22.556Q13.128 22.556 13.055 22.630Q12.980 22.704 12.980 22.778L12.980 22.778L12.537 23.592Q12.425 23.740 12.222 23.740Q12.018 23.740 11.945 23.592L11.945 23.592L11.352 22.667L11.020 22.667L10.206 23.481Q10.095 23.592 9.762 23.592L9.762 23.592Q9.651 23.592 9.651 23.370L9.651 23.370L9.280 22.260Q9.243 22.186 9.169 22.186L9.169 22.186L8.837 22.186Q8.651 22.371 8.281 22.593L8.281 22.593L8.023 22.778L7.800 22.667Q7.467 22.519 7.338 22.426Q7.208 22.334 7.208 22.186L7.208 22.186Q7.097 21.853 7.097 21.150L7.097 21.150L7.060 21.113Q7.060 21.039 6.986 21.039Q6.912 21.039 6.857 20.983Q6.801 20.928 6.764 20.928L6.764 20.928L6.616 20.928L6.505 21.039L5.691 21.372Q5.543 21.483 5.395 21.409Q5.247 21.335 5.247 21.150L5.247 21.150L5.247 19.892L5.136 19.781L5.026 19.781Q4.840 19.818 4.489 19.873Q4.138 19.929 3.971 20.003Q3.804 20.077 3.675 19.947Q3.545 19.818 3.619 19.651Q3.693 19.485 3.749 19.133Q3.804 18.782 3.841 18.597L3.841 18.597L3.841 18.486L3.731 18.375L2.583 18.375Q2.250 18.375 2.250 18.042L2.250 18.042L2.250 17.783Q2.324 17.561 2.583 17.117L2.583 17.117L2.694 16.858L2.694 16.710Q2.657 16.636 2.583 16.636L2.583 16.636Q2.583 16.562 2.510 16.562L2.510 16.562L2.472 16.525Q2.287 16.525 1.936 16.469Q1.584 16.414 1.418 16.414Q1.251 16.414 1.177 16.210Q1.103 16.007 1.214 15.822L1.214 15.822Q1.548 15.489 1.769 15.008L1.769 15.008L1.769 14.786L1.584 14.638Q1.510 14.564 1.436 14.564L1.436 14.564L0.622 14.231Q0.437 14.120 0.382 13.953Q0.326 13.787 0.511 13.639L0.511 13.639Q0.696 13.565 1.066 13.269L1.066 13.269Q1.288 13.047 1.436 12.936L1.436 12.936L1.436 12.714Q1.436 12.492 1.325 12.492L1.325 12.492L0.511 12.011Q0.326 11.937 0.326 11.733Q0.326 11.530 0.511 11.456L0.511 11.456L1.436 10.864L1.436 10.642L0.622 9.828Q0.548 9.754 0.548 9.606Q0.548 9.458 0.622 9.347L0.622 9.347L0.659 9.347Q0.733 9.310 0.733 9.236L0.733 9.236L1.769 8.903L1.769 8.792Q1.843 8.718 1.806 8.533L1.806 8.533L1.769 8.422Q1.658 8.311 1.492 8.089Q1.325 7.867 1.214 7.719Q1.103 7.571 1.177 7.367Q1.251 7.164 1.418 7.127Q1.584 7.090 1.936 7.034Q2.287 6.979 2.472 6.942L2.472 6.942L2.583 6.942Q2.583 6.868 2.639 6.812Q2.694 6.757 2.694 6.683L2.694 6.683L2.694 6.572L2.583 6.461L2.250 5.647Q2.139 5.499 2.213 5.351Q2.287 5.203 2.472 5.203L2.472 5.203L3.731 5.203L3.767 5.129Q3.767 5.092 3.841 5.092L3.841 5.092L3.841 4.981Q3.619 4.278 3.619 3.945L3.619 3.945Q3.545 3.760 3.675 3.630Q3.804 3.501 3.989 3.575L3.989 3.575Q4.322 3.575 5.026 3.797L5.026 3.797L5.136 3.797L5.284 3.649Q5.321 3.575 5.247 3.575L5.247 3.575L5.247 2.539Q5.247 2.206 5.580 2.206L5.580 2.206L5.840 2.206Q6.061 2.280 6.505 2.539L6.505 2.539L6.764 2.650L6.912 2.650Q6.986 2.613 6.986 2.539L6.986 2.539Q7.060 2.539 7.060 2.465L7.060 2.465L7.097 2.428Q7.097 2.243 7.153 1.891Q7.208 1.540 7.208 1.373Q7.208 1.207 7.412 1.133Q7.615 1.059 7.800 1.133L7.800 1.133Q8.133 1.503 8.614 1.725L8.614 1.725L8.837 1.725L8.947 1.614L8.947 1.540Q8.985 1.466 9.058 1.392L9.058 1.392L9.392 0.578Q9.503 0.430 9.576 0.393Q9.651 0.356 9.872 0.356L9.872 0.356L9.983 0.467Q10.058 0.652 10.354 1.022L10.354 1.022Q10.576 1.244 10.686 1.392L10.686 1.392L10.797 1.392Q10.872 1.392 10.945 1.318L10.945 1.318L11.020 1.281L11.500 0.467Q11.648 0.282 11.815 0.263Q11.982 0.245 12.055 0.356L12.055 0.356L12.166 0.467L12.759 1.392L13.091 1.392Q13.166 1.392 13.203 1.318L13.203 1.318L13.239 1.281Q13.683 0.800 13.794 0.578L13.794 0.578Q13.869 0.504 14.017 0.504Q14.165 0.504 14.276 0.578L14.276 0.578L14.276 0.689Q14.497 1.392 14.608 1.614L14.608 1.614L14.720 1.725L14.942 1.725Q15.459 1.540 15.866 1.133L15.866 1.133Q16.052 1.059 16.255 1.133Q16.459 1.207 16.459 1.373Q16.459 1.540 16.514 1.891Q16.569 2.243 16.569 2.428L16.569 2.428L16.607 2.465Q16.607 2.539 16.680 2.539L16.680 2.539L16.791 2.539Q16.902 2.613 16.976 2.613Q17.050 2.613 17.050 2.539L17.050 2.539Q17.273 2.428 17.976 2.206L17.976 2.206Q18.160 2.095 18.290 2.187Q18.419 2.280 18.419 2.539L18.419 2.539ZM5.580 6.128L5.580 6.128L14.386 6.128Q15.090 6.128 15.422 6.239L15.422 6.239Q16.532 6.609 17.050 7.275L17.050 7.275Q17.605 7.867 17.605 8.681L17.605 8.681Q17.605 9.347 17.273 10.050L17.273 10.050Q16.902 10.605 16.348 10.975L16.348 10.975Q16.125 11.197 15.977 11.197L15.977 11.197Q16.052 11.271 16.163 11.326Q16.273 11.382 16.348 11.456L16.348 11.456L16.532 11.604Q16.939 11.974 17.050 12.233L17.050 12.233Q17.383 12.788 17.383 13.417L17.383 13.417Q17.383 13.528 17.605 13.750L17.605 13.750Q17.753 13.898 18.049 13.972L18.049 13.972Q18.197 13.972 18.549 13.972Q18.901 13.972 19.122 13.750L19.122 13.750Q19.270 13.602 19.381 13.306L19.381 13.306L19.456 13.047L19.456 12.492Q19.456 12.381 19.474 12.381Q19.492 12.381 19.566 12.381L19.566 12.381L20.380 12.381L20.380 10.864Q20.232 10.790 19.881 10.623Q19.529 10.457 19.345 10.383L19.345 10.383Q19.308 10.346 19.122 10.290Q18.938 10.235 18.901 10.161L18.901 10.161Q18.346 9.976 18.530 9.236L18.530 9.236Q19.011 8.089 19.345 7.497L19.345 7.497L19.345 7.386Q18.901 6.683 18.642 6.387L18.642 6.387Q18.197 5.832 17.716 5.425L17.716 5.425Q16.014 3.871 13.573 3.353L13.573 3.353L13.462 3.353Q12.759 4.056 12.314 4.389L12.314 4.389Q12.130 4.574 11.834 4.574Q11.538 4.574 11.352 4.389L11.352 4.389L10.317 3.353L10.206 3.353Q9.762 3.464 9.058 3.686L9.058 3.686Q7.245 4.352 5.802 5.758L5.802 5.758Q5.580 6.017 5.580 6.128ZM18.642 16.747L18.642 16.747L15.200 16.747Q14.831 16.747 14.720 16.636L14.720 16.636Q14.128 16.340 13.905 15.489L13.905 15.489L13.869 15.267Q13.683 14.601 13.683 14.231L13.683 14.231Q13.683 13.972 13.480 13.528Q13.276 13.084 12.944 12.843Q12.610 12.603 12.166 12.603L12.166 12.603L10.095 12.603L10.095 14.083L12.166 14.083Q12.277 14.083 12.296 14.101Q12.314 14.120 12.314 14.231L12.314 14.231L12.314 16.525Q12.314 16.599 12.296 16.617Q12.277 16.636 12.166 16.636L12.166 16.636L5.247 16.636Q5.469 17.006 5.950 17.450L5.950 17.450L6.061 17.450Q6.986 17.228 7.430 17.228L7.430 17.228Q7.689 17.154 7.930 17.283Q8.171 17.413 8.244 17.672L8.244 17.672L8.614 19.189L8.614 19.300Q9.540 19.670 9.983 19.781L9.983 19.781Q10.761 20.003 11.352 20.003L11.352 20.003Q11.907 20.077 12.573 20.040L12.573 20.040Q12.980 20.003 13.794 19.892L13.794 19.892Q14.386 19.781 15.534 19.300L15.534 19.300L15.534 19.189L15.866 17.672Q16.088 17.080 16.680 17.228L16.680 17.228L18.087 17.561L18.197 17.561Q18.197 17.228 18.642 16.747ZM6.283 8.681L4.914 8.681L5.247 9.347L5.284 9.458Q5.321 9.643 5.247 9.717L5.247 9.717Q5.247 9.902 4.988 10.087L4.988 10.087L4.914 10.161Q3.989 10.642 3.508 10.753L3.508 10.753L3.434 10.753Q3.397 10.790 3.397 10.864L3.397 10.864L3.397 11.456Q3.397 12.603 3.731 13.972L3.731 13.972L3.767 14.046Q3.767 14.120 3.841 14.120L3.841 14.120L6.283 14.120L6.283 8.681ZM9.872 10.272L9.872 10.272Q9.910 10.272 9.947 10.272L9.947 10.272L9.872 10.272L12.537 10.272Q12.980 10.272 13.239 10.161L13.239 10.161L13.351 10.087Q13.498 9.976 13.573 9.809Q13.646 9.643 13.628 9.402Q13.610 9.162 13.462 9.014L13.462 9.014Q13.091 8.681 12.648 8.681L12.648 8.681L9.762 8.681Q9.872 9.236 9.872 10.272ZM2.917 9.125L2.917 9.125Q2.917 9.384 3.138 9.606Q3.360 9.828 3.619 9.828Q3.878 9.828 4.100 9.606Q4.322 9.384 4.322 9.125Q4.322 8.866 4.100 8.644Q3.878 8.422 3.619 8.422Q3.360 8.422 3.138 8.644Q2.917 8.866 2.917 9.125ZM17.605 18.856L17.605 18.856Q17.605 18.597 17.402 18.375Q17.198 18.153 16.921 18.153Q16.643 18.153 16.440 18.375Q16.236 18.597 16.236 18.856Q16.236 19.115 16.440 19.318Q16.643 19.522 16.921 19.522Q17.198 19.522 17.402 19.337Q17.605 19.152 17.605 18.856ZM6.764 18.153L6.764 18.153Q6.468 18.153 6.265 18.375Q6.061 18.597 6.061 18.856Q6.061 19.115 6.265 19.318Q6.468 19.522 6.746 19.522Q7.023 19.522 7.227 19.318Q7.430 19.115 7.430 18.856Q7.430 18.597 7.227 18.375Q7.023 18.153 6.764 18.153ZM12.537 2.983L12.537 2.983Q12.537 2.724 12.352 2.520Q12.166 2.317 11.852 2.317Q11.538 2.317 11.334 2.502Q11.131 2.687 11.131 2.983Q11.131 3.279 11.316 3.482Q11.500 3.686 11.834 3.686L11.834 3.686Q12.314 3.686 12.537 2.983ZM20.047 9.939L20.047 9.939Q20.306 9.939 20.529 9.717Q20.750 9.495 20.750 9.236Q20.750 8.977 20.529 8.755Q20.306 8.533 20.047 8.533Q19.788 8.533 19.566 8.755Q19.345 8.977 19.345 9.254Q19.345 9.532 19.529 9.735Q19.715 9.939 20.047 9.939Z"/></svg>  Rust </a> </li> </ul> </div> <section id="tab-panel-0" aria-labelledby="tab-0" role="tabpanel"> <starlight-file-tree class="not-content astro-25yaqiub" data-pagefind-ignore=""><ul><li class="directory"><details><summary><span class="tree-entry"><span class=""><span><span class="sr-only">Directory</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>.vscode/</span></span></summary><ul><li class="file empty"><span class="tree-entry"><span class="">…</span></span></li></ul></details></li><li class="directory"><details open><summary><span class="tree-entry"><span class=""><span><span class="sr-only">Directory</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>src/
+</span></span></summary><ul><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M0.024 11.935L0.024 11.935Q0.024 9.398 0.841 7.377Q1.659 5.356 2.970 4.045Q4.282 2.733 6.216 1.873L6.216 1.873Q7.722 1.185 10.130 1.185L10.130 1.185Q12.151 1.185 13.763 2.002Q15.376 2.819 16.451 3.894L16.451 3.894L13.484 7.248L13.140 6.990Q12.409 6.431 12.021 6.302L12.021 6.302L11.549 6.173Q10.689 5.915 10.130 5.915L10.130 5.915Q9.184 5.915 8.367 6.302L8.367 6.302Q7.463 6.775 6.905 7.528Q6.346 8.280 5.959 9.441Q5.572 10.602 5.572 11.935L5.572 11.935Q5.572 15.031 6.905 16.364L6.905 16.364Q7.593 17.224 8.453 17.611Q9.313 17.998 10.387 17.998Q11.463 17.998 12.280 17.611L12.280 17.611Q13.183 17.138 13.742 16.364L13.742 16.364L16.709 19.761Q15.462 21.180 13.742 22.041L13.742 22.041Q12.151 22.814 10.130 22.814L10.130 22.814Q8.238 22.814 6.216 22.169L6.216 22.169Q4.411 21.567 2.992 20.148L2.992 20.148Q2.389 19.503 1.831 18.471L1.831 18.471Q1.530 17.869 0.970 16.537L0.970 16.537Q0.024 14.644 0.024 11.935ZM13.355 10.731L13.355 8.452L11.463 8.452L11.463 10.731L9.313 10.731L9.313 12.623L11.463 12.623L11.463 15.031L13.355 15.031L13.355 12.623L15.505 12.623L15.505 10.731L13.355 10.731ZM23.976 10.602L21.396 10.602L21.396 7.936L19.117 7.936L19.117 10.602L16.580 10.602L16.580 12.881L19.117 12.881L19.117 15.720L21.396 15.720L21.396 12.881L23.976 12.881L23.976 10.602Z"></path></svg></span>main.cpp</span></span></li></ul></details></li><li class="directory"><details open><summary><span class="tree-entry"><span class=""><span><span class="sr-only">Directory</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>ui/
+</span></span></summary><ul><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M1.082 16.876L1.082 14.014L22.918 14.014L22.918 16.876L1.082 16.876ZM1.082 9.986L1.082 7.071L13.272 7.071L13.272 9.986L1.082 9.986ZM1.082 3.096L1.082 0.181L22.918 0.181L22.918 3.096L1.082 3.096ZM1.082 23.819L1.082 20.904L17.300 20.904L17.300 23.819L1.082 23.819Z"></path></svg></span>app-window.slint</span> <span class="comment"> The <strong>main</strong> Slint file</span></span></li></ul></details></li><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M1.082 16.876L1.082 14.014L22.918 14.014L22.918 16.876L1.082 16.876ZM1.082 9.986L1.082 7.071L13.272 7.071L13.272 9.986L1.082 9.986ZM1.082 3.096L1.082 0.181L22.918 0.181L22.918 3.096L1.082 3.096ZM1.082 23.819L1.082 20.904L17.300 20.904L17.300 23.819L1.082 23.819Z"></path></svg></span>CMakeLists.txt</span></span></li><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M14.768 8.750L14.768 8.750Q14.636 7.067 13.431 5.994Q12.227 4.922 10.445 4.823L10.445 4.823L8.894 4.823Q8.795 3.602 9.356 2.710L9.356 2.710Q10.016 1.556 11.484 1.407Q12.953 1.259 13.943 2.248L13.943 2.248Q14.768 3.206 14.768 4.724L14.768 4.724Q14.768 5.021 14.900 5.152L14.900 5.152L15.824 6.076Q16.253 4.756 15.923 3.271L15.923 3.271Q15.527 1.919 14.454 1.093Q13.382 0.268 11.897 0.203L11.897 0.203Q10.940 0.203 10.280 0.401L10.280 0.401Q9.488 0.631 8.894 1.226L8.894 1.226Q8.168 1.919 7.821 3.041Q7.475 4.163 7.739 5.318L7.739 5.318Q8.036 6.572 8.993 7.495L8.993 7.495Q9.323 7.826 10.148 8.222L10.148 8.222Q10.511 8.387 10.791 8.172Q11.072 7.957 11.072 7.628L11.072 7.628Q11.072 6.934 10.346 6.803L10.346 6.803Q10.247 6.803 10.049 6.572L10.049 6.572L10.049 6.473Q10.346 6.407 10.692 6.489Q11.039 6.572 11.270 6.803L11.270 6.803Q11.732 7.265 11.567 8.024L11.567 8.024Q11.435 8.585 10.989 8.799Q10.544 9.014 9.917 8.849L9.917 8.849Q8.366 8.419 7.574 6.803L7.574 6.803Q7.508 6.637 7.359 6.324Q7.211 6.011 7.145 5.846L7.145 5.846Q6.518 6.506 6.188 6.968L6.188 6.968Q5.759 7.628 5.594 8.321L5.594 8.321Q5.000 11.093 7.046 12.974L7.046 12.974Q7.145 13.073 7.178 13.155Q7.211 13.238 7.145 13.403L7.145 13.403Q6.980 14.822 6.749 15.746L6.749 15.746Q6.584 16.637 6.320 18.336Q6.056 20.035 5.907 20.894Q5.759 21.752 5.924 22.577L5.924 22.577Q6.089 23.236 6.749 23.501L6.749 23.501Q6.782 23.303 6.831 22.890Q6.881 22.478 6.947 22.247L6.947 22.247Q7.112 21.389 7.359 19.689Q7.607 17.989 7.772 17.099L7.772 17.099Q7.871 16.571 8.019 15.498Q8.168 14.426 8.300 13.898L8.300 13.898Q8.300 13.601 8.597 13.601L8.597 13.601Q8.729 13.601 8.762 13.700Q8.795 13.799 8.795 13.997L8.795 13.997Q8.663 15.218 8.300 17.000L8.300 17.000Q8.135 18.089 7.805 20.102L7.805 20.102Q7.409 22.412 7.244 23.501L7.244 23.501Q7.244 23.567 7.310 23.633L7.310 23.633L7.343 23.699Q7.607 23.699 8.069 23.748Q8.531 23.797 8.795 23.797L8.795 23.797Q9.422 23.797 10.049 22.973L10.049 22.973Q10.478 22.544 10.148 21.851L10.148 21.851Q9.950 21.653 9.950 21.521L9.950 21.521Q9.488 20.927 10.148 20.597L10.148 20.597Q10.181 20.564 10.346 20.514Q10.511 20.465 10.544 20.399L10.544 20.399Q10.709 20.333 10.758 20.135Q10.808 19.937 10.643 19.772L10.643 19.772L10.346 19.474Q10.016 19.079 9.851 18.947Q9.686 18.815 9.735 18.567Q9.785 18.320 9.933 18.221Q10.082 18.122 10.445 17.973Q10.808 17.825 10.973 17.726Q11.138 17.627 11.171 17.495Q11.204 17.363 11.072 17.198L11.072 17.198Q10.874 17.000 10.742 16.802L10.742 16.802Q10.544 16.571 10.577 16.241Q10.610 15.911 10.841 15.729Q11.072 15.548 11.270 15.548L11.270 15.548Q11.567 15.416 11.600 15.152L11.600 15.152Q11.567 14.987 11.633 14.673Q11.699 14.360 11.699 14.228L11.699 14.228Q11.699 14.129 11.765 13.997Q11.831 13.865 11.897 13.799L11.897 13.799Q12.194 13.502 13.019 13.073L13.019 13.073Q14.075 12.314 14.504 11.208Q14.933 10.103 14.768 8.750ZM18.497 20.498L18.497 20.498Q18.497 20.102 18.068 20.102L18.068 20.102Q17.837 20.102 17.738 20.069L17.738 20.069Q17.540 20.003 17.474 19.772L17.474 19.772Q17.309 19.309 17.474 18.848L17.474 18.848Q17.804 18.188 17.045 18.023L17.045 18.023Q16.946 18.023 16.715 17.973Q16.484 17.924 16.319 17.924L16.319 17.924Q16.022 17.924 16.022 17.627L16.022 17.627Q16.022 17.528 15.972 17.313Q15.923 17.099 15.923 17.000L15.923 17.000Q15.923 16.802 16.055 16.604L16.055 16.604Q16.121 16.471 16.302 16.257Q16.484 16.043 16.467 15.927Q16.451 15.812 16.220 15.647L16.220 15.647Q16.187 15.614 16.022 15.515Q15.857 15.416 15.824 15.350L15.824 15.350Q15.527 15.185 15.477 15.020Q15.428 14.855 15.593 14.525L15.593 14.525Q15.824 14.327 15.824 14.228L15.824 14.228Q16.088 13.931 15.923 13.601L15.923 13.601L15.824 13.436Q15.659 13.040 15.494 12.875L15.494 12.875Q15.362 12.578 15.494 12.248L15.494 12.248Q16.814 9.640 15.824 7.198L15.824 7.198Q15.032 5.515 13.118 5.053L13.118 5.053L13.019 5.152Q13.085 5.186 13.184 5.351Q13.283 5.515 13.349 5.549L13.349 5.549Q15.296 7.198 15.296 9.575L15.296 9.575Q15.296 12.248 13.019 13.898L13.019 13.898Q12.854 13.997 12.804 14.129Q12.755 14.261 12.821 14.426L12.821 14.426Q13.019 14.921 13.382 15.911Q13.745 16.901 13.943 17.396L13.943 17.396L16.418 23.171L16.484 23.270Q16.583 23.402 16.748 23.402L16.748 23.402Q17.672 22.940 18.167 22.148Q18.662 21.356 18.497 20.498ZM12.293 14.426L12.293 14.426Q12.260 14.624 12.210 14.954Q12.161 15.284 12.095 15.449L12.095 15.449L12.062 15.647Q12.029 15.944 12.095 16.076L12.095 16.076L14.273 21.422Q14.636 22.346 15.296 22.873L15.296 22.873Q15.692 23.072 15.824 23.204L15.824 23.204L15.923 23.072Q14.768 20.201 12.293 14.426Z"></path></svg></span>LICENSE</span></span></li><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M23.780 10.803L23.818 10.803Q23.628 8.029 21.918 5.331L21.918 5.331Q20.664 3.469 18.916 2.234Q17.168 0.999 15.002 0.467L15.002 0.467Q13.748 0.125 12.646 0.125L12.646 0.125L10.746 0.125Q7.326 0.467 4.438 2.595L4.438 2.595Q1.132 5.369 0.296 9.245L0.296 9.245Q0.068 10.423 0.068 11.145L0.068 11.145L0.068 13.045Q0.448 16.351 2.082 18.631L2.082 18.631Q4.172 21.709 7.288 22.925L7.288 22.925Q9.454 23.685 11.202 23.875L11.202 23.875L13.102 23.875Q17.434 23.495 20.474 20.303L20.474 20.303Q22.944 17.833 23.666 14.375L23.666 14.375Q23.742 14.071 23.799 13.539Q23.856 13.007 23.932 12.703L23.932 12.703L23.932 11.411Q23.780 11.145 23.780 10.803L23.780 10.803ZM11.924 21.975L11.924 21.975Q9.188 21.975 6.870 20.569L6.870 20.569Q4.590 19.239 3.279 16.921Q1.968 14.603 1.968 11.867Q1.968 9.131 3.317 6.813Q4.666 4.495 6.984 3.165L6.984 3.165Q9.378 1.759 12.152 1.759L12.152 1.759Q14.850 1.835 17.149 3.184Q19.448 4.533 20.778 6.813L20.778 6.813Q22.146 9.131 22.108 11.867Q22.070 14.603 20.683 16.921Q19.296 19.239 17.016 20.569L17.016 20.569Q14.660 21.975 11.924 21.975ZM15.496 18.289L14.774 18.289Q14.432 18.289 14.166 18.175L14.166 18.175Q14.014 18.175 13.900 17.947L13.900 17.947Q13.862 17.833 13.824 17.795L13.824 17.795L13.824 10.081Q12.874 10.157 11.031 10.214Q9.188 10.271 8.238 10.309L8.238 10.309L8.238 11.259L9.416 11.259Q9.758 11.259 9.948 11.487Q10.138 11.715 10.138 12.095L10.138 12.095L10.138 17.567Q10.138 18.289 9.416 18.289L9.416 18.289L8.352 18.289L8.352 19.239L15.496 19.239L15.496 18.289ZM11.696 8.675L11.696 8.675Q12.570 8.675 13.140 8.067Q13.710 7.459 13.710 6.642Q13.710 5.825 13.102 5.217Q12.494 4.609 11.658 4.609Q10.822 4.609 10.252 5.217Q9.682 5.825 9.682 6.642Q9.682 7.459 10.290 8.067Q10.898 8.675 11.696 8.675Z"></path></svg></span>README.md</span></span></li></ul></starlight-file-tree>  </section><section id="tab-panel-1" aria-labelledby="tab-1" role="tabpanel" hidden> <starlight-file-tree class="not-content astro-25yaqiub" data-pagefind-ignore=""><ul><li class="directory"><details><summary><span class="tree-entry"><span class=""><span><span class="sr-only">Directory</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>.vscode/</span></span></summary><ul><li class="file empty"><span class="tree-entry"><span class="">…</span></span></li></ul></details></li><li class="directory"><details open><summary><span class="tree-entry"><span class=""><span><span class="sr-only">Directory</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>src/
+</span></span></summary><ul><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M5.376 14.300L5.376 3.352L9.286 3.352L9.286 14.300Q9.286 17.842 7.630 19.452L7.630 19.452Q6.112 20.924 3.076 20.924L3.076 20.924Q2.386 20.924 1.558 20.809Q0.730 20.694 0.224 20.464L0.224 20.464L0.638 17.336Q1.512 17.750 2.662 17.750L2.662 17.750Q3.950 17.750 4.594 17.060L4.594 17.060Q5.376 16.232 5.376 14.300L5.376 14.300ZM11.862 19.912L12.736 16.600Q13.564 17.060 14.668 17.382L14.668 17.382Q15.910 17.750 17.014 17.750L17.014 17.750Q18.394 17.750 19.084 17.267Q19.774 16.784 19.774 15.910Q19.774 15.036 19.130 14.507Q18.486 13.978 16.876 13.426L16.876 13.426Q12.138 11.770 12.138 8.274L12.138 8.274Q12.138 5.974 13.909 4.525Q15.680 3.076 18.762 3.076L18.762 3.076Q21.200 3.076 23.224 3.950L23.224 3.950L22.350 7.124L22.074 6.986Q21.246 6.664 20.740 6.526L20.740 6.526Q19.774 6.250 18.762 6.250L18.762 6.250Q17.520 6.250 16.853 6.733Q16.186 7.216 16.186 7.998Q16.186 8.780 16.922 9.286L16.922 9.286Q17.474 9.700 19.314 10.436L19.314 10.436Q21.614 11.310 22.695 12.552Q23.776 13.794 23.776 15.588L23.776 15.588Q23.776 17.888 22.028 19.314L22.028 19.314Q20.142 20.924 16.738 20.924L16.738 20.924Q15.404 20.924 13.932 20.556L13.932 20.556Q12.782 20.326 11.862 19.912L11.862 19.912Z"></path></svg></span>main.js</span></span></li></ul></details></li><li class="directory"><details open><summary><span class="tree-entry"><span class=""><span><span class="sr-only">Directory</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>ui/
+</span></span></summary><ul><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M1.082 16.876L1.082 14.014L22.918 14.014L22.918 16.876L1.082 16.876ZM1.082 9.986L1.082 7.071L13.272 7.071L13.272 9.986L1.082 9.986ZM1.082 3.096L1.082 0.181L22.918 0.181L22.918 3.096L1.082 3.096ZM1.082 23.819L1.082 20.904L17.300 20.904L17.300 23.819L1.082 23.819Z"></path></svg></span>app-window.slint</span> <span class="comment"> The <strong>main</strong> Slint file</span></span></li></ul></details></li><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M0.734 13.269L0.562 10.732Q1.938 10.732 2.497 10.087L2.497 10.087Q2.884 9.614 2.884 8.711L2.884 8.711Q2.884 8.324 2.798 7.571Q2.712 6.819 2.712 6.410Q2.712 6.002 2.669 5.185L2.669 5.185Q2.583 4.454 2.583 4.153L2.583 4.153Q2.583 2.089 3.787 1.099Q4.991 0.111 7.184 0.111L7.184 0.111L8.259 0.111L8.259 2.648L7.700 2.648Q6.754 2.648 6.345 3.185Q5.937 3.723 5.937 4.798L5.937 4.798Q5.937 5.056 6.023 5.572L6.023 5.572Q6.109 6.217 6.109 6.561L6.109 6.561Q6.109 6.819 6.152 7.378L6.152 7.378Q6.238 8.152 6.238 8.582L6.238 8.582Q6.238 10.216 5.550 11.033L5.550 11.033Q4.948 11.764 3.658 12.065L3.658 12.065Q4.948 12.409 5.550 13.097L5.550 13.097Q6.238 13.957 6.238 15.548L6.238 15.548Q6.238 16.021 6.152 16.795L6.152 16.795Q6.066 17.354 6.088 17.612Q6.109 17.870 6.023 18.515L6.023 18.515Q5.937 18.988 5.937 19.203L5.937 19.203Q5.937 20.278 6.345 20.815Q6.754 21.353 7.700 21.353L7.700 21.353L8.259 21.353L8.259 23.890L7.184 23.890Q2.712 23.890 2.712 19.848L2.712 19.848Q2.712 18.386 2.862 17.590Q3.013 16.795 3.013 15.290L3.013 15.290Q3.013 13.269 0.734 13.269L0.734 13.269ZM23.438 10.732L23.438 13.011Q21.159 13.011 21.159 15.032L21.159 15.032Q21.159 15.419 21.224 16.171Q21.288 16.924 21.288 17.311L21.288 17.311Q21.417 18.128 21.417 19.590L21.417 19.590Q21.417 23.632 16.859 23.632L16.859 23.632L15.784 23.632L15.784 21.353L16.300 21.353Q17.246 21.353 17.654 20.815Q18.063 20.278 18.063 19.203Q18.063 18.128 17.934 17.569L17.934 17.569Q17.934 17.225 17.848 16.558Q17.762 15.892 17.762 15.548L17.762 15.548Q17.762 13.957 18.450 13.097L18.450 13.097Q19.052 12.409 20.342 12.065L20.342 12.065Q19.052 11.764 18.450 11.033L18.450 11.033Q17.762 10.216 17.762 8.582L17.762 8.582Q17.762 8.152 17.848 7.378L17.848 7.378Q17.934 6.819 17.934 6.561L17.934 6.561Q18.063 5.873 18.063 4.841Q18.063 3.809 17.633 3.293Q17.203 2.777 16.300 2.648L16.300 2.648L15.784 2.648L15.784 0.111L16.859 0.111Q19.009 0.111 20.213 1.099Q21.417 2.089 21.417 4.153L21.417 4.153Q21.417 4.540 21.352 5.292Q21.288 6.045 21.288 6.432L21.288 6.432Q21.159 7.249 21.116 8.711L21.116 8.711Q21.159 9.614 21.503 10.087L21.503 10.087Q22.062 10.732 23.438 10.732L23.438 10.732Z"></path></svg></span>package.json</span></span></li><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M23.780 10.803L23.818 10.803Q23.628 8.029 21.918 5.331L21.918 5.331Q20.664 3.469 18.916 2.234Q17.168 0.999 15.002 0.467L15.002 0.467Q13.748 0.125 12.646 0.125L12.646 0.125L10.746 0.125Q7.326 0.467 4.438 2.595L4.438 2.595Q1.132 5.369 0.296 9.245L0.296 9.245Q0.068 10.423 0.068 11.145L0.068 11.145L0.068 13.045Q0.448 16.351 2.082 18.631L2.082 18.631Q4.172 21.709 7.288 22.925L7.288 22.925Q9.454 23.685 11.202 23.875L11.202 23.875L13.102 23.875Q17.434 23.495 20.474 20.303L20.474 20.303Q22.944 17.833 23.666 14.375L23.666 14.375Q23.742 14.071 23.799 13.539Q23.856 13.007 23.932 12.703L23.932 12.703L23.932 11.411Q23.780 11.145 23.780 10.803L23.780 10.803ZM11.924 21.975L11.924 21.975Q9.188 21.975 6.870 20.569L6.870 20.569Q4.590 19.239 3.279 16.921Q1.968 14.603 1.968 11.867Q1.968 9.131 3.317 6.813Q4.666 4.495 6.984 3.165L6.984 3.165Q9.378 1.759 12.152 1.759L12.152 1.759Q14.850 1.835 17.149 3.184Q19.448 4.533 20.778 6.813L20.778 6.813Q22.146 9.131 22.108 11.867Q22.070 14.603 20.683 16.921Q19.296 19.239 17.016 20.569L17.016 20.569Q14.660 21.975 11.924 21.975ZM15.496 18.289L14.774 18.289Q14.432 18.289 14.166 18.175L14.166 18.175Q14.014 18.175 13.900 17.947L13.900 17.947Q13.862 17.833 13.824 17.795L13.824 17.795L13.824 10.081Q12.874 10.157 11.031 10.214Q9.188 10.271 8.238 10.309L8.238 10.309L8.238 11.259L9.416 11.259Q9.758 11.259 9.948 11.487Q10.138 11.715 10.138 12.095L10.138 12.095L10.138 17.567Q10.138 18.289 9.416 18.289L9.416 18.289L8.352 18.289L8.352 19.239L15.496 19.239L15.496 18.289ZM11.696 8.675L11.696 8.675Q12.570 8.675 13.140 8.067Q13.710 7.459 13.710 6.642Q13.710 5.825 13.102 5.217Q12.494 4.609 11.658 4.609Q10.822 4.609 10.252 5.217Q9.682 5.825 9.682 6.642Q9.682 7.459 10.290 8.067Q10.898 8.675 11.696 8.675Z"></path></svg></span>README.md</span></span></li></ul></starlight-file-tree>  </section><section id="tab-panel-2" aria-labelledby="tab-2" role="tabpanel" hidden> <starlight-file-tree class="not-content astro-25yaqiub" data-pagefind-ignore=""><ul><li class="directory"><details><summary><span class="tree-entry"><span class=""><span><span class="sr-only">Directory</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>.vscode/</span></span></summary><ul><li class="file empty"><span class="tree-entry"><span class="">…</span></span></li></ul></details></li><li class="directory"><details open><summary><span class="tree-entry"><span class=""><span><span class="sr-only">Directory</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>src/
+</span></span></summary><ul><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M18.419 2.539L18.419 2.983L18.419 3.686L18.530 3.797L18.642 3.797Q18.826 3.760 19.178 3.704Q19.529 3.649 19.696 3.575Q19.863 3.501 19.992 3.630Q20.122 3.760 20.047 3.926Q19.973 4.093 19.918 4.444Q19.863 4.796 19.825 4.981L19.825 4.981L19.825 5.092L19.936 5.203Q19.936 5.314 20.159 5.314L20.159 5.314L21.194 5.314Q21.564 5.314 21.527 5.647L21.527 5.647L21.527 5.906Q21.453 6.128 21.232 6.572L21.232 6.572L21.084 6.831L21.084 6.942L21.157 7.016Q21.194 7.090 21.194 7.164L21.194 7.164L21.305 7.164Q21.491 7.238 21.842 7.293Q22.194 7.349 22.360 7.367Q22.526 7.386 22.601 7.589Q22.674 7.793 22.601 7.978L22.601 7.978L22.305 8.385Q22.082 8.644 22.008 8.792L22.008 8.792L22.008 9.014Q22.008 9.088 22.119 9.162L22.119 9.162L22.230 9.236L23.155 9.606Q23.340 9.680 23.396 9.846Q23.451 10.013 23.267 10.161L23.267 10.161Q22.822 10.642 22.489 10.864L22.489 10.864L22.489 11.197L22.526 11.271Q22.637 11.308 22.712 11.308L22.712 11.308L22.970 11.493Q23.303 11.715 23.488 11.789Q23.674 11.863 23.674 12.066Q23.674 12.270 23.526 12.381L23.526 12.381L22.601 12.936L22.601 13.047Q22.601 13.232 22.601 13.269Q22.601 13.306 22.712 13.417L22.712 13.417Q23.155 13.861 23.415 13.972L23.415 13.972Q23.563 14.157 23.507 14.305Q23.451 14.453 23.267 14.564L23.267 14.564Q22.601 14.786 22.341 14.897L22.341 14.897L22.305 14.934Q22.230 14.971 22.194 15.045Q22.156 15.119 22.230 15.267L22.230 15.267L22.230 15.378Q22.415 15.526 22.637 15.933L22.637 15.933L22.822 16.192Q22.896 16.266 22.878 16.414Q22.860 16.562 22.712 16.636L22.712 16.636L22.601 16.673L22.453 16.747Q22.305 16.747 22.008 16.821Q21.712 16.895 21.564 16.895L21.564 16.895L21.416 16.895Q21.416 16.932 21.361 16.987Q21.305 17.043 21.305 17.117L21.305 17.117L21.343 17.228L21.416 17.339L21.787 18.153Q21.860 18.227 21.805 18.375Q21.749 18.523 21.675 18.597L21.675 18.597L20.270 18.597Q20.159 18.745 20.159 18.967L20.159 18.967Q20.232 19.115 20.288 19.411Q20.343 19.707 20.418 19.873Q20.491 20.040 20.343 20.188Q20.195 20.336 19.936 20.336L19.936 20.336Q19.752 20.299 19.400 20.243Q19.049 20.188 18.901 20.114L18.901 20.114L18.790 20.114L18.604 20.299Q18.567 20.336 18.642 20.336L18.642 20.336L18.642 21.372Q18.642 21.742 18.308 21.742L18.308 21.742L18.087 21.742Q17.605 21.594 17.162 21.261L17.162 21.261L17.050 21.261Q16.939 21.261 16.866 21.335Q16.791 21.409 16.791 21.520L16.791 21.520Q16.791 21.668 16.736 21.964Q16.680 22.260 16.680 22.426Q16.680 22.593 16.477 22.667Q16.273 22.741 16.125 22.667L16.125 22.667Q15.756 22.297 15.311 22.075L15.311 22.075L15.200 22.075Q15.090 22.075 15.015 22.149Q14.942 22.223 14.942 22.297L14.942 22.297L14.608 23.222Q14.497 23.481 14.276 23.481L14.276 23.481Q14.201 23.481 14.165 23.407L14.165 23.407L14.128 23.370Q13.683 22.889 13.462 22.556L13.462 22.556L13.203 22.556Q13.128 22.556 13.055 22.630Q12.980 22.704 12.980 22.778L12.980 22.778L12.537 23.592Q12.425 23.740 12.222 23.740Q12.018 23.740 11.945 23.592L11.945 23.592L11.352 22.667L11.020 22.667L10.206 23.481Q10.095 23.592 9.762 23.592L9.762 23.592Q9.651 23.592 9.651 23.370L9.651 23.370L9.280 22.260Q9.243 22.186 9.169 22.186L9.169 22.186L8.837 22.186Q8.651 22.371 8.281 22.593L8.281 22.593L8.023 22.778L7.800 22.667Q7.467 22.519 7.338 22.426Q7.208 22.334 7.208 22.186L7.208 22.186Q7.097 21.853 7.097 21.150L7.097 21.150L7.060 21.113Q7.060 21.039 6.986 21.039Q6.912 21.039 6.857 20.983Q6.801 20.928 6.764 20.928L6.764 20.928L6.616 20.928L6.505 21.039L5.691 21.372Q5.543 21.483 5.395 21.409Q5.247 21.335 5.247 21.150L5.247 21.150L5.247 19.892L5.136 19.781L5.026 19.781Q4.840 19.818 4.489 19.873Q4.138 19.929 3.971 20.003Q3.804 20.077 3.675 19.947Q3.545 19.818 3.619 19.651Q3.693 19.485 3.749 19.133Q3.804 18.782 3.841 18.597L3.841 18.597L3.841 18.486L3.731 18.375L2.583 18.375Q2.250 18.375 2.250 18.042L2.250 18.042L2.250 17.783Q2.324 17.561 2.583 17.117L2.583 17.117L2.694 16.858L2.694 16.710Q2.657 16.636 2.583 16.636L2.583 16.636Q2.583 16.562 2.510 16.562L2.510 16.562L2.472 16.525Q2.287 16.525 1.936 16.469Q1.584 16.414 1.418 16.414Q1.251 16.414 1.177 16.210Q1.103 16.007 1.214 15.822L1.214 15.822Q1.548 15.489 1.769 15.008L1.769 15.008L1.769 14.786L1.584 14.638Q1.510 14.564 1.436 14.564L1.436 14.564L0.622 14.231Q0.437 14.120 0.382 13.953Q0.326 13.787 0.511 13.639L0.511 13.639Q0.696 13.565 1.066 13.269L1.066 13.269Q1.288 13.047 1.436 12.936L1.436 12.936L1.436 12.714Q1.436 12.492 1.325 12.492L1.325 12.492L0.511 12.011Q0.326 11.937 0.326 11.733Q0.326 11.530 0.511 11.456L0.511 11.456L1.436 10.864L1.436 10.642L0.622 9.828Q0.548 9.754 0.548 9.606Q0.548 9.458 0.622 9.347L0.622 9.347L0.659 9.347Q0.733 9.310 0.733 9.236L0.733 9.236L1.769 8.903L1.769 8.792Q1.843 8.718 1.806 8.533L1.806 8.533L1.769 8.422Q1.658 8.311 1.492 8.089Q1.325 7.867 1.214 7.719Q1.103 7.571 1.177 7.367Q1.251 7.164 1.418 7.127Q1.584 7.090 1.936 7.034Q2.287 6.979 2.472 6.942L2.472 6.942L2.583 6.942Q2.583 6.868 2.639 6.812Q2.694 6.757 2.694 6.683L2.694 6.683L2.694 6.572L2.583 6.461L2.250 5.647Q2.139 5.499 2.213 5.351Q2.287 5.203 2.472 5.203L2.472 5.203L3.731 5.203L3.767 5.129Q3.767 5.092 3.841 5.092L3.841 5.092L3.841 4.981Q3.619 4.278 3.619 3.945L3.619 3.945Q3.545 3.760 3.675 3.630Q3.804 3.501 3.989 3.575L3.989 3.575Q4.322 3.575 5.026 3.797L5.026 3.797L5.136 3.797L5.284 3.649Q5.321 3.575 5.247 3.575L5.247 3.575L5.247 2.539Q5.247 2.206 5.580 2.206L5.580 2.206L5.840 2.206Q6.061 2.280 6.505 2.539L6.505 2.539L6.764 2.650L6.912 2.650Q6.986 2.613 6.986 2.539L6.986 2.539Q7.060 2.539 7.060 2.465L7.060 2.465L7.097 2.428Q7.097 2.243 7.153 1.891Q7.208 1.540 7.208 1.373Q7.208 1.207 7.412 1.133Q7.615 1.059 7.800 1.133L7.800 1.133Q8.133 1.503 8.614 1.725L8.614 1.725L8.837 1.725L8.947 1.614L8.947 1.540Q8.985 1.466 9.058 1.392L9.058 1.392L9.392 0.578Q9.503 0.430 9.576 0.393Q9.651 0.356 9.872 0.356L9.872 0.356L9.983 0.467Q10.058 0.652 10.354 1.022L10.354 1.022Q10.576 1.244 10.686 1.392L10.686 1.392L10.797 1.392Q10.872 1.392 10.945 1.318L10.945 1.318L11.020 1.281L11.500 0.467Q11.648 0.282 11.815 0.263Q11.982 0.245 12.055 0.356L12.055 0.356L12.166 0.467L12.759 1.392L13.091 1.392Q13.166 1.392 13.203 1.318L13.203 1.318L13.239 1.281Q13.683 0.800 13.794 0.578L13.794 0.578Q13.869 0.504 14.017 0.504Q14.165 0.504 14.276 0.578L14.276 0.578L14.276 0.689Q14.497 1.392 14.608 1.614L14.608 1.614L14.720 1.725L14.942 1.725Q15.459 1.540 15.866 1.133L15.866 1.133Q16.052 1.059 16.255 1.133Q16.459 1.207 16.459 1.373Q16.459 1.540 16.514 1.891Q16.569 2.243 16.569 2.428L16.569 2.428L16.607 2.465Q16.607 2.539 16.680 2.539L16.680 2.539L16.791 2.539Q16.902 2.613 16.976 2.613Q17.050 2.613 17.050 2.539L17.050 2.539Q17.273 2.428 17.976 2.206L17.976 2.206Q18.160 2.095 18.290 2.187Q18.419 2.280 18.419 2.539L18.419 2.539ZM5.580 6.128L5.580 6.128L14.386 6.128Q15.090 6.128 15.422 6.239L15.422 6.239Q16.532 6.609 17.050 7.275L17.050 7.275Q17.605 7.867 17.605 8.681L17.605 8.681Q17.605 9.347 17.273 10.050L17.273 10.050Q16.902 10.605 16.348 10.975L16.348 10.975Q16.125 11.197 15.977 11.197L15.977 11.197Q16.052 11.271 16.163 11.326Q16.273 11.382 16.348 11.456L16.348 11.456L16.532 11.604Q16.939 11.974 17.050 12.233L17.050 12.233Q17.383 12.788 17.383 13.417L17.383 13.417Q17.383 13.528 17.605 13.750L17.605 13.750Q17.753 13.898 18.049 13.972L18.049 13.972Q18.197 13.972 18.549 13.972Q18.901 13.972 19.122 13.750L19.122 13.750Q19.270 13.602 19.381 13.306L19.381 13.306L19.456 13.047L19.456 12.492Q19.456 12.381 19.474 12.381Q19.492 12.381 19.566 12.381L19.566 12.381L20.380 12.381L20.380 10.864Q20.232 10.790 19.881 10.623Q19.529 10.457 19.345 10.383L19.345 10.383Q19.308 10.346 19.122 10.290Q18.938 10.235 18.901 10.161L18.901 10.161Q18.346 9.976 18.530 9.236L18.530 9.236Q19.011 8.089 19.345 7.497L19.345 7.497L19.345 7.386Q18.901 6.683 18.642 6.387L18.642 6.387Q18.197 5.832 17.716 5.425L17.716 5.425Q16.014 3.871 13.573 3.353L13.573 3.353L13.462 3.353Q12.759 4.056 12.314 4.389L12.314 4.389Q12.130 4.574 11.834 4.574Q11.538 4.574 11.352 4.389L11.352 4.389L10.317 3.353L10.206 3.353Q9.762 3.464 9.058 3.686L9.058 3.686Q7.245 4.352 5.802 5.758L5.802 5.758Q5.580 6.017 5.580 6.128ZM18.642 16.747L18.642 16.747L15.200 16.747Q14.831 16.747 14.720 16.636L14.720 16.636Q14.128 16.340 13.905 15.489L13.905 15.489L13.869 15.267Q13.683 14.601 13.683 14.231L13.683 14.231Q13.683 13.972 13.480 13.528Q13.276 13.084 12.944 12.843Q12.610 12.603 12.166 12.603L12.166 12.603L10.095 12.603L10.095 14.083L12.166 14.083Q12.277 14.083 12.296 14.101Q12.314 14.120 12.314 14.231L12.314 14.231L12.314 16.525Q12.314 16.599 12.296 16.617Q12.277 16.636 12.166 16.636L12.166 16.636L5.247 16.636Q5.469 17.006 5.950 17.450L5.950 17.450L6.061 17.450Q6.986 17.228 7.430 17.228L7.430 17.228Q7.689 17.154 7.930 17.283Q8.171 17.413 8.244 17.672L8.244 17.672L8.614 19.189L8.614 19.300Q9.540 19.670 9.983 19.781L9.983 19.781Q10.761 20.003 11.352 20.003L11.352 20.003Q11.907 20.077 12.573 20.040L12.573 20.040Q12.980 20.003 13.794 19.892L13.794 19.892Q14.386 19.781 15.534 19.300L15.534 19.300L15.534 19.189L15.866 17.672Q16.088 17.080 16.680 17.228L16.680 17.228L18.087 17.561L18.197 17.561Q18.197 17.228 18.642 16.747ZM6.283 8.681L4.914 8.681L5.247 9.347L5.284 9.458Q5.321 9.643 5.247 9.717L5.247 9.717Q5.247 9.902 4.988 10.087L4.988 10.087L4.914 10.161Q3.989 10.642 3.508 10.753L3.508 10.753L3.434 10.753Q3.397 10.790 3.397 10.864L3.397 10.864L3.397 11.456Q3.397 12.603 3.731 13.972L3.731 13.972L3.767 14.046Q3.767 14.120 3.841 14.120L3.841 14.120L6.283 14.120L6.283 8.681ZM9.872 10.272L9.872 10.272Q9.910 10.272 9.947 10.272L9.947 10.272L9.872 10.272L12.537 10.272Q12.980 10.272 13.239 10.161L13.239 10.161L13.351 10.087Q13.498 9.976 13.573 9.809Q13.646 9.643 13.628 9.402Q13.610 9.162 13.462 9.014L13.462 9.014Q13.091 8.681 12.648 8.681L12.648 8.681L9.762 8.681Q9.872 9.236 9.872 10.272ZM2.917 9.125L2.917 9.125Q2.917 9.384 3.138 9.606Q3.360 9.828 3.619 9.828Q3.878 9.828 4.100 9.606Q4.322 9.384 4.322 9.125Q4.322 8.866 4.100 8.644Q3.878 8.422 3.619 8.422Q3.360 8.422 3.138 8.644Q2.917 8.866 2.917 9.125ZM17.605 18.856L17.605 18.856Q17.605 18.597 17.402 18.375Q17.198 18.153 16.921 18.153Q16.643 18.153 16.440 18.375Q16.236 18.597 16.236 18.856Q16.236 19.115 16.440 19.318Q16.643 19.522 16.921 19.522Q17.198 19.522 17.402 19.337Q17.605 19.152 17.605 18.856ZM6.764 18.153L6.764 18.153Q6.468 18.153 6.265 18.375Q6.061 18.597 6.061 18.856Q6.061 19.115 6.265 19.318Q6.468 19.522 6.746 19.522Q7.023 19.522 7.227 19.318Q7.430 19.115 7.430 18.856Q7.430 18.597 7.227 18.375Q7.023 18.153 6.764 18.153ZM12.537 2.983L12.537 2.983Q12.537 2.724 12.352 2.520Q12.166 2.317 11.852 2.317Q11.538 2.317 11.334 2.502Q11.131 2.687 11.131 2.983Q11.131 3.279 11.316 3.482Q11.500 3.686 11.834 3.686L11.834 3.686Q12.314 3.686 12.537 2.983ZM20.047 9.939L20.047 9.939Q20.306 9.939 20.529 9.717Q20.750 9.495 20.750 9.236Q20.750 8.977 20.529 8.755Q20.306 8.533 20.047 8.533Q19.788 8.533 19.566 8.755Q19.345 8.977 19.345 9.254Q19.345 9.532 19.529 9.735Q19.715 9.939 20.047 9.939Z"></path></svg></span>main.rs</span></span></li></ul></details></li><li class="directory"><details open><summary><span class="tree-entry"><span class=""><span><span class="sr-only">Directory</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>target/
+</span></span></summary><ul><li class="directory"><details><summary><span class="tree-entry"><span class=""><span><span class="sr-only">Directory</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>debug/</span></span></summary><ul><li class="file empty"><span class="tree-entry"><span class="">…</span></span></li></ul></details></li><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M0.734 13.269L0.562 10.732Q1.938 10.732 2.497 10.087L2.497 10.087Q2.884 9.614 2.884 8.711L2.884 8.711Q2.884 8.324 2.798 7.571Q2.712 6.819 2.712 6.410Q2.712 6.002 2.669 5.185L2.669 5.185Q2.583 4.454 2.583 4.153L2.583 4.153Q2.583 2.089 3.787 1.099Q4.991 0.111 7.184 0.111L7.184 0.111L8.259 0.111L8.259 2.648L7.700 2.648Q6.754 2.648 6.345 3.185Q5.937 3.723 5.937 4.798L5.937 4.798Q5.937 5.056 6.023 5.572L6.023 5.572Q6.109 6.217 6.109 6.561L6.109 6.561Q6.109 6.819 6.152 7.378L6.152 7.378Q6.238 8.152 6.238 8.582L6.238 8.582Q6.238 10.216 5.550 11.033L5.550 11.033Q4.948 11.764 3.658 12.065L3.658 12.065Q4.948 12.409 5.550 13.097L5.550 13.097Q6.238 13.957 6.238 15.548L6.238 15.548Q6.238 16.021 6.152 16.795L6.152 16.795Q6.066 17.354 6.088 17.612Q6.109 17.870 6.023 18.515L6.023 18.515Q5.937 18.988 5.937 19.203L5.937 19.203Q5.937 20.278 6.345 20.815Q6.754 21.353 7.700 21.353L7.700 21.353L8.259 21.353L8.259 23.890L7.184 23.890Q2.712 23.890 2.712 19.848L2.712 19.848Q2.712 18.386 2.862 17.590Q3.013 16.795 3.013 15.290L3.013 15.290Q3.013 13.269 0.734 13.269L0.734 13.269ZM23.438 10.732L23.438 13.011Q21.159 13.011 21.159 15.032L21.159 15.032Q21.159 15.419 21.224 16.171Q21.288 16.924 21.288 17.311L21.288 17.311Q21.417 18.128 21.417 19.590L21.417 19.590Q21.417 23.632 16.859 23.632L16.859 23.632L15.784 23.632L15.784 21.353L16.300 21.353Q17.246 21.353 17.654 20.815Q18.063 20.278 18.063 19.203Q18.063 18.128 17.934 17.569L17.934 17.569Q17.934 17.225 17.848 16.558Q17.762 15.892 17.762 15.548L17.762 15.548Q17.762 13.957 18.450 13.097L18.450 13.097Q19.052 12.409 20.342 12.065L20.342 12.065Q19.052 11.764 18.450 11.033L18.450 11.033Q17.762 10.216 17.762 8.582L17.762 8.582Q17.762 8.152 17.848 7.378L17.848 7.378Q17.934 6.819 17.934 6.561L17.934 6.561Q18.063 5.873 18.063 4.841Q18.063 3.809 17.633 3.293Q17.203 2.777 16.300 2.648L16.300 2.648L15.784 2.648L15.784 0.111L16.859 0.111Q19.009 0.111 20.213 1.099Q21.417 2.089 21.417 4.153L21.417 4.153Q21.417 4.540 21.352 5.292Q21.288 6.045 21.288 6.432L21.288 6.432Q21.159 7.249 21.116 8.711L21.116 8.711Q21.159 9.614 21.503 10.087L21.503 10.087Q22.062 10.732 23.438 10.732L23.438 10.732Z"></path></svg></span>.rustc_info.json</span></span></li><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M1.082 16.876L1.082 14.014L22.918 14.014L22.918 16.876L1.082 16.876ZM1.082 9.986L1.082 7.071L13.272 7.071L13.272 9.986L1.082 9.986ZM1.082 3.096L1.082 0.181L22.918 0.181L22.918 3.096L1.082 3.096ZM1.082 23.819L1.082 20.904L17.300 20.904L17.300 23.819L1.082 23.819Z"></path></svg></span>CACHEDIR.TAG</span></span></li></ul></details></li><li class="directory"><details open><summary><span class="tree-entry"><span class=""><span><span class="sr-only">Directory</span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M22.073 4.900L22.073 4.900L12.148 4.900L12.148 3.950Q12.148 3.125 11.585 2.563Q11.023 2 10.198 2L10.198 2L0.048 2L0.048 22L23.948 22L23.948 6.850Q23.998 6.025 23.448 5.462Q22.898 4.900 22.073 4.900Z"></path></svg></span>ui/
+</span></span></summary><ul><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M1.082 16.876L1.082 14.014L22.918 14.014L22.918 16.876L1.082 16.876ZM1.082 9.986L1.082 7.071L13.272 7.071L13.272 9.986L1.082 9.986ZM1.082 3.096L1.082 0.181L22.918 0.181L22.918 3.096L1.082 3.096ZM1.082 23.819L1.082 20.904L17.300 20.904L17.300 23.819L1.082 23.819Z"></path></svg></span>app-window.slint</span> <span class="comment"> The <strong>main</strong> Slint file</span></span></li></ul></details></li><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M18.419 2.539L18.419 2.983L18.419 3.686L18.530 3.797L18.642 3.797Q18.826 3.760 19.178 3.704Q19.529 3.649 19.696 3.575Q19.863 3.501 19.992 3.630Q20.122 3.760 20.047 3.926Q19.973 4.093 19.918 4.444Q19.863 4.796 19.825 4.981L19.825 4.981L19.825 5.092L19.936 5.203Q19.936 5.314 20.159 5.314L20.159 5.314L21.194 5.314Q21.564 5.314 21.527 5.647L21.527 5.647L21.527 5.906Q21.453 6.128 21.232 6.572L21.232 6.572L21.084 6.831L21.084 6.942L21.157 7.016Q21.194 7.090 21.194 7.164L21.194 7.164L21.305 7.164Q21.491 7.238 21.842 7.293Q22.194 7.349 22.360 7.367Q22.526 7.386 22.601 7.589Q22.674 7.793 22.601 7.978L22.601 7.978L22.305 8.385Q22.082 8.644 22.008 8.792L22.008 8.792L22.008 9.014Q22.008 9.088 22.119 9.162L22.119 9.162L22.230 9.236L23.155 9.606Q23.340 9.680 23.396 9.846Q23.451 10.013 23.267 10.161L23.267 10.161Q22.822 10.642 22.489 10.864L22.489 10.864L22.489 11.197L22.526 11.271Q22.637 11.308 22.712 11.308L22.712 11.308L22.970 11.493Q23.303 11.715 23.488 11.789Q23.674 11.863 23.674 12.066Q23.674 12.270 23.526 12.381L23.526 12.381L22.601 12.936L22.601 13.047Q22.601 13.232 22.601 13.269Q22.601 13.306 22.712 13.417L22.712 13.417Q23.155 13.861 23.415 13.972L23.415 13.972Q23.563 14.157 23.507 14.305Q23.451 14.453 23.267 14.564L23.267 14.564Q22.601 14.786 22.341 14.897L22.341 14.897L22.305 14.934Q22.230 14.971 22.194 15.045Q22.156 15.119 22.230 15.267L22.230 15.267L22.230 15.378Q22.415 15.526 22.637 15.933L22.637 15.933L22.822 16.192Q22.896 16.266 22.878 16.414Q22.860 16.562 22.712 16.636L22.712 16.636L22.601 16.673L22.453 16.747Q22.305 16.747 22.008 16.821Q21.712 16.895 21.564 16.895L21.564 16.895L21.416 16.895Q21.416 16.932 21.361 16.987Q21.305 17.043 21.305 17.117L21.305 17.117L21.343 17.228L21.416 17.339L21.787 18.153Q21.860 18.227 21.805 18.375Q21.749 18.523 21.675 18.597L21.675 18.597L20.270 18.597Q20.159 18.745 20.159 18.967L20.159 18.967Q20.232 19.115 20.288 19.411Q20.343 19.707 20.418 19.873Q20.491 20.040 20.343 20.188Q20.195 20.336 19.936 20.336L19.936 20.336Q19.752 20.299 19.400 20.243Q19.049 20.188 18.901 20.114L18.901 20.114L18.790 20.114L18.604 20.299Q18.567 20.336 18.642 20.336L18.642 20.336L18.642 21.372Q18.642 21.742 18.308 21.742L18.308 21.742L18.087 21.742Q17.605 21.594 17.162 21.261L17.162 21.261L17.050 21.261Q16.939 21.261 16.866 21.335Q16.791 21.409 16.791 21.520L16.791 21.520Q16.791 21.668 16.736 21.964Q16.680 22.260 16.680 22.426Q16.680 22.593 16.477 22.667Q16.273 22.741 16.125 22.667L16.125 22.667Q15.756 22.297 15.311 22.075L15.311 22.075L15.200 22.075Q15.090 22.075 15.015 22.149Q14.942 22.223 14.942 22.297L14.942 22.297L14.608 23.222Q14.497 23.481 14.276 23.481L14.276 23.481Q14.201 23.481 14.165 23.407L14.165 23.407L14.128 23.370Q13.683 22.889 13.462 22.556L13.462 22.556L13.203 22.556Q13.128 22.556 13.055 22.630Q12.980 22.704 12.980 22.778L12.980 22.778L12.537 23.592Q12.425 23.740 12.222 23.740Q12.018 23.740 11.945 23.592L11.945 23.592L11.352 22.667L11.020 22.667L10.206 23.481Q10.095 23.592 9.762 23.592L9.762 23.592Q9.651 23.592 9.651 23.370L9.651 23.370L9.280 22.260Q9.243 22.186 9.169 22.186L9.169 22.186L8.837 22.186Q8.651 22.371 8.281 22.593L8.281 22.593L8.023 22.778L7.800 22.667Q7.467 22.519 7.338 22.426Q7.208 22.334 7.208 22.186L7.208 22.186Q7.097 21.853 7.097 21.150L7.097 21.150L7.060 21.113Q7.060 21.039 6.986 21.039Q6.912 21.039 6.857 20.983Q6.801 20.928 6.764 20.928L6.764 20.928L6.616 20.928L6.505 21.039L5.691 21.372Q5.543 21.483 5.395 21.409Q5.247 21.335 5.247 21.150L5.247 21.150L5.247 19.892L5.136 19.781L5.026 19.781Q4.840 19.818 4.489 19.873Q4.138 19.929 3.971 20.003Q3.804 20.077 3.675 19.947Q3.545 19.818 3.619 19.651Q3.693 19.485 3.749 19.133Q3.804 18.782 3.841 18.597L3.841 18.597L3.841 18.486L3.731 18.375L2.583 18.375Q2.250 18.375 2.250 18.042L2.250 18.042L2.250 17.783Q2.324 17.561 2.583 17.117L2.583 17.117L2.694 16.858L2.694 16.710Q2.657 16.636 2.583 16.636L2.583 16.636Q2.583 16.562 2.510 16.562L2.510 16.562L2.472 16.525Q2.287 16.525 1.936 16.469Q1.584 16.414 1.418 16.414Q1.251 16.414 1.177 16.210Q1.103 16.007 1.214 15.822L1.214 15.822Q1.548 15.489 1.769 15.008L1.769 15.008L1.769 14.786L1.584 14.638Q1.510 14.564 1.436 14.564L1.436 14.564L0.622 14.231Q0.437 14.120 0.382 13.953Q0.326 13.787 0.511 13.639L0.511 13.639Q0.696 13.565 1.066 13.269L1.066 13.269Q1.288 13.047 1.436 12.936L1.436 12.936L1.436 12.714Q1.436 12.492 1.325 12.492L1.325 12.492L0.511 12.011Q0.326 11.937 0.326 11.733Q0.326 11.530 0.511 11.456L0.511 11.456L1.436 10.864L1.436 10.642L0.622 9.828Q0.548 9.754 0.548 9.606Q0.548 9.458 0.622 9.347L0.622 9.347L0.659 9.347Q0.733 9.310 0.733 9.236L0.733 9.236L1.769 8.903L1.769 8.792Q1.843 8.718 1.806 8.533L1.806 8.533L1.769 8.422Q1.658 8.311 1.492 8.089Q1.325 7.867 1.214 7.719Q1.103 7.571 1.177 7.367Q1.251 7.164 1.418 7.127Q1.584 7.090 1.936 7.034Q2.287 6.979 2.472 6.942L2.472 6.942L2.583 6.942Q2.583 6.868 2.639 6.812Q2.694 6.757 2.694 6.683L2.694 6.683L2.694 6.572L2.583 6.461L2.250 5.647Q2.139 5.499 2.213 5.351Q2.287 5.203 2.472 5.203L2.472 5.203L3.731 5.203L3.767 5.129Q3.767 5.092 3.841 5.092L3.841 5.092L3.841 4.981Q3.619 4.278 3.619 3.945L3.619 3.945Q3.545 3.760 3.675 3.630Q3.804 3.501 3.989 3.575L3.989 3.575Q4.322 3.575 5.026 3.797L5.026 3.797L5.136 3.797L5.284 3.649Q5.321 3.575 5.247 3.575L5.247 3.575L5.247 2.539Q5.247 2.206 5.580 2.206L5.580 2.206L5.840 2.206Q6.061 2.280 6.505 2.539L6.505 2.539L6.764 2.650L6.912 2.650Q6.986 2.613 6.986 2.539L6.986 2.539Q7.060 2.539 7.060 2.465L7.060 2.465L7.097 2.428Q7.097 2.243 7.153 1.891Q7.208 1.540 7.208 1.373Q7.208 1.207 7.412 1.133Q7.615 1.059 7.800 1.133L7.800 1.133Q8.133 1.503 8.614 1.725L8.614 1.725L8.837 1.725L8.947 1.614L8.947 1.540Q8.985 1.466 9.058 1.392L9.058 1.392L9.392 0.578Q9.503 0.430 9.576 0.393Q9.651 0.356 9.872 0.356L9.872 0.356L9.983 0.467Q10.058 0.652 10.354 1.022L10.354 1.022Q10.576 1.244 10.686 1.392L10.686 1.392L10.797 1.392Q10.872 1.392 10.945 1.318L10.945 1.318L11.020 1.281L11.500 0.467Q11.648 0.282 11.815 0.263Q11.982 0.245 12.055 0.356L12.055 0.356L12.166 0.467L12.759 1.392L13.091 1.392Q13.166 1.392 13.203 1.318L13.203 1.318L13.239 1.281Q13.683 0.800 13.794 0.578L13.794 0.578Q13.869 0.504 14.017 0.504Q14.165 0.504 14.276 0.578L14.276 0.578L14.276 0.689Q14.497 1.392 14.608 1.614L14.608 1.614L14.720 1.725L14.942 1.725Q15.459 1.540 15.866 1.133L15.866 1.133Q16.052 1.059 16.255 1.133Q16.459 1.207 16.459 1.373Q16.459 1.540 16.514 1.891Q16.569 2.243 16.569 2.428L16.569 2.428L16.607 2.465Q16.607 2.539 16.680 2.539L16.680 2.539L16.791 2.539Q16.902 2.613 16.976 2.613Q17.050 2.613 17.050 2.539L17.050 2.539Q17.273 2.428 17.976 2.206L17.976 2.206Q18.160 2.095 18.290 2.187Q18.419 2.280 18.419 2.539L18.419 2.539ZM5.580 6.128L5.580 6.128L14.386 6.128Q15.090 6.128 15.422 6.239L15.422 6.239Q16.532 6.609 17.050 7.275L17.050 7.275Q17.605 7.867 17.605 8.681L17.605 8.681Q17.605 9.347 17.273 10.050L17.273 10.050Q16.902 10.605 16.348 10.975L16.348 10.975Q16.125 11.197 15.977 11.197L15.977 11.197Q16.052 11.271 16.163 11.326Q16.273 11.382 16.348 11.456L16.348 11.456L16.532 11.604Q16.939 11.974 17.050 12.233L17.050 12.233Q17.383 12.788 17.383 13.417L17.383 13.417Q17.383 13.528 17.605 13.750L17.605 13.750Q17.753 13.898 18.049 13.972L18.049 13.972Q18.197 13.972 18.549 13.972Q18.901 13.972 19.122 13.750L19.122 13.750Q19.270 13.602 19.381 13.306L19.381 13.306L19.456 13.047L19.456 12.492Q19.456 12.381 19.474 12.381Q19.492 12.381 19.566 12.381L19.566 12.381L20.380 12.381L20.380 10.864Q20.232 10.790 19.881 10.623Q19.529 10.457 19.345 10.383L19.345 10.383Q19.308 10.346 19.122 10.290Q18.938 10.235 18.901 10.161L18.901 10.161Q18.346 9.976 18.530 9.236L18.530 9.236Q19.011 8.089 19.345 7.497L19.345 7.497L19.345 7.386Q18.901 6.683 18.642 6.387L18.642 6.387Q18.197 5.832 17.716 5.425L17.716 5.425Q16.014 3.871 13.573 3.353L13.573 3.353L13.462 3.353Q12.759 4.056 12.314 4.389L12.314 4.389Q12.130 4.574 11.834 4.574Q11.538 4.574 11.352 4.389L11.352 4.389L10.317 3.353L10.206 3.353Q9.762 3.464 9.058 3.686L9.058 3.686Q7.245 4.352 5.802 5.758L5.802 5.758Q5.580 6.017 5.580 6.128ZM18.642 16.747L18.642 16.747L15.200 16.747Q14.831 16.747 14.720 16.636L14.720 16.636Q14.128 16.340 13.905 15.489L13.905 15.489L13.869 15.267Q13.683 14.601 13.683 14.231L13.683 14.231Q13.683 13.972 13.480 13.528Q13.276 13.084 12.944 12.843Q12.610 12.603 12.166 12.603L12.166 12.603L10.095 12.603L10.095 14.083L12.166 14.083Q12.277 14.083 12.296 14.101Q12.314 14.120 12.314 14.231L12.314 14.231L12.314 16.525Q12.314 16.599 12.296 16.617Q12.277 16.636 12.166 16.636L12.166 16.636L5.247 16.636Q5.469 17.006 5.950 17.450L5.950 17.450L6.061 17.450Q6.986 17.228 7.430 17.228L7.430 17.228Q7.689 17.154 7.930 17.283Q8.171 17.413 8.244 17.672L8.244 17.672L8.614 19.189L8.614 19.300Q9.540 19.670 9.983 19.781L9.983 19.781Q10.761 20.003 11.352 20.003L11.352 20.003Q11.907 20.077 12.573 20.040L12.573 20.040Q12.980 20.003 13.794 19.892L13.794 19.892Q14.386 19.781 15.534 19.300L15.534 19.300L15.534 19.189L15.866 17.672Q16.088 17.080 16.680 17.228L16.680 17.228L18.087 17.561L18.197 17.561Q18.197 17.228 18.642 16.747ZM6.283 8.681L4.914 8.681L5.247 9.347L5.284 9.458Q5.321 9.643 5.247 9.717L5.247 9.717Q5.247 9.902 4.988 10.087L4.988 10.087L4.914 10.161Q3.989 10.642 3.508 10.753L3.508 10.753L3.434 10.753Q3.397 10.790 3.397 10.864L3.397 10.864L3.397 11.456Q3.397 12.603 3.731 13.972L3.731 13.972L3.767 14.046Q3.767 14.120 3.841 14.120L3.841 14.120L6.283 14.120L6.283 8.681ZM9.872 10.272L9.872 10.272Q9.910 10.272 9.947 10.272L9.947 10.272L9.872 10.272L12.537 10.272Q12.980 10.272 13.239 10.161L13.239 10.161L13.351 10.087Q13.498 9.976 13.573 9.809Q13.646 9.643 13.628 9.402Q13.610 9.162 13.462 9.014L13.462 9.014Q13.091 8.681 12.648 8.681L12.648 8.681L9.762 8.681Q9.872 9.236 9.872 10.272ZM2.917 9.125L2.917 9.125Q2.917 9.384 3.138 9.606Q3.360 9.828 3.619 9.828Q3.878 9.828 4.100 9.606Q4.322 9.384 4.322 9.125Q4.322 8.866 4.100 8.644Q3.878 8.422 3.619 8.422Q3.360 8.422 3.138 8.644Q2.917 8.866 2.917 9.125ZM17.605 18.856L17.605 18.856Q17.605 18.597 17.402 18.375Q17.198 18.153 16.921 18.153Q16.643 18.153 16.440 18.375Q16.236 18.597 16.236 18.856Q16.236 19.115 16.440 19.318Q16.643 19.522 16.921 19.522Q17.198 19.522 17.402 19.337Q17.605 19.152 17.605 18.856ZM6.764 18.153L6.764 18.153Q6.468 18.153 6.265 18.375Q6.061 18.597 6.061 18.856Q6.061 19.115 6.265 19.318Q6.468 19.522 6.746 19.522Q7.023 19.522 7.227 19.318Q7.430 19.115 7.430 18.856Q7.430 18.597 7.227 18.375Q7.023 18.153 6.764 18.153ZM12.537 2.983L12.537 2.983Q12.537 2.724 12.352 2.520Q12.166 2.317 11.852 2.317Q11.538 2.317 11.334 2.502Q11.131 2.687 11.131 2.983Q11.131 3.279 11.316 3.482Q11.500 3.686 11.834 3.686L11.834 3.686Q12.314 3.686 12.537 2.983ZM20.047 9.939L20.047 9.939Q20.306 9.939 20.529 9.717Q20.750 9.495 20.750 9.236Q20.750 8.977 20.529 8.755Q20.306 8.533 20.047 8.533Q19.788 8.533 19.566 8.755Q19.345 8.977 19.345 9.254Q19.345 9.532 19.529 9.735Q19.715 9.939 20.047 9.939Z"></path></svg></span>build.rs</span></span></li><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M1.082 16.876L1.082 14.014L22.918 14.014L22.918 16.876L1.082 16.876ZM1.082 9.986L1.082 7.071L13.272 7.071L13.272 9.986L1.082 9.986ZM1.082 3.096L1.082 0.181L22.918 0.181L22.918 3.096L1.082 3.096ZM1.082 23.819L1.082 20.904L17.300 20.904L17.300 23.819L1.082 23.819Z"></path></svg></span>Cargo.Toml</span></span></li><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M14.768 8.750L14.768 8.750Q14.636 7.067 13.431 5.994Q12.227 4.922 10.445 4.823L10.445 4.823L8.894 4.823Q8.795 3.602 9.356 2.710L9.356 2.710Q10.016 1.556 11.484 1.407Q12.953 1.259 13.943 2.248L13.943 2.248Q14.768 3.206 14.768 4.724L14.768 4.724Q14.768 5.021 14.900 5.152L14.900 5.152L15.824 6.076Q16.253 4.756 15.923 3.271L15.923 3.271Q15.527 1.919 14.454 1.093Q13.382 0.268 11.897 0.203L11.897 0.203Q10.940 0.203 10.280 0.401L10.280 0.401Q9.488 0.631 8.894 1.226L8.894 1.226Q8.168 1.919 7.821 3.041Q7.475 4.163 7.739 5.318L7.739 5.318Q8.036 6.572 8.993 7.495L8.993 7.495Q9.323 7.826 10.148 8.222L10.148 8.222Q10.511 8.387 10.791 8.172Q11.072 7.957 11.072 7.628L11.072 7.628Q11.072 6.934 10.346 6.803L10.346 6.803Q10.247 6.803 10.049 6.572L10.049 6.572L10.049 6.473Q10.346 6.407 10.692 6.489Q11.039 6.572 11.270 6.803L11.270 6.803Q11.732 7.265 11.567 8.024L11.567 8.024Q11.435 8.585 10.989 8.799Q10.544 9.014 9.917 8.849L9.917 8.849Q8.366 8.419 7.574 6.803L7.574 6.803Q7.508 6.637 7.359 6.324Q7.211 6.011 7.145 5.846L7.145 5.846Q6.518 6.506 6.188 6.968L6.188 6.968Q5.759 7.628 5.594 8.321L5.594 8.321Q5.000 11.093 7.046 12.974L7.046 12.974Q7.145 13.073 7.178 13.155Q7.211 13.238 7.145 13.403L7.145 13.403Q6.980 14.822 6.749 15.746L6.749 15.746Q6.584 16.637 6.320 18.336Q6.056 20.035 5.907 20.894Q5.759 21.752 5.924 22.577L5.924 22.577Q6.089 23.236 6.749 23.501L6.749 23.501Q6.782 23.303 6.831 22.890Q6.881 22.478 6.947 22.247L6.947 22.247Q7.112 21.389 7.359 19.689Q7.607 17.989 7.772 17.099L7.772 17.099Q7.871 16.571 8.019 15.498Q8.168 14.426 8.300 13.898L8.300 13.898Q8.300 13.601 8.597 13.601L8.597 13.601Q8.729 13.601 8.762 13.700Q8.795 13.799 8.795 13.997L8.795 13.997Q8.663 15.218 8.300 17.000L8.300 17.000Q8.135 18.089 7.805 20.102L7.805 20.102Q7.409 22.412 7.244 23.501L7.244 23.501Q7.244 23.567 7.310 23.633L7.310 23.633L7.343 23.699Q7.607 23.699 8.069 23.748Q8.531 23.797 8.795 23.797L8.795 23.797Q9.422 23.797 10.049 22.973L10.049 22.973Q10.478 22.544 10.148 21.851L10.148 21.851Q9.950 21.653 9.950 21.521L9.950 21.521Q9.488 20.927 10.148 20.597L10.148 20.597Q10.181 20.564 10.346 20.514Q10.511 20.465 10.544 20.399L10.544 20.399Q10.709 20.333 10.758 20.135Q10.808 19.937 10.643 19.772L10.643 19.772L10.346 19.474Q10.016 19.079 9.851 18.947Q9.686 18.815 9.735 18.567Q9.785 18.320 9.933 18.221Q10.082 18.122 10.445 17.973Q10.808 17.825 10.973 17.726Q11.138 17.627 11.171 17.495Q11.204 17.363 11.072 17.198L11.072 17.198Q10.874 17.000 10.742 16.802L10.742 16.802Q10.544 16.571 10.577 16.241Q10.610 15.911 10.841 15.729Q11.072 15.548 11.270 15.548L11.270 15.548Q11.567 15.416 11.600 15.152L11.600 15.152Q11.567 14.987 11.633 14.673Q11.699 14.360 11.699 14.228L11.699 14.228Q11.699 14.129 11.765 13.997Q11.831 13.865 11.897 13.799L11.897 13.799Q12.194 13.502 13.019 13.073L13.019 13.073Q14.075 12.314 14.504 11.208Q14.933 10.103 14.768 8.750ZM18.497 20.498L18.497 20.498Q18.497 20.102 18.068 20.102L18.068 20.102Q17.837 20.102 17.738 20.069L17.738 20.069Q17.540 20.003 17.474 19.772L17.474 19.772Q17.309 19.309 17.474 18.848L17.474 18.848Q17.804 18.188 17.045 18.023L17.045 18.023Q16.946 18.023 16.715 17.973Q16.484 17.924 16.319 17.924L16.319 17.924Q16.022 17.924 16.022 17.627L16.022 17.627Q16.022 17.528 15.972 17.313Q15.923 17.099 15.923 17.000L15.923 17.000Q15.923 16.802 16.055 16.604L16.055 16.604Q16.121 16.471 16.302 16.257Q16.484 16.043 16.467 15.927Q16.451 15.812 16.220 15.647L16.220 15.647Q16.187 15.614 16.022 15.515Q15.857 15.416 15.824 15.350L15.824 15.350Q15.527 15.185 15.477 15.020Q15.428 14.855 15.593 14.525L15.593 14.525Q15.824 14.327 15.824 14.228L15.824 14.228Q16.088 13.931 15.923 13.601L15.923 13.601L15.824 13.436Q15.659 13.040 15.494 12.875L15.494 12.875Q15.362 12.578 15.494 12.248L15.494 12.248Q16.814 9.640 15.824 7.198L15.824 7.198Q15.032 5.515 13.118 5.053L13.118 5.053L13.019 5.152Q13.085 5.186 13.184 5.351Q13.283 5.515 13.349 5.549L13.349 5.549Q15.296 7.198 15.296 9.575L15.296 9.575Q15.296 12.248 13.019 13.898L13.019 13.898Q12.854 13.997 12.804 14.129Q12.755 14.261 12.821 14.426L12.821 14.426Q13.019 14.921 13.382 15.911Q13.745 16.901 13.943 17.396L13.943 17.396L16.418 23.171L16.484 23.270Q16.583 23.402 16.748 23.402L16.748 23.402Q17.672 22.940 18.167 22.148Q18.662 21.356 18.497 20.498ZM12.293 14.426L12.293 14.426Q12.260 14.624 12.210 14.954Q12.161 15.284 12.095 15.449L12.095 15.449L12.062 15.647Q12.029 15.944 12.095 16.076L12.095 16.076L14.273 21.422Q14.636 22.346 15.296 22.873L15.296 22.873Q15.692 23.072 15.824 23.204L15.824 23.204L15.923 23.072Q14.768 20.201 12.293 14.426Z"></path></svg></span>LICENSE</span></span></li><li class="file"><span class="tree-entry"><span class=""><span><svg width="16" height="16" class="tree-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M23.780 10.803L23.818 10.803Q23.628 8.029 21.918 5.331L21.918 5.331Q20.664 3.469 18.916 2.234Q17.168 0.999 15.002 0.467L15.002 0.467Q13.748 0.125 12.646 0.125L12.646 0.125L10.746 0.125Q7.326 0.467 4.438 2.595L4.438 2.595Q1.132 5.369 0.296 9.245L0.296 9.245Q0.068 10.423 0.068 11.145L0.068 11.145L0.068 13.045Q0.448 16.351 2.082 18.631L2.082 18.631Q4.172 21.709 7.288 22.925L7.288 22.925Q9.454 23.685 11.202 23.875L11.202 23.875L13.102 23.875Q17.434 23.495 20.474 20.303L20.474 20.303Q22.944 17.833 23.666 14.375L23.666 14.375Q23.742 14.071 23.799 13.539Q23.856 13.007 23.932 12.703L23.932 12.703L23.932 11.411Q23.780 11.145 23.780 10.803L23.780 10.803ZM11.924 21.975L11.924 21.975Q9.188 21.975 6.870 20.569L6.870 20.569Q4.590 19.239 3.279 16.921Q1.968 14.603 1.968 11.867Q1.968 9.131 3.317 6.813Q4.666 4.495 6.984 3.165L6.984 3.165Q9.378 1.759 12.152 1.759L12.152 1.759Q14.850 1.835 17.149 3.184Q19.448 4.533 20.778 6.813L20.778 6.813Q22.146 9.131 22.108 11.867Q22.070 14.603 20.683 16.921Q19.296 19.239 17.016 20.569L17.016 20.569Q14.660 21.975 11.924 21.975ZM15.496 18.289L14.774 18.289Q14.432 18.289 14.166 18.175L14.166 18.175Q14.014 18.175 13.900 17.947L13.900 17.947Q13.862 17.833 13.824 17.795L13.824 17.795L13.824 10.081Q12.874 10.157 11.031 10.214Q9.188 10.271 8.238 10.309L8.238 10.309L8.238 11.259L9.416 11.259Q9.758 11.259 9.948 11.487Q10.138 11.715 10.138 12.095L10.138 12.095L10.138 17.567Q10.138 18.289 9.416 18.289L9.416 18.289L8.352 18.289L8.352 19.239L15.496 19.239L15.496 18.289ZM11.696 8.675L11.696 8.675Q12.570 8.675 13.140 8.067Q13.710 7.459 13.710 6.642Q13.710 5.825 13.102 5.217Q12.494 4.609 11.658 4.609Q10.822 4.609 10.252 5.217Q9.682 5.825 9.682 6.642Q9.682 7.459 10.290 8.067Q10.898 8.675 11.696 8.675Z"></path></svg></span>README.md</span></span></li></ul></starlight-file-tree>  </section> <starlight-tabs-restore class="astro-lisrjliy"></starlight-tabs-restore> </starlight-tabs>  
+<p>The <code dir="auto">src</code> folder is for the apps business logic. While the <code dir="auto">ui</code> folder contains the Slint files that define the user interface.</p> </div> <footer class="sl-flex astro-eifwj7ft"> <div class="meta sl-flex astro-eifwj7ft">   </div> <div class="pagination-links astro-dyqvxwuo" dir="ltr">  <a href="/tng/getting-started/which_language" rel="next" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg>  <span class="astro-dyqvxwuo"> Next <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Which language?</span> </span> </a> </div>   </footer>  </div> </div>   </main> </div> </div>  </div> </div>  </body></html>
\ No newline at end of file
diff --git a/snapshots/tng/getting-started/which_language/index.html b/snapshots/tng/getting-started/which_language/index.html
index 26ac1872d..cbef7a5a2 100644
--- a/snapshots/tng/getting-started/which_language/index.html
+++ b/snapshots/tng/getting-started/which_language/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
@@ -89,4 +90,4 @@ <h2 id="javascript">JavaScript</h2>
 <p>If you are a JavaScript developer, you can use JavaScript to write your business logic. We recommend using TypeScript as it better maps
 with the static typing of the Slint UI language. The code ends up running on runtime (not the browser) and Slint currently supports NodeJS, Deno and Bun.</p>
 <h2 id="python-beta">Python (beta)</h2>
-<p>If you are a Python developer, you can use Python to write your business logic. We are currently working on a Python version of Slint and if you want to experiment with the beta version follow the link.</p> </div> <footer class="sl-flex astro-eifwj7ft"> <div class="meta sl-flex astro-eifwj7ft">   </div> <div class="pagination-links astro-dyqvxwuo" dir="ltr"> <a href="/tng/getting-started/intro" rel="prev" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg>  <span class="astro-dyqvxwuo"> Previous <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Welcome</span> </span> </a> <a href="/tng/guide/philosophy" rel="next" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg>  <span class="astro-dyqvxwuo"> Next <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Introduction</span> </span> </a> </div>   </footer>  </div> </div>   </main> </div> </div>  </div> </div>  </body></html>
\ No newline at end of file
+<p>If you are a Python developer, you can use Python to write your business logic. We are currently working on a Python version of Slint and if you want to experiment with the beta version follow the link.</p> </div> <footer class="sl-flex astro-eifwj7ft"> <div class="meta sl-flex astro-eifwj7ft">   </div> <div class="pagination-links astro-dyqvxwuo" dir="ltr"> <a href="/tng/getting-started/intro" rel="prev" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg>  <span class="astro-dyqvxwuo"> Previous <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Welcome</span> </span> </a> <a href="/tng/guide/intro" rel="next" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg>  <span class="astro-dyqvxwuo"> Next <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Introduction</span> </span> </a> </div>   </footer>  </div> </div>   </main> </div> </div>  </div> </div>  </body></html>
\ No newline at end of file
diff --git a/snapshots/tng/guide/animation/index.html b/snapshots/tng/guide/animation/index.html
index ed0b60816..3ccd6435c 100644
--- a/snapshots/tng/guide/animation/index.html
+++ b/snapshots/tng/guide/animation/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/guide/philosophy/index.html b/snapshots/tng/guide/basics/index.html
similarity index 64%
rename from snapshots/tng/guide/philosophy/index.html
rename to snapshots/tng/guide/basics/index.html
index 1a020e71b..e22bbaa08 100644
--- a/snapshots/tng/guide/philosophy/index.html
+++ b/snapshots/tng/guide/basics/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en" dir="ltr" data-has-toc data-has-sidebar data-theme="dark" class="astro-77jcyavj"> <head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Basics | Slint Language Docs</title><link rel="canonical" href="https://snapshots.slint.dev/tng/guide/philosophy/"/><link rel="sitemap" href="/tng/sitemap-index.xml"/><link rel="shortcut icon" href="/tng/favicon.svg" type="image/svg+xml"/><meta name="generator" content="Astro v4.16.7"/><meta name="generator" content="Starlight v0.28.4"/><meta property="og:title" content="Basics"/><meta property="og:type" content="article"/><meta property="og:url" content="https://snapshots.slint.dev/tng/guide/philosophy/"/><meta property="og:locale" content="en"/><meta property="og:description" content="Language basics"/><meta property="og:site_name" content="Slint Language Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="description" content="Language basics"/><script>
+<!DOCTYPE html><html lang="en" dir="ltr" data-has-toc data-has-sidebar data-theme="dark" class="astro-77jcyavj"> <head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Basics | Slint Language Docs</title><link rel="canonical" href="https://snapshots.slint.dev/tng/guide/basics/"/><link rel="sitemap" href="/tng/sitemap-index.xml"/><link rel="shortcut icon" href="/tng/favicon.svg" type="image/svg+xml"/><meta name="generator" content="Astro v4.16.7"/><meta name="generator" content="Starlight v0.28.4"/><meta property="og:title" content="Basics"/><meta property="og:type" content="article"/><meta property="og:url" content="https://snapshots.slint.dev/tng/guide/basics/"/><meta property="og:locale" content="en"/><meta property="og:description" content="The .slint file"/><meta property="og:site_name" content="Slint Language Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="description" content="The .slint file"/><script>
 	window.StarlightThemeProvider = (() => {
 		const storedTheme =
 			typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
@@ -80,7 +81,12 @@
 		})();
 	</script> </sl-sidebar-state-persist>  <div class="md:sl-hidden"> <div class="mobile-preferences sl-flex astro-auvtkur5"> <div class="sl-flex social-icons astro-auvtkur5"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div>  </div> </div> </div> </nav> <div class="main-frame astro-p25nhtne">   <div class="lg:sl-flex astro-rwvehgl4"> <aside class="right-sidebar-container astro-rwvehgl4"> <div class="right-sidebar astro-rwvehgl4"> <div class="lg:sl-hidden astro-hwfertka"><mobile-starlight-toc data-min-h="2" data-max-h="3" class="astro-zpk4atjs"><nav aria-labelledby="starlight__on-this-page--mobile" class="astro-zpk4atjs"><details id="starlight__mobile-toc" class="astro-zpk4atjs"><summary id="starlight__on-this-page--mobile" class="sl-flex astro-zpk4atjs"><div class="toggle sl-flex astro-zpk4atjs">On this page<svg aria-hidden="true" class="caret astro-zpk4atjs astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </div><span class="display-current astro-zpk4atjs"></span></summary><div class="dropdown astro-zpk4atjs"><ul class="isMobile astro-37ee4puk" style="--depth: 0;"> <li class="astro-37ee4puk" style="--depth: 0;"> <a href="#_top" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Overview</span> </a>  </li> </ul> </div></details></nav></mobile-starlight-toc></div><div class="right-sidebar-panel sl-hidden lg:sl-block astro-hwfertka"><div class="sl-container astro-hwfertka"><starlight-toc data-min-h="2" data-max-h="3"><nav aria-labelledby="starlight__on-this-page"><h2 id="starlight__on-this-page">On this page</h2><ul class="astro-37ee4puk" style="--depth: 0;"> <li class="astro-37ee4puk" style="--depth: 0;"> <a href="#_top" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Overview</span> </a>  </li> </ul> </nav></starlight-toc></div></div> </div> </aside> <div class="main-pane astro-rwvehgl4">  <main data-pagefind-body lang="en" dir="ltr" class="astro-77jcyavj">    <div class="content-panel astro-4r574wmc"> <div class="sl-container astro-4r574wmc"> <h1 id="_top" class="astro-7wrulwsq">Basics</h1>  </div> </div>  <div class="content-panel astro-4r574wmc"> <div class="sl-container astro-4r574wmc"> <div class="sl-markdown-content"> <p>Slint provides a rich declarative UI language that will allows the expression of any type of user interface.</p>
-<p>Hide tedious complexity, avoid boilerplate, provide a ‘component’ abstraction that maps the way people think about UI’s (text, images, buttons, dialogs, etc) and give upfront error handling.</p>
-<p>It’s also been designed to easy to learn and enable rapid iteration. It does this through enabling tooling such as a live-coding experience where you can see changes as quickly as you can type them. As well as allow for rapid prototyping where the same UI can be evolved from an initial concept, to a final shipped commercial product.</p>
-<p>The final aim is to let developers and designers focus on what’s important, adding value to their own product. Slint make common tasks easier. Adding custom fonts, using SVG images, and even details such as finding out the width and height of a source image require zero configuration or any specialist knowledge.</p> </div> <footer class="sl-flex astro-eifwj7ft"> <div class="meta sl-flex astro-eifwj7ft">   </div> <div class="pagination-links astro-dyqvxwuo" dir="ltr"> <a href="/tng/getting-started/which_language" rel="prev" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg>  <span class="astro-dyqvxwuo"> Previous <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Which language?</span> </span> </a> <a href="/tng/guide/types" rel="next" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg>  <span class="astro-dyqvxwuo"> Next <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Types</span> </span> </a> </div>   </footer>  </div> </div>   </main> </div> </div>  </div> </div>  </body></html>
\ No newline at end of file
+</script>   </div>  </div> </div> </div> </nav> <div class="main-frame astro-p25nhtne">   <div class="lg:sl-flex astro-rwvehgl4"> <aside class="right-sidebar-container astro-rwvehgl4"> <div class="right-sidebar astro-rwvehgl4"> <div class="lg:sl-hidden astro-hwfertka"><mobile-starlight-toc data-min-h="2" data-max-h="3" class="astro-zpk4atjs"><nav aria-labelledby="starlight__on-this-page--mobile" class="astro-zpk4atjs"><details id="starlight__mobile-toc" class="astro-zpk4atjs"><summary id="starlight__on-this-page--mobile" class="sl-flex astro-zpk4atjs"><div class="toggle sl-flex astro-zpk4atjs">On this page<svg aria-hidden="true" class="caret astro-zpk4atjs astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </div><span class="display-current astro-zpk4atjs"></span></summary><div class="dropdown astro-zpk4atjs"><ul class="isMobile astro-37ee4puk" style="--depth: 0;"> <li class="astro-37ee4puk" style="--depth: 0;"> <a href="#_top" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Overview</span> </a> <ul class="isMobile astro-37ee4puk" style="--depth: 1;"> <li class="astro-37ee4puk" style="--depth: 1;"> <a href="#the-slint-file" class="astro-37ee4puk" style="--depth: 1;"> <span class="astro-37ee4puk" style="--depth: 1;">The *.slint file</span> </a>  </li> </ul>  </li> </ul> </div></details></nav></mobile-starlight-toc></div><div class="right-sidebar-panel sl-hidden lg:sl-block astro-hwfertka"><div class="sl-container astro-hwfertka"><starlight-toc data-min-h="2" data-max-h="3"><nav aria-labelledby="starlight__on-this-page"><h2 id="starlight__on-this-page">On this page</h2><ul class="astro-37ee4puk" style="--depth: 0;"> <li class="astro-37ee4puk" style="--depth: 0;"> <a href="#_top" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Overview</span> </a> <ul class="astro-37ee4puk" style="--depth: 1;"> <li class="astro-37ee4puk" style="--depth: 1;"> <a href="#the-slint-file" class="astro-37ee4puk" style="--depth: 1;"> <span class="astro-37ee4puk" style="--depth: 1;">The *.slint file</span> </a>  </li> </ul>  </li> </ul> </nav></starlight-toc></div></div> </div> </aside> <div class="main-pane astro-rwvehgl4">  <main data-pagefind-body lang="en" dir="ltr" class="astro-77jcyavj">    <div class="content-panel astro-4r574wmc"> <div class="sl-container astro-4r574wmc"> <h1 id="_top" class="astro-7wrulwsq">Basics</h1>  </div> </div>  <div class="content-panel astro-4r574wmc"> <div class="sl-container astro-4r574wmc"> <div class="sl-markdown-content"> <h3 id="the-slint-file">The *.slint file</h3>
+<p>Slint components are defined in a file with the <code dir="auto">slint</code> extension such as <code dir="auto">my-component.slint</code>.</p>
+<p>The file is then structured as follows:</p>
+<p>{
+Imports</p>
+<p>Globals</p>
+<p>Component A…</p>
+<p>Component B…
+}</p> </div> <footer class="sl-flex astro-eifwj7ft"> <div class="meta sl-flex astro-eifwj7ft">   </div> <div class="pagination-links astro-dyqvxwuo" dir="ltr"> <a href="/tng/guide/intro" rel="prev" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg>  <span class="astro-dyqvxwuo"> Previous <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Introduction</span> </span> </a> <a href="/tng/guide/types" rel="next" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg>  <span class="astro-dyqvxwuo"> Next <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Types</span> </span> </a> </div>   </footer>  </div> </div>   </main> </div> </div>  </div> </div>  </body></html>
\ No newline at end of file
diff --git a/snapshots/tng/guide/components/index.html b/snapshots/tng/guide/components/index.html
index 2ed2017db..5b285e44c 100644
--- a/snapshots/tng/guide/components/index.html
+++ b/snapshots/tng/guide/components/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/guide/functions/index.html b/snapshots/tng/guide/functions/index.html
index 49866b7bc..297da9255 100644
--- a/snapshots/tng/guide/functions/index.html
+++ b/snapshots/tng/guide/functions/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/guide/intro/index.html b/snapshots/tng/guide/intro/index.html
new file mode 100644
index 000000000..4e0181d47
--- /dev/null
+++ b/snapshots/tng/guide/intro/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html><html lang="en" dir="ltr" data-has-toc data-has-sidebar data-theme="dark" class="astro-77jcyavj"> <head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Introduction | Slint Language Docs</title><link rel="canonical" href="https://snapshots.slint.dev/tng/guide/intro/"/><link rel="sitemap" href="/tng/sitemap-index.xml"/><link rel="shortcut icon" href="/tng/favicon.svg" type="image/svg+xml"/><meta name="generator" content="Astro v4.16.7"/><meta name="generator" content="Starlight v0.28.4"/><meta property="og:title" content="Introduction"/><meta property="og:type" content="article"/><meta property="og:url" content="https://snapshots.slint.dev/tng/guide/intro/"/><meta property="og:locale" content="en"/><meta property="og:description" content="Slint overview"/><meta property="og:site_name" content="Slint Language Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="description" content="Slint overview"/><script>
+	window.StarlightThemeProvider = (() => {
+		const storedTheme =
+			typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
+		const theme =
+			storedTheme ||
+			(window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+		document.documentElement.dataset.theme = theme === 'light' ? 'light' : 'dark';
+		return {
+			updatePickers(theme = storedTheme || 'auto') {
+				document.querySelectorAll('starlight-theme-select').forEach((picker) => {
+					const select = picker.querySelector('select');
+					if (select) select.value = theme;
+					/** @type {HTMLTemplateElement | null} */
+					const tmpl = document.querySelector(`#theme-icons`);
+					const newIcon = tmpl && tmpl.content.querySelector('.' + theme);
+					if (newIcon) {
+						const oldIcon = picker.querySelector('svg.label-icon');
+						if (oldIcon) {
+							oldIcon.replaceChildren(...newIcon.cloneNode(true).childNodes);
+						}
+					}
+				});
+			},
+		};
+	})();
+</script><template id="theme-icons"><svg aria-hidden="true" class="light astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Zm.64 5-.71.71a1 1 0 0 0 0 1.41 1 1 0 0 0 1.41 0l.71-.71A1 1 0 0 0 5.64 17ZM12 5a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v1a1 1 0 0 0 1 1Zm5.66 2.34a1 1 0 0 0 .7-.29l.71-.71a1 1 0 1 0-1.41-1.41l-.66.71a1 1 0 0 0 0 1.41 1 1 0 0 0 .66.29Zm-12-.29a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.71-.71a1.004 1.004 0 1 0-1.43 1.41l.73.71ZM21 11h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2Zm-2.64 6A1 1 0 0 0 17 18.36l.71.71a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.76-.66ZM12 6.5a5.5 5.5 0 1 0 5.5 5.5A5.51 5.51 0 0 0 12 6.5Zm0 9a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm0 3.5a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1Z"/></svg> <svg aria-hidden="true" class="dark astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.64 13a1 1 0 0 0-1.05-.14 8.049 8.049 0 0 1-3.37.73 8.15 8.15 0 0 1-8.14-8.1 8.59 8.59 0 0 1 .25-2A1 1 0 0 0 8 2.36a10.14 10.14 0 1 0 14 11.69 1 1 0 0 0-.36-1.05Zm-9.5 6.69A8.14 8.14 0 0 1 7.08 5.22v.27a10.15 10.15 0 0 0 10.14 10.14 9.784 9.784 0 0 0 2.1-.22 8.11 8.11 0 0 1-7.18 4.32v-.04Z"/></svg> <svg aria-hidden="true" class="auto astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg> </template><link rel="stylesheet" href="/tng/_astro/index.BA1CUb2B.css">
+<link rel="stylesheet" href="/tng/_astro/markdown.Du-hNhMT.css">
+<style>:root{--sl-badge-default-border: var(--sl-color-accent);--sl-badge-default-bg: var(--sl-color-accent-low);--sl-badge-default-text: #fff;--sl-badge-note-border: var(--sl-color-blue);--sl-badge-note-bg: var(--sl-color-blue-low);--sl-badge-note-text: #fff;--sl-badge-danger-border: var(--sl-color-red);--sl-badge-danger-bg: var(--sl-color-red-low);--sl-badge-danger-text: #fff;--sl-badge-success-border: var(--sl-color-green);--sl-badge-success-bg: var(--sl-color-green-low);--sl-badge-success-text: #fff;--sl-badge-caution-border: var(--sl-color-orange);--sl-badge-caution-bg: var(--sl-color-orange-low);--sl-badge-caution-text: #fff;--sl-badge-tip-border: var(--sl-color-purple);--sl-badge-tip-bg: var(--sl-color-purple-low);--sl-badge-tip-text: #fff}[data-theme=light]:root{--sl-badge-default-bg: var(--sl-color-accent-high);--sl-badge-note-bg: var(--sl-color-blue-high);--sl-badge-danger-bg: var(--sl-color-red-high);--sl-badge-success-bg: var(--sl-color-green-high);--sl-badge-caution-bg: var(--sl-color-orange-high);--sl-badge-tip-bg: var(--sl-color-purple-high)}.sl-badge:where(.astro-jentkhzs){display:inline-block;border:1px solid var(--sl-color-border-badge);border-radius:.25rem;font-family:var(--sl-font-system-mono);line-height:normal;color:var(--sl-color-text-badge);background-color:var(--sl-color-bg-badge);overflow-wrap:anywhere}.sidebar-content .sl-badge:where(.astro-jentkhzs){line-height:1;font-size:var(--sl-text-xs);padding:.125rem .375rem}.sidebar-content a[aria-current=page]>.sl-badge:where(.astro-jentkhzs){--sl-color-bg-badge: transparent;--sl-color-border-badge: currentColor;color:inherit}.default:where(.astro-jentkhzs){--sl-color-bg-badge: var(--sl-badge-default-bg);--sl-color-border-badge: var(--sl-badge-default-border);--sl-color-text-badge: var(--sl-badge-default-text)}.note:where(.astro-jentkhzs){--sl-color-bg-badge: var(--sl-badge-note-bg);--sl-color-border-badge: var(--sl-badge-note-border);--sl-color-text-badge: var(--sl-badge-note-text)}.danger:where(.astro-jentkhzs){--sl-color-bg-badge: var(--sl-badge-danger-bg);--sl-color-border-badge: var(--sl-badge-danger-border);--sl-color-text-badge: var(--sl-badge-danger-text)}.success:where(.astro-jentkhzs){--sl-color-bg-badge: var(--sl-badge-success-bg);--sl-color-border-badge: var(--sl-badge-success-border);--sl-color-text-badge: var(--sl-badge-success-text)}.tip:where(.astro-jentkhzs){--sl-color-bg-badge: var(--sl-badge-tip-bg);--sl-color-border-badge: var(--sl-badge-tip-border);--sl-color-text-badge: var(--sl-badge-tip-text)}.caution:where(.astro-jentkhzs){--sl-color-bg-badge: var(--sl-badge-caution-bg);--sl-color-border-badge: var(--sl-badge-caution-border);--sl-color-text-badge: var(--sl-badge-caution-text)}.small:where(.astro-jentkhzs){font-size:var(--sl-text-xs);padding:.125rem .25rem}.medium:where(.astro-jentkhzs){font-size:var(--sl-text-sm);padding:.175rem .35rem}.large:where(.astro-jentkhzs){font-size:var(--sl-text-base);padding:.225rem .45rem}.sl-markdown-content :is(h1,h2,h3,h4,h5,h6) .sl-badge:where(.astro-jentkhzs){vertical-align:middle}
+.card-grid:where(.astro-ryfp6nl3){display:grid;gap:1rem}.card-grid:where(.astro-ryfp6nl3)>*{margin-top:0!important}@media (min-width: 50rem){.card-grid:where(.astro-ryfp6nl3){grid-template-columns:1fr 1fr;gap:1.5rem}.stagger:where(.astro-ryfp6nl3){--stagger-height: 5rem;padding-bottom:var(--stagger-height)}.stagger:where(.astro-ryfp6nl3)>*:nth-child(2n){transform:translateY(var(--stagger-height))}}
+.card:where(.astro-hl52tsxt){--sl-card-border: var(--sl-color-purple);--sl-card-bg: var(--sl-color-purple-low);border:1px solid var(--sl-color-gray-5);background-color:var(--sl-color-black);padding:clamp(1rem,calc(.125rem + 3vw),2.5rem);flex-direction:column;gap:clamp(.5rem,calc(.125rem + 1vw),1rem)}.card:where(.astro-hl52tsxt):nth-child(4n+1){--sl-card-border: var(--sl-color-orange);--sl-card-bg: var(--sl-color-orange-low)}.card:where(.astro-hl52tsxt):nth-child(4n+3){--sl-card-border: var(--sl-color-green);--sl-card-bg: var(--sl-color-green-low)}.card:where(.astro-hl52tsxt):nth-child(4n+4){--sl-card-border: var(--sl-color-red);--sl-card-bg: var(--sl-color-red-low)}.card:where(.astro-hl52tsxt):nth-child(4n+5){--sl-card-border: var(--sl-color-blue);--sl-card-bg: var(--sl-color-blue-low)}.title:where(.astro-hl52tsxt){font-weight:600;font-size:var(--sl-text-h4);color:var(--sl-color-white);line-height:var(--sl-line-height-headings);gap:1rem;align-items:center}.card:where(.astro-hl52tsxt) .icon:where(.astro-hl52tsxt){border:1px solid var(--sl-card-border);background-color:var(--sl-card-bg);padding:.2em;border-radius:.25rem}.card:where(.astro-hl52tsxt) .body:where(.astro-hl52tsxt){margin:0;font-size:clamp(var(--sl-text-sm),calc(.5rem + 1vw),var(--sl-text-body))}
+svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
+starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
+.sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
+.sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
+</style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
+<script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
+	(() => {
+		const openBtn = document.querySelector('button[data-open-modal]');
+		const shortcut = openBtn?.querySelector('kbd');
+		if (!openBtn || !(shortcut instanceof HTMLElement)) return;
+		const platformKey = shortcut.querySelector('kbd');
+		if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+			platformKey.textContent = '⌘';
+			openBtn.setAttribute('aria-keyshortcuts', 'Meta+K');
+		}
+		shortcut.style.display = '';
+	})();
+</script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
+	StarlightThemeProvider.updatePickers();
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
+		(() => {
+			try {
+				if (!matchMedia('(min-width: 50em)').matches) return;
+				/** @type {HTMLElement | null} */
+				const target = document.querySelector('sl-sidebar-state-persist');
+				const state = JSON.parse(sessionStorage.getItem('sl-sidebar-state') || '0');
+				if (!target || !state || target.dataset.hash !== state.hash) return;
+				window._starlightScrollRestore = state.scroll;
+				customElements.define(
+					'sl-sidebar-restore',
+					class SidebarRestore extends HTMLElement {
+						connectedCallback() {
+							try {
+								const idx = parseInt(this.dataset.index || '');
+								const details = this.closest('details');
+								if (details && typeof state.open[idx] === 'boolean') details.open = state.open[idx];
+							} catch {}
+						}
+					}
+				);
+			} catch {}
+		})();
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+		(() => {
+			const scroller = document.getElementById('starlight__sidebar');
+			if (!window._starlightScrollRestore || !scroller) return;
+			scroller.scrollTop = window._starlightScrollRestore;
+			delete window._starlightScrollRestore;
+		})();
+	</script> </sl-sidebar-state-persist>  <div class="md:sl-hidden"> <div class="mobile-preferences sl-flex astro-auvtkur5"> <div class="sl-flex social-icons astro-auvtkur5"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
+	StarlightThemeProvider.updatePickers();
+</script>   </div>  </div> </div> </div> </nav> <div class="main-frame astro-p25nhtne">   <div class="lg:sl-flex astro-rwvehgl4"> <aside class="right-sidebar-container astro-rwvehgl4"> <div class="right-sidebar astro-rwvehgl4"> <div class="lg:sl-hidden astro-hwfertka"><mobile-starlight-toc data-min-h="2" data-max-h="3" class="astro-zpk4atjs"><nav aria-labelledby="starlight__on-this-page--mobile" class="astro-zpk4atjs"><details id="starlight__mobile-toc" class="astro-zpk4atjs"><summary id="starlight__on-this-page--mobile" class="sl-flex astro-zpk4atjs"><div class="toggle sl-flex astro-zpk4atjs">On this page<svg aria-hidden="true" class="caret astro-zpk4atjs astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </div><span class="display-current astro-zpk4atjs"></span></summary><div class="dropdown astro-zpk4atjs"><ul class="isMobile astro-37ee4puk" style="--depth: 0;"> <li class="astro-37ee4puk" style="--depth: 0;"> <a href="#_top" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Overview</span> </a> <ul class="isMobile astro-37ee4puk" style="--depth: 1;"> <li class="astro-37ee4puk" style="--depth: 1;"> <a href="#a-single-ui-language-for-all-products" class="astro-37ee4puk" style="--depth: 1;"> <span class="astro-37ee4puk" style="--depth: 1;">A Single UI Language for all products</span> </a>  </li><li class="astro-37ee4puk" style="--depth: 1;"> <a href="#separate-business-logic" class="astro-37ee4puk" style="--depth: 1;"> <span class="astro-37ee4puk" style="--depth: 1;">Separate Business Logic</span> </a>  </li><li class="astro-37ee4puk" style="--depth: 1;"> <a href="#powerful-ui-renderer" class="astro-37ee4puk" style="--depth: 1;"> <span class="astro-37ee4puk" style="--depth: 1;">Powerful UI renderer.</span> </a>  </li><li class="astro-37ee4puk" style="--depth: 1;"> <a href="#bridge-between-the-two-worlds" class="astro-37ee4puk" style="--depth: 1;"> <span class="astro-37ee4puk" style="--depth: 1;">Bridge between the two worlds.</span> </a>  </li> </ul>  </li> </ul> </div></details></nav></mobile-starlight-toc></div><div class="right-sidebar-panel sl-hidden lg:sl-block astro-hwfertka"><div class="sl-container astro-hwfertka"><starlight-toc data-min-h="2" data-max-h="3"><nav aria-labelledby="starlight__on-this-page"><h2 id="starlight__on-this-page">On this page</h2><ul class="astro-37ee4puk" style="--depth: 0;"> <li class="astro-37ee4puk" style="--depth: 0;"> <a href="#_top" class="astro-37ee4puk" style="--depth: 0;"> <span class="astro-37ee4puk" style="--depth: 0;">Overview</span> </a> <ul class="astro-37ee4puk" style="--depth: 1;"> <li class="astro-37ee4puk" style="--depth: 1;"> <a href="#a-single-ui-language-for-all-products" class="astro-37ee4puk" style="--depth: 1;"> <span class="astro-37ee4puk" style="--depth: 1;">A Single UI Language for all products</span> </a>  </li><li class="astro-37ee4puk" style="--depth: 1;"> <a href="#separate-business-logic" class="astro-37ee4puk" style="--depth: 1;"> <span class="astro-37ee4puk" style="--depth: 1;">Separate Business Logic</span> </a>  </li><li class="astro-37ee4puk" style="--depth: 1;"> <a href="#powerful-ui-renderer" class="astro-37ee4puk" style="--depth: 1;"> <span class="astro-37ee4puk" style="--depth: 1;">Powerful UI renderer.</span> </a>  </li><li class="astro-37ee4puk" style="--depth: 1;"> <a href="#bridge-between-the-two-worlds" class="astro-37ee4puk" style="--depth: 1;"> <span class="astro-37ee4puk" style="--depth: 1;">Bridge between the two worlds.</span> </a>  </li> </ul>  </li> </ul> </nav></starlight-toc></div></div> </div> </aside> <div class="main-pane astro-rwvehgl4">  <main data-pagefind-body lang="en" dir="ltr" class="astro-77jcyavj">    <div class="content-panel astro-4r574wmc"> <div class="sl-container astro-4r574wmc"> <h1 id="_top" class="astro-7wrulwsq">Introduction</h1>  </div> </div>  <div class="content-panel astro-4r574wmc"> <div class="sl-container astro-4r574wmc"> <div class="sl-markdown-content"> <p>Slint is a GUI toolkit for building modern fluid user interfaces for embedded devices, as well as desktop and mobile applications.</p>
+<p>Slint ties together many of todays most modern, powerful and popular UI language techniques to provide a simple, yet powerful, declarative language for building user interfaces. It’s also been designed with the
+aim to help ensure your application stays maintainable over time. So you can rapidly prototype and iterate
+your initial design, refine them into a final product and keep evolving that over time with less effort.</p>
+<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="0 0 264.75 70" style="max-width: 264.75px;" class="flowchart" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-0"><style>#mermaid-0{font-family:arial,sans-serif;font-size:16px;fill:#333;}#mermaid-0 .error-icon{fill:#552222;}#mermaid-0 .error-text{fill:#552222;stroke:#552222;}#mermaid-0 .edge-thickness-normal{stroke-width:1px;}#mermaid-0 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-0 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-0 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-0 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-0 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-0 .marker{fill:#333333;stroke:#333333;}#mermaid-0 .marker.cross{stroke:#333333;}#mermaid-0 svg{font-family:arial,sans-serif;font-size:16px;}#mermaid-0 p{margin:0;}#mermaid-0 .label{font-family:arial,sans-serif;color:#333;}#mermaid-0 .cluster-label text{fill:#333;}#mermaid-0 .cluster-label span{color:#333;}#mermaid-0 .cluster-label span p{background-color:transparent;}#mermaid-0 .label text,#mermaid-0 span{fill:#333;color:#333;}#mermaid-0 .node rect,#mermaid-0 .node circle,#mermaid-0 .node ellipse,#mermaid-0 .node polygon,#mermaid-0 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-0 .rough-node .label text,#mermaid-0 .node .label text,#mermaid-0 .image-shape .label,#mermaid-0 .icon-shape .label{text-anchor:middle;}#mermaid-0 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-0 .rough-node .label,#mermaid-0 .node .label,#mermaid-0 .image-shape .label,#mermaid-0 .icon-shape .label{text-align:center;}#mermaid-0 .node.clickable{cursor:pointer;}#mermaid-0 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-0 .arrowheadPath{fill:#333333;}#mermaid-0 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-0 .flowchart-link{stroke:#333333;fill:none;}#mermaid-0 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-0 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-0 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-0 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-0 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-0 .cluster text{fill:#333;}#mermaid-0 .cluster span{color:#333;}#mermaid-0 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-0 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-0 rect.text{fill:none;stroke-width:0;}#mermaid-0 .icon-shape,#mermaid-0 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-0 .icon-shape p,#mermaid-0 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-0 .icon-shape rect,#mermaid-0 .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-0 :root{--mermaid-font-family:arial,sans-serif;}</style><g><marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="5" viewBox="0 0 10 10" class="marker flowchart-v2" id="mermaid-0_flowchart-v2-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart-v2" id="mermaid-0_flowchart-v2-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart-v2" id="mermaid-0_flowchart-v2-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart-v2" id="mermaid-0_flowchart-v2-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="mermaid-0_flowchart-v2-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="mermaid-0_flowchart-v2-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path marker-end="url(#mermaid-0_flowchart-v2-pointEnd)" marker-start="url(#mermaid-0_flowchart-v2-pointStart)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_id1_id2_0" d="M73.125,35L76.625,35C80.125,35,87.125,35,92.708,35C98.292,35,102.458,35,105.958,35C109.458,35,112.292,35,113.708,35L115.125,35"></path></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(38.5625, 35)" id="flowchart-id1-0" class="node default"><rect height="54" width="61.125" y="-27" x="-30.5625" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-15.5625, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="31.125"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>Slint</p></span></div></foreignObject></g></g><g transform="translate(187.9375, 35)" id="flowchart-id2-1" class="node default"><rect height="54" width="137.625" y="-27" x="-68.8125" ry="5" rx="5" style="" class="basic label-container"></rect><g transform="translate(-53.8125, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="107.625"><div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel"><p>Business Logic</p></span></div></foreignObject></g></g></g></g></g></svg>
+<h3 id="a-single-ui-language-for-all-products">A Single UI Language for all products</h3>
+<p>There is only one Slint UI language. Regardless of the target platform be it an ultra-low-power microcontroller, a desktop application, or a mobile application, the same language is used to describe the user interface.</p>
+<h3 id="separate-business-logic">Separate Business Logic</h3>
+<p>The business logic can then be written with Rust, C++ or TypeScript.</p>
+<h3 id="powerful-ui-renderer">Powerful UI renderer.</h3>
+<p>Slint provides its own UI render layer. It’s optimized for power efficiency and low memory usage. Offering a software renderer for platforms without a GPU and a hardware renderer for platforms with a GPU.</p>
+<h3 id="bridge-between-the-two-worlds">Bridge between the two worlds.</h3>
+<p>Slint also provides a simple way to bridge the gap between the business logic and the UI.</p> </div> <footer class="sl-flex astro-eifwj7ft"> <div class="meta sl-flex astro-eifwj7ft">   </div> <div class="pagination-links astro-dyqvxwuo" dir="ltr"> <a href="/tng/getting-started/which_language" rel="prev" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg>  <span class="astro-dyqvxwuo"> Previous <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Which language?</span> </span> </a> <a href="/tng/guide/basics" rel="next" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg>  <span class="astro-dyqvxwuo"> Next <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Basics</span> </span> </a> </div>   </footer>  </div> </div>   </main> </div> </div>  </div> </div>  </body></html>
\ No newline at end of file
diff --git a/snapshots/tng/guide/layouts/index.html b/snapshots/tng/guide/layouts/index.html
index bd3b20970..bbd327504 100644
--- a/snapshots/tng/guide/layouts/index.html
+++ b/snapshots/tng/guide/layouts/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/guide/reactive/index.html b/snapshots/tng/guide/reactive/index.html
index 27f8c2882..93916c27c 100644
--- a/snapshots/tng/guide/reactive/index.html
+++ b/snapshots/tng/guide/reactive/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/guide/states/index.html b/snapshots/tng/guide/states/index.html
index 6e8f06a13..8c5ce3ec7 100644
--- a/snapshots/tng/guide/states/index.html
+++ b/snapshots/tng/guide/states/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/guide/types/index.html b/snapshots/tng/guide/types/index.html
index 4fce7162a..12ebb3f61 100644
--- a/snapshots/tng/guide/types/index.html
+++ b/snapshots/tng/guide/types/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><script src="/tng/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
@@ -339,4 +340,4 @@ <h2 id="conversions">Conversions</h2>
 a valid number. You can check with <code dir="auto">is-float()</code> if the string contains a valid number</li>
 </ul>
 <div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">export</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">component</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">Example</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#76A162;--1:#007A00">// OK: int converts to string</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;{</span><span style="--0:#9CDCFE;--1:#001080">a</span><span style="--0:#CCCCCC;--1:#3B3B3B">: string, </span><span style="--0:#9CDCFE;--1:#001080">b</span><span style="--0:#CCCCCC;--1:#3B3B3B">: int}> </span><span style="--0:#9CDCFE;--1:#001080">prop1</span><span style="--0:#CCCCCC;--1:#3B3B3B">: {</span><span style="--0:#9CDCFE;--1:#001080">a</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">12</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">b</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">12</span><span style="--0:#CCCCCC;--1:#3B3B3B"> };</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#76A162;--1:#007A00">// OK: even if a is missing, it will just have the default value ("")</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;{</span><span style="--0:#9CDCFE;--1:#001080">a</span><span style="--0:#CCCCCC;--1:#3B3B3B">: string, </span><span style="--0:#9CDCFE;--1:#001080">b</span><span style="--0:#CCCCCC;--1:#3B3B3B">: int}> </span><span style="--0:#9CDCFE;--1:#001080">prop2</span><span style="--0:#CCCCCC;--1:#3B3B3B">: { </span><span style="--0:#9CDCFE;--1:#001080">b</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">12</span><span style="--0:#CCCCCC;--1:#3B3B3B"> };</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#76A162;--1:#007A00">// OK: even if c is too many, it will be discarded</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;{</span><span style="--0:#9CDCFE;--1:#001080">a</span><span style="--0:#CCCCCC;--1:#3B3B3B">: string, </span><span style="--0:#9CDCFE;--1:#001080">b</span><span style="--0:#CCCCCC;--1:#3B3B3B">: int}> </span><span style="--0:#9CDCFE;--1:#001080">prop3</span><span style="--0:#CCCCCC;--1:#3B3B3B">: { </span><span style="--0:#9CDCFE;--1:#001080">a</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#CE9178;--1:#A31515">"x"</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">b</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">12</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">c</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">42</span><span style="--0:#CCCCCC;--1:#3B3B3B"> };</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#76A162;--1:#007A00">// ERROR: b is missing and c is extra, this doesn't compile, because it could be a typo.</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#76A162;--1:#007A00">// property&#x3C;{a: string, b: int}> prop4: { a: "x", c: 42 };</span></div></div><div class="ec-line"><div class="code">
-</div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;</span><span style="--0:#4EC9B0;--1:#227188">string</span><span style="--0:#CCCCCC;--1:#3B3B3B">> </span><span style="--0:#9CDCFE;--1:#001080">xxx</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#CE9178;--1:#A31515">"42.1"</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;</span><span style="--0:#4EC9B0;--1:#227188">float</span><span style="--0:#CCCCCC;--1:#3B3B3B">> </span><span style="--0:#9CDCFE;--1:#001080">xxx1</span><span style="--0:#CCCCCC;--1:#3B3B3B">: xxx.to-float(); </span><span style="--0:#76A162;--1:#007A00">// 42.1</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;</span><span style="--0:#4EC9B0;--1:#227188">bool</span><span style="--0:#CCCCCC;--1:#3B3B3B">> </span><span style="--0:#9CDCFE;--1:#001080">xxx2</span><span style="--0:#CCCCCC;--1:#3B3B3B">: xxx.is-float(); </span><span style="--0:#76A162;--1:#007A00">// true</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;</span><span style="--0:#4EC9B0;--1:#227188">int</span><span style="--0:#CCCCCC;--1:#3B3B3B">> </span><span style="--0:#9CDCFE;--1:#001080">xxx3</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">45.8</span><span style="--0:#CCCCCC;--1:#3B3B3B">; </span><span style="--0:#76A162;--1:#007A00">// 45</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="export component Example {    // OK: int converts to string    property<{a: string, b: int}> prop1: {a: 12, b: 12 };    // OK: even if a is missing, it will just have the default value (&#x22;&#x22;)    property<{a: string, b: int}> prop2: { b: 12 };    // OK: even if c is too many, it will be discarded    property<{a: string, b: int}> prop3: { a: &#x22;x&#x22;, b: 12, c: 42 };    // ERROR: b is missing and c is extra, this doesn&#x27;t compile, because it could be a typo.    // property<{a: string, b: int}> prop4: { a: &#x22;x&#x22;, c: 42 };    property<string> xxx: &#x22;42.1&#x22;;    property<float> xxx1: xxx.to-float(); // 42.1    property<bool> xxx2: xxx.is-float(); // true    property<int> xxx3: 45.8; // 45}"><div></div></button></div></figure></div> </div> <footer class="sl-flex astro-eifwj7ft"> <div class="meta sl-flex astro-eifwj7ft">   </div> <div class="pagination-links astro-dyqvxwuo" dir="ltr"> <a href="/tng/guide/philosophy" rel="prev" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg>  <span class="astro-dyqvxwuo"> Previous <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Introduction</span> </span> </a> <a href="/tng/tutorial/quickstart" rel="next" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg>  <span class="astro-dyqvxwuo"> Next <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Introduction</span> </span> </a> </div>   </footer>  </div> </div>   </main> </div> </div>  </div> </div>  </body></html>
\ No newline at end of file
+</div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;</span><span style="--0:#4EC9B0;--1:#227188">string</span><span style="--0:#CCCCCC;--1:#3B3B3B">> </span><span style="--0:#9CDCFE;--1:#001080">xxx</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#CE9178;--1:#A31515">"42.1"</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;</span><span style="--0:#4EC9B0;--1:#227188">float</span><span style="--0:#CCCCCC;--1:#3B3B3B">> </span><span style="--0:#9CDCFE;--1:#001080">xxx1</span><span style="--0:#CCCCCC;--1:#3B3B3B">: xxx.to-float(); </span><span style="--0:#76A162;--1:#007A00">// 42.1</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;</span><span style="--0:#4EC9B0;--1:#227188">bool</span><span style="--0:#CCCCCC;--1:#3B3B3B">> </span><span style="--0:#9CDCFE;--1:#001080">xxx2</span><span style="--0:#CCCCCC;--1:#3B3B3B">: xxx.is-float(); </span><span style="--0:#76A162;--1:#007A00">// true</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;</span><span style="--0:#4EC9B0;--1:#227188">int</span><span style="--0:#CCCCCC;--1:#3B3B3B">> </span><span style="--0:#9CDCFE;--1:#001080">xxx3</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">45.8</span><span style="--0:#CCCCCC;--1:#3B3B3B">; </span><span style="--0:#76A162;--1:#007A00">// 45</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="export component Example {    // OK: int converts to string    property<{a: string, b: int}> prop1: {a: 12, b: 12 };    // OK: even if a is missing, it will just have the default value (&#x22;&#x22;)    property<{a: string, b: int}> prop2: { b: 12 };    // OK: even if c is too many, it will be discarded    property<{a: string, b: int}> prop3: { a: &#x22;x&#x22;, b: 12, c: 42 };    // ERROR: b is missing and c is extra, this doesn&#x27;t compile, because it could be a typo.    // property<{a: string, b: int}> prop4: { a: &#x22;x&#x22;, c: 42 };    property<string> xxx: &#x22;42.1&#x22;;    property<float> xxx1: xxx.to-float(); // 42.1    property<bool> xxx2: xxx.is-float(); // true    property<int> xxx3: 45.8; // 45}"><div></div></button></div></figure></div> </div> <footer class="sl-flex astro-eifwj7ft"> <div class="meta sl-flex astro-eifwj7ft">   </div> <div class="pagination-links astro-dyqvxwuo" dir="ltr"> <a href="/tng/guide/basics" rel="prev" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg>  <span class="astro-dyqvxwuo"> Previous <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Basics</span> </span> </a> <a href="/tng/tutorial/quickstart" rel="next" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg>  <span class="astro-dyqvxwuo"> Next <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Introduction</span> </span> </a> </div>   </footer>  </div> </div>   </main> </div> </div>  </div> </div>  </body></html>
\ No newline at end of file
diff --git a/snapshots/tng/index.html b/snapshots/tng/index.html
index f5b0ca81e..3f4b89812 100644
--- a/snapshots/tng/index.html
+++ b/snapshots/tng/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><script src="/tng/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
diff --git a/snapshots/tng/pagefind/fragment/en_1252692.pf_fragment b/snapshots/tng/pagefind/fragment/en_1252692.pf_fragment
new file mode 100644
index 000000000..1b1211ebb
Binary files /dev/null and b/snapshots/tng/pagefind/fragment/en_1252692.pf_fragment differ
diff --git a/snapshots/tng/pagefind/fragment/en_22b43b6.pf_fragment b/snapshots/tng/pagefind/fragment/en_22b43b6.pf_fragment
deleted file mode 100644
index 01d6fea35..000000000
Binary files a/snapshots/tng/pagefind/fragment/en_22b43b6.pf_fragment and /dev/null differ
diff --git a/snapshots/tng/pagefind/fragment/en_43683a3.pf_fragment b/snapshots/tng/pagefind/fragment/en_43683a3.pf_fragment
deleted file mode 100644
index 35c512a87..000000000
Binary files a/snapshots/tng/pagefind/fragment/en_43683a3.pf_fragment and /dev/null differ
diff --git a/snapshots/tng/pagefind/fragment/en_6ec4837.pf_fragment b/snapshots/tng/pagefind/fragment/en_6ec4837.pf_fragment
deleted file mode 100644
index 841049585..000000000
Binary files a/snapshots/tng/pagefind/fragment/en_6ec4837.pf_fragment and /dev/null differ
diff --git a/snapshots/tng/pagefind/fragment/en_60513cf.pf_fragment b/snapshots/tng/pagefind/fragment/en_7254b3d.pf_fragment
similarity index 67%
rename from snapshots/tng/pagefind/fragment/en_60513cf.pf_fragment
rename to snapshots/tng/pagefind/fragment/en_7254b3d.pf_fragment
index 56adca6b4..ccd70f543 100644
Binary files a/snapshots/tng/pagefind/fragment/en_60513cf.pf_fragment and b/snapshots/tng/pagefind/fragment/en_7254b3d.pf_fragment differ
diff --git a/snapshots/tng/pagefind/fragment/en_86fba1c.pf_fragment b/snapshots/tng/pagefind/fragment/en_86fba1c.pf_fragment
new file mode 100644
index 000000000..97eee53e9
Binary files /dev/null and b/snapshots/tng/pagefind/fragment/en_86fba1c.pf_fragment differ
diff --git a/snapshots/tng/pagefind/fragment/en_882a219.pf_fragment b/snapshots/tng/pagefind/fragment/en_882a219.pf_fragment
deleted file mode 100644
index a06b1d3d8..000000000
Binary files a/snapshots/tng/pagefind/fragment/en_882a219.pf_fragment and /dev/null differ
diff --git a/snapshots/tng/pagefind/fragment/en_8b54892.pf_fragment b/snapshots/tng/pagefind/fragment/en_8b54892.pf_fragment
new file mode 100644
index 000000000..133a4a22e
Binary files /dev/null and b/snapshots/tng/pagefind/fragment/en_8b54892.pf_fragment differ
diff --git a/snapshots/tng/pagefind/fragment/en_c777dec.pf_fragment b/snapshots/tng/pagefind/fragment/en_c777dec.pf_fragment
new file mode 100644
index 000000000..5bea39ed9
Binary files /dev/null and b/snapshots/tng/pagefind/fragment/en_c777dec.pf_fragment differ
diff --git a/snapshots/tng/pagefind/fragment/en_d5116e3.pf_fragment b/snapshots/tng/pagefind/fragment/en_d5116e3.pf_fragment
new file mode 100644
index 000000000..c03ff5f71
Binary files /dev/null and b/snapshots/tng/pagefind/fragment/en_d5116e3.pf_fragment differ
diff --git a/snapshots/tng/pagefind/fragment/en_d6ec59b.pf_fragment b/snapshots/tng/pagefind/fragment/en_d6ec59b.pf_fragment
new file mode 100644
index 000000000..40bac3181
Binary files /dev/null and b/snapshots/tng/pagefind/fragment/en_d6ec59b.pf_fragment differ
diff --git a/snapshots/tng/pagefind/fragment/en_dd7c54d.pf_fragment b/snapshots/tng/pagefind/fragment/en_dd7c54d.pf_fragment
deleted file mode 100644
index d35ac0115..000000000
Binary files a/snapshots/tng/pagefind/fragment/en_dd7c54d.pf_fragment and /dev/null differ
diff --git a/snapshots/tng/pagefind/index/en_40def23.pf_index b/snapshots/tng/pagefind/index/en_40def23.pf_index
deleted file mode 100644
index 9c0997157..000000000
Binary files a/snapshots/tng/pagefind/index/en_40def23.pf_index and /dev/null differ
diff --git a/snapshots/tng/pagefind/index/en_4caf4ac.pf_index b/snapshots/tng/pagefind/index/en_4caf4ac.pf_index
new file mode 100644
index 000000000..61a095cb5
Binary files /dev/null and b/snapshots/tng/pagefind/index/en_4caf4ac.pf_index differ
diff --git a/snapshots/tng/pagefind/index/en_7ec22da.pf_index b/snapshots/tng/pagefind/index/en_7ec22da.pf_index
deleted file mode 100644
index 18cc99456..000000000
Binary files a/snapshots/tng/pagefind/index/en_7ec22da.pf_index and /dev/null differ
diff --git a/snapshots/tng/pagefind/index/en_c8de9e4.pf_index b/snapshots/tng/pagefind/index/en_c8de9e4.pf_index
new file mode 100644
index 000000000..cba76f837
Binary files /dev/null and b/snapshots/tng/pagefind/index/en_c8de9e4.pf_index differ
diff --git a/snapshots/tng/pagefind/pagefind-entry.json b/snapshots/tng/pagefind/pagefind-entry.json
index 23aa617d8..944d9f683 100644
--- a/snapshots/tng/pagefind/pagefind-entry.json
+++ b/snapshots/tng/pagefind/pagefind-entry.json
@@ -1 +1 @@
-{"version":"1.1.1","languages":{"en":{"hash":"en_28bbe8ceb8","wasm":"en","page_count":37}}}
\ No newline at end of file
+{"version":"1.1.1","languages":{"en":{"hash":"en_fa7d4060b3","wasm":"en","page_count":38}}}
\ No newline at end of file
diff --git a/snapshots/tng/pagefind/pagefind.en_28bbe8ceb8.pf_meta b/snapshots/tng/pagefind/pagefind.en_28bbe8ceb8.pf_meta
deleted file mode 100644
index 700d2d18a..000000000
Binary files a/snapshots/tng/pagefind/pagefind.en_28bbe8ceb8.pf_meta and /dev/null differ
diff --git a/snapshots/tng/pagefind/pagefind.en_fa7d4060b3.pf_meta b/snapshots/tng/pagefind/pagefind.en_fa7d4060b3.pf_meta
new file mode 100644
index 000000000..b95d16007
Binary files /dev/null and b/snapshots/tng/pagefind/pagefind.en_fa7d4060b3.pf_meta differ
diff --git a/snapshots/tng/sitemap-0.xml b/snapshots/tng/sitemap-0.xml
index 75527f4e0..c1b070b2f 100644
--- a/snapshots/tng/sitemap-0.xml
+++ b/snapshots/tng/sitemap-0.xml
@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://snapshots.slint.dev/tng/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/dialog/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/flickable/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/focusscope/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/gridlayout/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/horizontallayout/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/image/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/path/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/popupwindow/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/rectangle/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/swipegestrurehandler/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/text/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/textinput/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/timer/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/toucharea/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/verticallayout/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/window/</loc></url><url><loc>https://snapshots.slint.dev/tng/getting-started/intro/</loc></url><url><loc>https://snapshots.slint.dev/tng/getting-started/which_language/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/animation/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/components/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/functions/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/layouts/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/philosophy/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/reactive/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/states/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/types/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/conclusion/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/creating_the_tiles/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/from_one_to_multiple_tiles/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/game_logic/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/getting_started/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/ideas_for_the_reader/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/memory_tile/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/polishing_the_tile/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/quickstart/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/running_in_a_browser/</loc></url></urlset>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://snapshots.slint.dev/tng/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/dialog/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/flickable/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/focusscope/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/gridlayout/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/horizontallayout/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/image/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/path/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/popupwindow/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/rectangle/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/swipegestrurehandler/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/text/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/textinput/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/timer/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/toucharea/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/verticallayout/</loc></url><url><loc>https://snapshots.slint.dev/tng/elements/window/</loc></url><url><loc>https://snapshots.slint.dev/tng/getting-started/intro/</loc></url><url><loc>https://snapshots.slint.dev/tng/getting-started/which_language/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/animation/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/basics/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/components/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/functions/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/intro/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/layouts/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/reactive/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/states/</loc></url><url><loc>https://snapshots.slint.dev/tng/guide/types/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/conclusion/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/creating_the_tiles/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/from_one_to_multiple_tiles/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/game_logic/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/getting_started/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/ideas_for_the_reader/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/memory_tile/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/polishing_the_tile/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/quickstart/</loc></url><url><loc>https://snapshots.slint.dev/tng/tutorial/running_in_a_browser/</loc></url></urlset>
\ No newline at end of file
diff --git a/snapshots/tng/tutorial/conclusion/index.html b/snapshots/tng/tutorial/conclusion/index.html
index fef27b11f..5efbe7bf5 100644
--- a/snapshots/tng/tutorial/conclusion/index.html
+++ b/snapshots/tng/tutorial/conclusion/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/tutorial/creating_the_tiles/index.html b/snapshots/tng/tutorial/creating_the_tiles/index.html
index 1f6c76000..23c844786 100644
--- a/snapshots/tng/tutorial/creating_the_tiles/index.html
+++ b/snapshots/tng/tutorial/creating_the_tiles/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><script src="/tng/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
@@ -109,19 +110,19 @@
 	}
 	customElements.define('starlight-tabs-restore', StarlightTabsRestore);
 })()
-</script><starlight-tabs data-sync-key="dev-language" class="astro-lisrjliy"> <div class="tablist-wrapper not-content astro-lisrjliy"> <ul role="tablist" class="astro-lisrjliy"> <li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-3" id="tab-3" aria-selected="true" tabindex="0" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M0.024 11.935L0.024 11.935Q0.024 9.398 0.841 7.377Q1.659 5.356 2.970 4.045Q4.282 2.733 6.216 1.873L6.216 1.873Q7.722 1.185 10.130 1.185L10.130 1.185Q12.151 1.185 13.763 2.002Q15.376 2.819 16.451 3.894L16.451 3.894L13.484 7.248L13.140 6.990Q12.409 6.431 12.021 6.302L12.021 6.302L11.549 6.173Q10.689 5.915 10.130 5.915L10.130 5.915Q9.184 5.915 8.367 6.302L8.367 6.302Q7.463 6.775 6.905 7.528Q6.346 8.280 5.959 9.441Q5.572 10.602 5.572 11.935L5.572 11.935Q5.572 15.031 6.905 16.364L6.905 16.364Q7.593 17.224 8.453 17.611Q9.313 17.998 10.387 17.998Q11.463 17.998 12.280 17.611L12.280 17.611Q13.183 17.138 13.742 16.364L13.742 16.364L16.709 19.761Q15.462 21.180 13.742 22.041L13.742 22.041Q12.151 22.814 10.130 22.814L10.130 22.814Q8.238 22.814 6.216 22.169L6.216 22.169Q4.411 21.567 2.992 20.148L2.992 20.148Q2.389 19.503 1.831 18.471L1.831 18.471Q1.530 17.869 0.970 16.537L0.970 16.537Q0.024 14.644 0.024 11.935ZM13.355 10.731L13.355 8.452L11.463 8.452L11.463 10.731L9.313 10.731L9.313 12.623L11.463 12.623L11.463 15.031L13.355 15.031L13.355 12.623L15.505 12.623L15.505 10.731L13.355 10.731ZM23.976 10.602L21.396 10.602L21.396 7.936L19.117 7.936L19.117 10.602L16.580 10.602L16.580 12.881L19.117 12.881L19.117 15.720L21.396 15.720L21.396 12.881L23.976 12.881L23.976 10.602Z"/></svg>  C++ </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-4" id="tab-4" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5.376 14.300L5.376 3.352L9.286 3.352L9.286 14.300Q9.286 17.842 7.630 19.452L7.630 19.452Q6.112 20.924 3.076 20.924L3.076 20.924Q2.386 20.924 1.558 20.809Q0.730 20.694 0.224 20.464L0.224 20.464L0.638 17.336Q1.512 17.750 2.662 17.750L2.662 17.750Q3.950 17.750 4.594 17.060L4.594 17.060Q5.376 16.232 5.376 14.300L5.376 14.300ZM11.862 19.912L12.736 16.600Q13.564 17.060 14.668 17.382L14.668 17.382Q15.910 17.750 17.014 17.750L17.014 17.750Q18.394 17.750 19.084 17.267Q19.774 16.784 19.774 15.910Q19.774 15.036 19.130 14.507Q18.486 13.978 16.876 13.426L16.876 13.426Q12.138 11.770 12.138 8.274L12.138 8.274Q12.138 5.974 13.909 4.525Q15.680 3.076 18.762 3.076L18.762 3.076Q21.200 3.076 23.224 3.950L23.224 3.950L22.350 7.124L22.074 6.986Q21.246 6.664 20.740 6.526L20.740 6.526Q19.774 6.250 18.762 6.250L18.762 6.250Q17.520 6.250 16.853 6.733Q16.186 7.216 16.186 7.998Q16.186 8.780 16.922 9.286L16.922 9.286Q17.474 9.700 19.314 10.436L19.314 10.436Q21.614 11.310 22.695 12.552Q23.776 13.794 23.776 15.588L23.776 15.588Q23.776 17.888 22.028 19.314L22.028 19.314Q20.142 20.924 16.738 20.924L16.738 20.924Q15.404 20.924 13.932 20.556L13.932 20.556Q12.782 20.326 11.862 19.912L11.862 19.912Z"/></svg>  NodeJS </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-5" id="tab-5" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M18.419 2.539L18.419 2.983L18.419 3.686L18.530 3.797L18.642 3.797Q18.826 3.760 19.178 3.704Q19.529 3.649 19.696 3.575Q19.863 3.501 19.992 3.630Q20.122 3.760 20.047 3.926Q19.973 4.093 19.918 4.444Q19.863 4.796 19.825 4.981L19.825 4.981L19.825 5.092L19.936 5.203Q19.936 5.314 20.159 5.314L20.159 5.314L21.194 5.314Q21.564 5.314 21.527 5.647L21.527 5.647L21.527 5.906Q21.453 6.128 21.232 6.572L21.232 6.572L21.084 6.831L21.084 6.942L21.157 7.016Q21.194 7.090 21.194 7.164L21.194 7.164L21.305 7.164Q21.491 7.238 21.842 7.293Q22.194 7.349 22.360 7.367Q22.526 7.386 22.601 7.589Q22.674 7.793 22.601 7.978L22.601 7.978L22.305 8.385Q22.082 8.644 22.008 8.792L22.008 8.792L22.008 9.014Q22.008 9.088 22.119 9.162L22.119 9.162L22.230 9.236L23.155 9.606Q23.340 9.680 23.396 9.846Q23.451 10.013 23.267 10.161L23.267 10.161Q22.822 10.642 22.489 10.864L22.489 10.864L22.489 11.197L22.526 11.271Q22.637 11.308 22.712 11.308L22.712 11.308L22.970 11.493Q23.303 11.715 23.488 11.789Q23.674 11.863 23.674 12.066Q23.674 12.270 23.526 12.381L23.526 12.381L22.601 12.936L22.601 13.047Q22.601 13.232 22.601 13.269Q22.601 13.306 22.712 13.417L22.712 13.417Q23.155 13.861 23.415 13.972L23.415 13.972Q23.563 14.157 23.507 14.305Q23.451 14.453 23.267 14.564L23.267 14.564Q22.601 14.786 22.341 14.897L22.341 14.897L22.305 14.934Q22.230 14.971 22.194 15.045Q22.156 15.119 22.230 15.267L22.230 15.267L22.230 15.378Q22.415 15.526 22.637 15.933L22.637 15.933L22.822 16.192Q22.896 16.266 22.878 16.414Q22.860 16.562 22.712 16.636L22.712 16.636L22.601 16.673L22.453 16.747Q22.305 16.747 22.008 16.821Q21.712 16.895 21.564 16.895L21.564 16.895L21.416 16.895Q21.416 16.932 21.361 16.987Q21.305 17.043 21.305 17.117L21.305 17.117L21.343 17.228L21.416 17.339L21.787 18.153Q21.860 18.227 21.805 18.375Q21.749 18.523 21.675 18.597L21.675 18.597L20.270 18.597Q20.159 18.745 20.159 18.967L20.159 18.967Q20.232 19.115 20.288 19.411Q20.343 19.707 20.418 19.873Q20.491 20.040 20.343 20.188Q20.195 20.336 19.936 20.336L19.936 20.336Q19.752 20.299 19.400 20.243Q19.049 20.188 18.901 20.114L18.901 20.114L18.790 20.114L18.604 20.299Q18.567 20.336 18.642 20.336L18.642 20.336L18.642 21.372Q18.642 21.742 18.308 21.742L18.308 21.742L18.087 21.742Q17.605 21.594 17.162 21.261L17.162 21.261L17.050 21.261Q16.939 21.261 16.866 21.335Q16.791 21.409 16.791 21.520L16.791 21.520Q16.791 21.668 16.736 21.964Q16.680 22.260 16.680 22.426Q16.680 22.593 16.477 22.667Q16.273 22.741 16.125 22.667L16.125 22.667Q15.756 22.297 15.311 22.075L15.311 22.075L15.200 22.075Q15.090 22.075 15.015 22.149Q14.942 22.223 14.942 22.297L14.942 22.297L14.608 23.222Q14.497 23.481 14.276 23.481L14.276 23.481Q14.201 23.481 14.165 23.407L14.165 23.407L14.128 23.370Q13.683 22.889 13.462 22.556L13.462 22.556L13.203 22.556Q13.128 22.556 13.055 22.630Q12.980 22.704 12.980 22.778L12.980 22.778L12.537 23.592Q12.425 23.740 12.222 23.740Q12.018 23.740 11.945 23.592L11.945 23.592L11.352 22.667L11.020 22.667L10.206 23.481Q10.095 23.592 9.762 23.592L9.762 23.592Q9.651 23.592 9.651 23.370L9.651 23.370L9.280 22.260Q9.243 22.186 9.169 22.186L9.169 22.186L8.837 22.186Q8.651 22.371 8.281 22.593L8.281 22.593L8.023 22.778L7.800 22.667Q7.467 22.519 7.338 22.426Q7.208 22.334 7.208 22.186L7.208 22.186Q7.097 21.853 7.097 21.150L7.097 21.150L7.060 21.113Q7.060 21.039 6.986 21.039Q6.912 21.039 6.857 20.983Q6.801 20.928 6.764 20.928L6.764 20.928L6.616 20.928L6.505 21.039L5.691 21.372Q5.543 21.483 5.395 21.409Q5.247 21.335 5.247 21.150L5.247 21.150L5.247 19.892L5.136 19.781L5.026 19.781Q4.840 19.818 4.489 19.873Q4.138 19.929 3.971 20.003Q3.804 20.077 3.675 19.947Q3.545 19.818 3.619 19.651Q3.693 19.485 3.749 19.133Q3.804 18.782 3.841 18.597L3.841 18.597L3.841 18.486L3.731 18.375L2.583 18.375Q2.250 18.375 2.250 18.042L2.250 18.042L2.250 17.783Q2.324 17.561 2.583 17.117L2.583 17.117L2.694 16.858L2.694 16.710Q2.657 16.636 2.583 16.636L2.583 16.636Q2.583 16.562 2.510 16.562L2.510 16.562L2.472 16.525Q2.287 16.525 1.936 16.469Q1.584 16.414 1.418 16.414Q1.251 16.414 1.177 16.210Q1.103 16.007 1.214 15.822L1.214 15.822Q1.548 15.489 1.769 15.008L1.769 15.008L1.769 14.786L1.584 14.638Q1.510 14.564 1.436 14.564L1.436 14.564L0.622 14.231Q0.437 14.120 0.382 13.953Q0.326 13.787 0.511 13.639L0.511 13.639Q0.696 13.565 1.066 13.269L1.066 13.269Q1.288 13.047 1.436 12.936L1.436 12.936L1.436 12.714Q1.436 12.492 1.325 12.492L1.325 12.492L0.511 12.011Q0.326 11.937 0.326 11.733Q0.326 11.530 0.511 11.456L0.511 11.456L1.436 10.864L1.436 10.642L0.622 9.828Q0.548 9.754 0.548 9.606Q0.548 9.458 0.622 9.347L0.622 9.347L0.659 9.347Q0.733 9.310 0.733 9.236L0.733 9.236L1.769 8.903L1.769 8.792Q1.843 8.718 1.806 8.533L1.806 8.533L1.769 8.422Q1.658 8.311 1.492 8.089Q1.325 7.867 1.214 7.719Q1.103 7.571 1.177 7.367Q1.251 7.164 1.418 7.127Q1.584 7.090 1.936 7.034Q2.287 6.979 2.472 6.942L2.472 6.942L2.583 6.942Q2.583 6.868 2.639 6.812Q2.694 6.757 2.694 6.683L2.694 6.683L2.694 6.572L2.583 6.461L2.250 5.647Q2.139 5.499 2.213 5.351Q2.287 5.203 2.472 5.203L2.472 5.203L3.731 5.203L3.767 5.129Q3.767 5.092 3.841 5.092L3.841 5.092L3.841 4.981Q3.619 4.278 3.619 3.945L3.619 3.945Q3.545 3.760 3.675 3.630Q3.804 3.501 3.989 3.575L3.989 3.575Q4.322 3.575 5.026 3.797L5.026 3.797L5.136 3.797L5.284 3.649Q5.321 3.575 5.247 3.575L5.247 3.575L5.247 2.539Q5.247 2.206 5.580 2.206L5.580 2.206L5.840 2.206Q6.061 2.280 6.505 2.539L6.505 2.539L6.764 2.650L6.912 2.650Q6.986 2.613 6.986 2.539L6.986 2.539Q7.060 2.539 7.060 2.465L7.060 2.465L7.097 2.428Q7.097 2.243 7.153 1.891Q7.208 1.540 7.208 1.373Q7.208 1.207 7.412 1.133Q7.615 1.059 7.800 1.133L7.800 1.133Q8.133 1.503 8.614 1.725L8.614 1.725L8.837 1.725L8.947 1.614L8.947 1.540Q8.985 1.466 9.058 1.392L9.058 1.392L9.392 0.578Q9.503 0.430 9.576 0.393Q9.651 0.356 9.872 0.356L9.872 0.356L9.983 0.467Q10.058 0.652 10.354 1.022L10.354 1.022Q10.576 1.244 10.686 1.392L10.686 1.392L10.797 1.392Q10.872 1.392 10.945 1.318L10.945 1.318L11.020 1.281L11.500 0.467Q11.648 0.282 11.815 0.263Q11.982 0.245 12.055 0.356L12.055 0.356L12.166 0.467L12.759 1.392L13.091 1.392Q13.166 1.392 13.203 1.318L13.203 1.318L13.239 1.281Q13.683 0.800 13.794 0.578L13.794 0.578Q13.869 0.504 14.017 0.504Q14.165 0.504 14.276 0.578L14.276 0.578L14.276 0.689Q14.497 1.392 14.608 1.614L14.608 1.614L14.720 1.725L14.942 1.725Q15.459 1.540 15.866 1.133L15.866 1.133Q16.052 1.059 16.255 1.133Q16.459 1.207 16.459 1.373Q16.459 1.540 16.514 1.891Q16.569 2.243 16.569 2.428L16.569 2.428L16.607 2.465Q16.607 2.539 16.680 2.539L16.680 2.539L16.791 2.539Q16.902 2.613 16.976 2.613Q17.050 2.613 17.050 2.539L17.050 2.539Q17.273 2.428 17.976 2.206L17.976 2.206Q18.160 2.095 18.290 2.187Q18.419 2.280 18.419 2.539L18.419 2.539ZM5.580 6.128L5.580 6.128L14.386 6.128Q15.090 6.128 15.422 6.239L15.422 6.239Q16.532 6.609 17.050 7.275L17.050 7.275Q17.605 7.867 17.605 8.681L17.605 8.681Q17.605 9.347 17.273 10.050L17.273 10.050Q16.902 10.605 16.348 10.975L16.348 10.975Q16.125 11.197 15.977 11.197L15.977 11.197Q16.052 11.271 16.163 11.326Q16.273 11.382 16.348 11.456L16.348 11.456L16.532 11.604Q16.939 11.974 17.050 12.233L17.050 12.233Q17.383 12.788 17.383 13.417L17.383 13.417Q17.383 13.528 17.605 13.750L17.605 13.750Q17.753 13.898 18.049 13.972L18.049 13.972Q18.197 13.972 18.549 13.972Q18.901 13.972 19.122 13.750L19.122 13.750Q19.270 13.602 19.381 13.306L19.381 13.306L19.456 13.047L19.456 12.492Q19.456 12.381 19.474 12.381Q19.492 12.381 19.566 12.381L19.566 12.381L20.380 12.381L20.380 10.864Q20.232 10.790 19.881 10.623Q19.529 10.457 19.345 10.383L19.345 10.383Q19.308 10.346 19.122 10.290Q18.938 10.235 18.901 10.161L18.901 10.161Q18.346 9.976 18.530 9.236L18.530 9.236Q19.011 8.089 19.345 7.497L19.345 7.497L19.345 7.386Q18.901 6.683 18.642 6.387L18.642 6.387Q18.197 5.832 17.716 5.425L17.716 5.425Q16.014 3.871 13.573 3.353L13.573 3.353L13.462 3.353Q12.759 4.056 12.314 4.389L12.314 4.389Q12.130 4.574 11.834 4.574Q11.538 4.574 11.352 4.389L11.352 4.389L10.317 3.353L10.206 3.353Q9.762 3.464 9.058 3.686L9.058 3.686Q7.245 4.352 5.802 5.758L5.802 5.758Q5.580 6.017 5.580 6.128ZM18.642 16.747L18.642 16.747L15.200 16.747Q14.831 16.747 14.720 16.636L14.720 16.636Q14.128 16.340 13.905 15.489L13.905 15.489L13.869 15.267Q13.683 14.601 13.683 14.231L13.683 14.231Q13.683 13.972 13.480 13.528Q13.276 13.084 12.944 12.843Q12.610 12.603 12.166 12.603L12.166 12.603L10.095 12.603L10.095 14.083L12.166 14.083Q12.277 14.083 12.296 14.101Q12.314 14.120 12.314 14.231L12.314 14.231L12.314 16.525Q12.314 16.599 12.296 16.617Q12.277 16.636 12.166 16.636L12.166 16.636L5.247 16.636Q5.469 17.006 5.950 17.450L5.950 17.450L6.061 17.450Q6.986 17.228 7.430 17.228L7.430 17.228Q7.689 17.154 7.930 17.283Q8.171 17.413 8.244 17.672L8.244 17.672L8.614 19.189L8.614 19.300Q9.540 19.670 9.983 19.781L9.983 19.781Q10.761 20.003 11.352 20.003L11.352 20.003Q11.907 20.077 12.573 20.040L12.573 20.040Q12.980 20.003 13.794 19.892L13.794 19.892Q14.386 19.781 15.534 19.300L15.534 19.300L15.534 19.189L15.866 17.672Q16.088 17.080 16.680 17.228L16.680 17.228L18.087 17.561L18.197 17.561Q18.197 17.228 18.642 16.747ZM6.283 8.681L4.914 8.681L5.247 9.347L5.284 9.458Q5.321 9.643 5.247 9.717L5.247 9.717Q5.247 9.902 4.988 10.087L4.988 10.087L4.914 10.161Q3.989 10.642 3.508 10.753L3.508 10.753L3.434 10.753Q3.397 10.790 3.397 10.864L3.397 10.864L3.397 11.456Q3.397 12.603 3.731 13.972L3.731 13.972L3.767 14.046Q3.767 14.120 3.841 14.120L3.841 14.120L6.283 14.120L6.283 8.681ZM9.872 10.272L9.872 10.272Q9.910 10.272 9.947 10.272L9.947 10.272L9.872 10.272L12.537 10.272Q12.980 10.272 13.239 10.161L13.239 10.161L13.351 10.087Q13.498 9.976 13.573 9.809Q13.646 9.643 13.628 9.402Q13.610 9.162 13.462 9.014L13.462 9.014Q13.091 8.681 12.648 8.681L12.648 8.681L9.762 8.681Q9.872 9.236 9.872 10.272ZM2.917 9.125L2.917 9.125Q2.917 9.384 3.138 9.606Q3.360 9.828 3.619 9.828Q3.878 9.828 4.100 9.606Q4.322 9.384 4.322 9.125Q4.322 8.866 4.100 8.644Q3.878 8.422 3.619 8.422Q3.360 8.422 3.138 8.644Q2.917 8.866 2.917 9.125ZM17.605 18.856L17.605 18.856Q17.605 18.597 17.402 18.375Q17.198 18.153 16.921 18.153Q16.643 18.153 16.440 18.375Q16.236 18.597 16.236 18.856Q16.236 19.115 16.440 19.318Q16.643 19.522 16.921 19.522Q17.198 19.522 17.402 19.337Q17.605 19.152 17.605 18.856ZM6.764 18.153L6.764 18.153Q6.468 18.153 6.265 18.375Q6.061 18.597 6.061 18.856Q6.061 19.115 6.265 19.318Q6.468 19.522 6.746 19.522Q7.023 19.522 7.227 19.318Q7.430 19.115 7.430 18.856Q7.430 18.597 7.227 18.375Q7.023 18.153 6.764 18.153ZM12.537 2.983L12.537 2.983Q12.537 2.724 12.352 2.520Q12.166 2.317 11.852 2.317Q11.538 2.317 11.334 2.502Q11.131 2.687 11.131 2.983Q11.131 3.279 11.316 3.482Q11.500 3.686 11.834 3.686L11.834 3.686Q12.314 3.686 12.537 2.983ZM20.047 9.939L20.047 9.939Q20.306 9.939 20.529 9.717Q20.750 9.495 20.750 9.236Q20.750 8.977 20.529 8.755Q20.306 8.533 20.047 8.533Q19.788 8.533 19.566 8.755Q19.345 8.977 19.345 9.254Q19.345 9.532 19.529 9.735Q19.715 9.939 20.047 9.939Z"/></svg>  Rust </a> </li> </ul> </div> <section id="tab-panel-3" aria-labelledby="tab-3" role="tabpanel"> <p>Change the <code dir="auto">main</code> function and includes in <code dir="auto">src/main.cpp</code> to the following:</p><div class="expressive-code"><link rel="stylesheet" href="/tng/_astro/ec.fq3m0.css"><script type="module" src="/tng/_astro/ec.8zarh.js"></script><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="cpp"><code><div class="ec-line"><div class="code"><span style="--0:#C586C0;--1:#AC00D8">#include</span><span style="--0:#569CD6;--1:#0000FF"> </span><span style="--0:#CE9178;--1:#A31515">&#x3C;random></span><span style="--0:#569CD6;--1:#0000FF"> </span><span style="--0:#76A162;--1:#007A00">// Added</span></div></div><div class="ec-line"><div class="code">
+</script><starlight-tabs data-sync-key="dev-language" class="astro-lisrjliy"> <div class="tablist-wrapper not-content astro-lisrjliy"> <ul role="tablist" class="astro-lisrjliy"> <li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-6" id="tab-6" aria-selected="true" tabindex="0" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M0.024 11.935L0.024 11.935Q0.024 9.398 0.841 7.377Q1.659 5.356 2.970 4.045Q4.282 2.733 6.216 1.873L6.216 1.873Q7.722 1.185 10.130 1.185L10.130 1.185Q12.151 1.185 13.763 2.002Q15.376 2.819 16.451 3.894L16.451 3.894L13.484 7.248L13.140 6.990Q12.409 6.431 12.021 6.302L12.021 6.302L11.549 6.173Q10.689 5.915 10.130 5.915L10.130 5.915Q9.184 5.915 8.367 6.302L8.367 6.302Q7.463 6.775 6.905 7.528Q6.346 8.280 5.959 9.441Q5.572 10.602 5.572 11.935L5.572 11.935Q5.572 15.031 6.905 16.364L6.905 16.364Q7.593 17.224 8.453 17.611Q9.313 17.998 10.387 17.998Q11.463 17.998 12.280 17.611L12.280 17.611Q13.183 17.138 13.742 16.364L13.742 16.364L16.709 19.761Q15.462 21.180 13.742 22.041L13.742 22.041Q12.151 22.814 10.130 22.814L10.130 22.814Q8.238 22.814 6.216 22.169L6.216 22.169Q4.411 21.567 2.992 20.148L2.992 20.148Q2.389 19.503 1.831 18.471L1.831 18.471Q1.530 17.869 0.970 16.537L0.970 16.537Q0.024 14.644 0.024 11.935ZM13.355 10.731L13.355 8.452L11.463 8.452L11.463 10.731L9.313 10.731L9.313 12.623L11.463 12.623L11.463 15.031L13.355 15.031L13.355 12.623L15.505 12.623L15.505 10.731L13.355 10.731ZM23.976 10.602L21.396 10.602L21.396 7.936L19.117 7.936L19.117 10.602L16.580 10.602L16.580 12.881L19.117 12.881L19.117 15.720L21.396 15.720L21.396 12.881L23.976 12.881L23.976 10.602Z"/></svg>  C++ </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-7" id="tab-7" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5.376 14.300L5.376 3.352L9.286 3.352L9.286 14.300Q9.286 17.842 7.630 19.452L7.630 19.452Q6.112 20.924 3.076 20.924L3.076 20.924Q2.386 20.924 1.558 20.809Q0.730 20.694 0.224 20.464L0.224 20.464L0.638 17.336Q1.512 17.750 2.662 17.750L2.662 17.750Q3.950 17.750 4.594 17.060L4.594 17.060Q5.376 16.232 5.376 14.300L5.376 14.300ZM11.862 19.912L12.736 16.600Q13.564 17.060 14.668 17.382L14.668 17.382Q15.910 17.750 17.014 17.750L17.014 17.750Q18.394 17.750 19.084 17.267Q19.774 16.784 19.774 15.910Q19.774 15.036 19.130 14.507Q18.486 13.978 16.876 13.426L16.876 13.426Q12.138 11.770 12.138 8.274L12.138 8.274Q12.138 5.974 13.909 4.525Q15.680 3.076 18.762 3.076L18.762 3.076Q21.200 3.076 23.224 3.950L23.224 3.950L22.350 7.124L22.074 6.986Q21.246 6.664 20.740 6.526L20.740 6.526Q19.774 6.250 18.762 6.250L18.762 6.250Q17.520 6.250 16.853 6.733Q16.186 7.216 16.186 7.998Q16.186 8.780 16.922 9.286L16.922 9.286Q17.474 9.700 19.314 10.436L19.314 10.436Q21.614 11.310 22.695 12.552Q23.776 13.794 23.776 15.588L23.776 15.588Q23.776 17.888 22.028 19.314L22.028 19.314Q20.142 20.924 16.738 20.924L16.738 20.924Q15.404 20.924 13.932 20.556L13.932 20.556Q12.782 20.326 11.862 19.912L11.862 19.912Z"/></svg>  NodeJS </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-8" id="tab-8" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M18.419 2.539L18.419 2.983L18.419 3.686L18.530 3.797L18.642 3.797Q18.826 3.760 19.178 3.704Q19.529 3.649 19.696 3.575Q19.863 3.501 19.992 3.630Q20.122 3.760 20.047 3.926Q19.973 4.093 19.918 4.444Q19.863 4.796 19.825 4.981L19.825 4.981L19.825 5.092L19.936 5.203Q19.936 5.314 20.159 5.314L20.159 5.314L21.194 5.314Q21.564 5.314 21.527 5.647L21.527 5.647L21.527 5.906Q21.453 6.128 21.232 6.572L21.232 6.572L21.084 6.831L21.084 6.942L21.157 7.016Q21.194 7.090 21.194 7.164L21.194 7.164L21.305 7.164Q21.491 7.238 21.842 7.293Q22.194 7.349 22.360 7.367Q22.526 7.386 22.601 7.589Q22.674 7.793 22.601 7.978L22.601 7.978L22.305 8.385Q22.082 8.644 22.008 8.792L22.008 8.792L22.008 9.014Q22.008 9.088 22.119 9.162L22.119 9.162L22.230 9.236L23.155 9.606Q23.340 9.680 23.396 9.846Q23.451 10.013 23.267 10.161L23.267 10.161Q22.822 10.642 22.489 10.864L22.489 10.864L22.489 11.197L22.526 11.271Q22.637 11.308 22.712 11.308L22.712 11.308L22.970 11.493Q23.303 11.715 23.488 11.789Q23.674 11.863 23.674 12.066Q23.674 12.270 23.526 12.381L23.526 12.381L22.601 12.936L22.601 13.047Q22.601 13.232 22.601 13.269Q22.601 13.306 22.712 13.417L22.712 13.417Q23.155 13.861 23.415 13.972L23.415 13.972Q23.563 14.157 23.507 14.305Q23.451 14.453 23.267 14.564L23.267 14.564Q22.601 14.786 22.341 14.897L22.341 14.897L22.305 14.934Q22.230 14.971 22.194 15.045Q22.156 15.119 22.230 15.267L22.230 15.267L22.230 15.378Q22.415 15.526 22.637 15.933L22.637 15.933L22.822 16.192Q22.896 16.266 22.878 16.414Q22.860 16.562 22.712 16.636L22.712 16.636L22.601 16.673L22.453 16.747Q22.305 16.747 22.008 16.821Q21.712 16.895 21.564 16.895L21.564 16.895L21.416 16.895Q21.416 16.932 21.361 16.987Q21.305 17.043 21.305 17.117L21.305 17.117L21.343 17.228L21.416 17.339L21.787 18.153Q21.860 18.227 21.805 18.375Q21.749 18.523 21.675 18.597L21.675 18.597L20.270 18.597Q20.159 18.745 20.159 18.967L20.159 18.967Q20.232 19.115 20.288 19.411Q20.343 19.707 20.418 19.873Q20.491 20.040 20.343 20.188Q20.195 20.336 19.936 20.336L19.936 20.336Q19.752 20.299 19.400 20.243Q19.049 20.188 18.901 20.114L18.901 20.114L18.790 20.114L18.604 20.299Q18.567 20.336 18.642 20.336L18.642 20.336L18.642 21.372Q18.642 21.742 18.308 21.742L18.308 21.742L18.087 21.742Q17.605 21.594 17.162 21.261L17.162 21.261L17.050 21.261Q16.939 21.261 16.866 21.335Q16.791 21.409 16.791 21.520L16.791 21.520Q16.791 21.668 16.736 21.964Q16.680 22.260 16.680 22.426Q16.680 22.593 16.477 22.667Q16.273 22.741 16.125 22.667L16.125 22.667Q15.756 22.297 15.311 22.075L15.311 22.075L15.200 22.075Q15.090 22.075 15.015 22.149Q14.942 22.223 14.942 22.297L14.942 22.297L14.608 23.222Q14.497 23.481 14.276 23.481L14.276 23.481Q14.201 23.481 14.165 23.407L14.165 23.407L14.128 23.370Q13.683 22.889 13.462 22.556L13.462 22.556L13.203 22.556Q13.128 22.556 13.055 22.630Q12.980 22.704 12.980 22.778L12.980 22.778L12.537 23.592Q12.425 23.740 12.222 23.740Q12.018 23.740 11.945 23.592L11.945 23.592L11.352 22.667L11.020 22.667L10.206 23.481Q10.095 23.592 9.762 23.592L9.762 23.592Q9.651 23.592 9.651 23.370L9.651 23.370L9.280 22.260Q9.243 22.186 9.169 22.186L9.169 22.186L8.837 22.186Q8.651 22.371 8.281 22.593L8.281 22.593L8.023 22.778L7.800 22.667Q7.467 22.519 7.338 22.426Q7.208 22.334 7.208 22.186L7.208 22.186Q7.097 21.853 7.097 21.150L7.097 21.150L7.060 21.113Q7.060 21.039 6.986 21.039Q6.912 21.039 6.857 20.983Q6.801 20.928 6.764 20.928L6.764 20.928L6.616 20.928L6.505 21.039L5.691 21.372Q5.543 21.483 5.395 21.409Q5.247 21.335 5.247 21.150L5.247 21.150L5.247 19.892L5.136 19.781L5.026 19.781Q4.840 19.818 4.489 19.873Q4.138 19.929 3.971 20.003Q3.804 20.077 3.675 19.947Q3.545 19.818 3.619 19.651Q3.693 19.485 3.749 19.133Q3.804 18.782 3.841 18.597L3.841 18.597L3.841 18.486L3.731 18.375L2.583 18.375Q2.250 18.375 2.250 18.042L2.250 18.042L2.250 17.783Q2.324 17.561 2.583 17.117L2.583 17.117L2.694 16.858L2.694 16.710Q2.657 16.636 2.583 16.636L2.583 16.636Q2.583 16.562 2.510 16.562L2.510 16.562L2.472 16.525Q2.287 16.525 1.936 16.469Q1.584 16.414 1.418 16.414Q1.251 16.414 1.177 16.210Q1.103 16.007 1.214 15.822L1.214 15.822Q1.548 15.489 1.769 15.008L1.769 15.008L1.769 14.786L1.584 14.638Q1.510 14.564 1.436 14.564L1.436 14.564L0.622 14.231Q0.437 14.120 0.382 13.953Q0.326 13.787 0.511 13.639L0.511 13.639Q0.696 13.565 1.066 13.269L1.066 13.269Q1.288 13.047 1.436 12.936L1.436 12.936L1.436 12.714Q1.436 12.492 1.325 12.492L1.325 12.492L0.511 12.011Q0.326 11.937 0.326 11.733Q0.326 11.530 0.511 11.456L0.511 11.456L1.436 10.864L1.436 10.642L0.622 9.828Q0.548 9.754 0.548 9.606Q0.548 9.458 0.622 9.347L0.622 9.347L0.659 9.347Q0.733 9.310 0.733 9.236L0.733 9.236L1.769 8.903L1.769 8.792Q1.843 8.718 1.806 8.533L1.806 8.533L1.769 8.422Q1.658 8.311 1.492 8.089Q1.325 7.867 1.214 7.719Q1.103 7.571 1.177 7.367Q1.251 7.164 1.418 7.127Q1.584 7.090 1.936 7.034Q2.287 6.979 2.472 6.942L2.472 6.942L2.583 6.942Q2.583 6.868 2.639 6.812Q2.694 6.757 2.694 6.683L2.694 6.683L2.694 6.572L2.583 6.461L2.250 5.647Q2.139 5.499 2.213 5.351Q2.287 5.203 2.472 5.203L2.472 5.203L3.731 5.203L3.767 5.129Q3.767 5.092 3.841 5.092L3.841 5.092L3.841 4.981Q3.619 4.278 3.619 3.945L3.619 3.945Q3.545 3.760 3.675 3.630Q3.804 3.501 3.989 3.575L3.989 3.575Q4.322 3.575 5.026 3.797L5.026 3.797L5.136 3.797L5.284 3.649Q5.321 3.575 5.247 3.575L5.247 3.575L5.247 2.539Q5.247 2.206 5.580 2.206L5.580 2.206L5.840 2.206Q6.061 2.280 6.505 2.539L6.505 2.539L6.764 2.650L6.912 2.650Q6.986 2.613 6.986 2.539L6.986 2.539Q7.060 2.539 7.060 2.465L7.060 2.465L7.097 2.428Q7.097 2.243 7.153 1.891Q7.208 1.540 7.208 1.373Q7.208 1.207 7.412 1.133Q7.615 1.059 7.800 1.133L7.800 1.133Q8.133 1.503 8.614 1.725L8.614 1.725L8.837 1.725L8.947 1.614L8.947 1.540Q8.985 1.466 9.058 1.392L9.058 1.392L9.392 0.578Q9.503 0.430 9.576 0.393Q9.651 0.356 9.872 0.356L9.872 0.356L9.983 0.467Q10.058 0.652 10.354 1.022L10.354 1.022Q10.576 1.244 10.686 1.392L10.686 1.392L10.797 1.392Q10.872 1.392 10.945 1.318L10.945 1.318L11.020 1.281L11.500 0.467Q11.648 0.282 11.815 0.263Q11.982 0.245 12.055 0.356L12.055 0.356L12.166 0.467L12.759 1.392L13.091 1.392Q13.166 1.392 13.203 1.318L13.203 1.318L13.239 1.281Q13.683 0.800 13.794 0.578L13.794 0.578Q13.869 0.504 14.017 0.504Q14.165 0.504 14.276 0.578L14.276 0.578L14.276 0.689Q14.497 1.392 14.608 1.614L14.608 1.614L14.720 1.725L14.942 1.725Q15.459 1.540 15.866 1.133L15.866 1.133Q16.052 1.059 16.255 1.133Q16.459 1.207 16.459 1.373Q16.459 1.540 16.514 1.891Q16.569 2.243 16.569 2.428L16.569 2.428L16.607 2.465Q16.607 2.539 16.680 2.539L16.680 2.539L16.791 2.539Q16.902 2.613 16.976 2.613Q17.050 2.613 17.050 2.539L17.050 2.539Q17.273 2.428 17.976 2.206L17.976 2.206Q18.160 2.095 18.290 2.187Q18.419 2.280 18.419 2.539L18.419 2.539ZM5.580 6.128L5.580 6.128L14.386 6.128Q15.090 6.128 15.422 6.239L15.422 6.239Q16.532 6.609 17.050 7.275L17.050 7.275Q17.605 7.867 17.605 8.681L17.605 8.681Q17.605 9.347 17.273 10.050L17.273 10.050Q16.902 10.605 16.348 10.975L16.348 10.975Q16.125 11.197 15.977 11.197L15.977 11.197Q16.052 11.271 16.163 11.326Q16.273 11.382 16.348 11.456L16.348 11.456L16.532 11.604Q16.939 11.974 17.050 12.233L17.050 12.233Q17.383 12.788 17.383 13.417L17.383 13.417Q17.383 13.528 17.605 13.750L17.605 13.750Q17.753 13.898 18.049 13.972L18.049 13.972Q18.197 13.972 18.549 13.972Q18.901 13.972 19.122 13.750L19.122 13.750Q19.270 13.602 19.381 13.306L19.381 13.306L19.456 13.047L19.456 12.492Q19.456 12.381 19.474 12.381Q19.492 12.381 19.566 12.381L19.566 12.381L20.380 12.381L20.380 10.864Q20.232 10.790 19.881 10.623Q19.529 10.457 19.345 10.383L19.345 10.383Q19.308 10.346 19.122 10.290Q18.938 10.235 18.901 10.161L18.901 10.161Q18.346 9.976 18.530 9.236L18.530 9.236Q19.011 8.089 19.345 7.497L19.345 7.497L19.345 7.386Q18.901 6.683 18.642 6.387L18.642 6.387Q18.197 5.832 17.716 5.425L17.716 5.425Q16.014 3.871 13.573 3.353L13.573 3.353L13.462 3.353Q12.759 4.056 12.314 4.389L12.314 4.389Q12.130 4.574 11.834 4.574Q11.538 4.574 11.352 4.389L11.352 4.389L10.317 3.353L10.206 3.353Q9.762 3.464 9.058 3.686L9.058 3.686Q7.245 4.352 5.802 5.758L5.802 5.758Q5.580 6.017 5.580 6.128ZM18.642 16.747L18.642 16.747L15.200 16.747Q14.831 16.747 14.720 16.636L14.720 16.636Q14.128 16.340 13.905 15.489L13.905 15.489L13.869 15.267Q13.683 14.601 13.683 14.231L13.683 14.231Q13.683 13.972 13.480 13.528Q13.276 13.084 12.944 12.843Q12.610 12.603 12.166 12.603L12.166 12.603L10.095 12.603L10.095 14.083L12.166 14.083Q12.277 14.083 12.296 14.101Q12.314 14.120 12.314 14.231L12.314 14.231L12.314 16.525Q12.314 16.599 12.296 16.617Q12.277 16.636 12.166 16.636L12.166 16.636L5.247 16.636Q5.469 17.006 5.950 17.450L5.950 17.450L6.061 17.450Q6.986 17.228 7.430 17.228L7.430 17.228Q7.689 17.154 7.930 17.283Q8.171 17.413 8.244 17.672L8.244 17.672L8.614 19.189L8.614 19.300Q9.540 19.670 9.983 19.781L9.983 19.781Q10.761 20.003 11.352 20.003L11.352 20.003Q11.907 20.077 12.573 20.040L12.573 20.040Q12.980 20.003 13.794 19.892L13.794 19.892Q14.386 19.781 15.534 19.300L15.534 19.300L15.534 19.189L15.866 17.672Q16.088 17.080 16.680 17.228L16.680 17.228L18.087 17.561L18.197 17.561Q18.197 17.228 18.642 16.747ZM6.283 8.681L4.914 8.681L5.247 9.347L5.284 9.458Q5.321 9.643 5.247 9.717L5.247 9.717Q5.247 9.902 4.988 10.087L4.988 10.087L4.914 10.161Q3.989 10.642 3.508 10.753L3.508 10.753L3.434 10.753Q3.397 10.790 3.397 10.864L3.397 10.864L3.397 11.456Q3.397 12.603 3.731 13.972L3.731 13.972L3.767 14.046Q3.767 14.120 3.841 14.120L3.841 14.120L6.283 14.120L6.283 8.681ZM9.872 10.272L9.872 10.272Q9.910 10.272 9.947 10.272L9.947 10.272L9.872 10.272L12.537 10.272Q12.980 10.272 13.239 10.161L13.239 10.161L13.351 10.087Q13.498 9.976 13.573 9.809Q13.646 9.643 13.628 9.402Q13.610 9.162 13.462 9.014L13.462 9.014Q13.091 8.681 12.648 8.681L12.648 8.681L9.762 8.681Q9.872 9.236 9.872 10.272ZM2.917 9.125L2.917 9.125Q2.917 9.384 3.138 9.606Q3.360 9.828 3.619 9.828Q3.878 9.828 4.100 9.606Q4.322 9.384 4.322 9.125Q4.322 8.866 4.100 8.644Q3.878 8.422 3.619 8.422Q3.360 8.422 3.138 8.644Q2.917 8.866 2.917 9.125ZM17.605 18.856L17.605 18.856Q17.605 18.597 17.402 18.375Q17.198 18.153 16.921 18.153Q16.643 18.153 16.440 18.375Q16.236 18.597 16.236 18.856Q16.236 19.115 16.440 19.318Q16.643 19.522 16.921 19.522Q17.198 19.522 17.402 19.337Q17.605 19.152 17.605 18.856ZM6.764 18.153L6.764 18.153Q6.468 18.153 6.265 18.375Q6.061 18.597 6.061 18.856Q6.061 19.115 6.265 19.318Q6.468 19.522 6.746 19.522Q7.023 19.522 7.227 19.318Q7.430 19.115 7.430 18.856Q7.430 18.597 7.227 18.375Q7.023 18.153 6.764 18.153ZM12.537 2.983L12.537 2.983Q12.537 2.724 12.352 2.520Q12.166 2.317 11.852 2.317Q11.538 2.317 11.334 2.502Q11.131 2.687 11.131 2.983Q11.131 3.279 11.316 3.482Q11.500 3.686 11.834 3.686L11.834 3.686Q12.314 3.686 12.537 2.983ZM20.047 9.939L20.047 9.939Q20.306 9.939 20.529 9.717Q20.750 9.495 20.750 9.236Q20.750 8.977 20.529 8.755Q20.306 8.533 20.047 8.533Q19.788 8.533 19.566 8.755Q19.345 8.977 19.345 9.254Q19.345 9.532 19.529 9.735Q19.715 9.939 20.047 9.939Z"/></svg>  Rust </a> </li> </ul> </div> <section id="tab-panel-6" aria-labelledby="tab-6" role="tabpanel"> <p>Change the <code dir="auto">main</code> function and includes in <code dir="auto">src/main.cpp</code> to the following:</p><div class="expressive-code"><link rel="stylesheet" href="/tng/_astro/ec.fq3m0.css"><script type="module" src="/tng/_astro/ec.8zarh.js"></script><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="cpp"><code><div class="ec-line"><div class="code"><span style="--0:#C586C0;--1:#AC00D8">#include</span><span style="--0:#569CD6;--1:#0000FF"> </span><span style="--0:#CE9178;--1:#A31515">&#x3C;random></span><span style="--0:#569CD6;--1:#0000FF"> </span><span style="--0:#76A162;--1:#007A00">// Added</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">int</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#DCDCAA;--1:#795E26">main</span><span style="--0:#CCCCCC;--1:#3B3B3B">()</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">{</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">auto</span><span style="--0:#CCCCCC;--1:#3B3B3B"> main_window </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">::</span><span style="--0:#DCDCAA;--1:#795E26">create</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">auto</span><span style="--0:#CCCCCC;--1:#3B3B3B"> old_tiles </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">main_window</span><span style="--0:#CCCCCC;--1:#3B3B3B">-></span><span style="--0:#DCDCAA;--1:#795E26">get_memory_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#4EC9B0;--1:#227188">std</span><span style="--0:#CCCCCC;--1:#3B3B3B">::vector</span><span style="--0:#D4D4D4;--1:#000000">&#x3C;</span><span style="--0:#CCCCCC;--1:#3B3B3B">TileData</span><span style="--0:#D4D4D4;--1:#000000">></span><span style="--0:#CCCCCC;--1:#3B3B3B"> new_tiles;</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">new_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">reserve</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#9CDCFE;--1:#001080">old_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">-></span><span style="--0:#DCDCAA;--1:#795E26">row_count</span><span style="--0:#CCCCCC;--1:#3B3B3B">() </span><span style="--0:#D4D4D4;--1:#000000">*</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#B5CEA8;--1:#08774E">2</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#C586C0;--1:#AC00D8">for</span><span style="--0:#CCCCCC;--1:#3B3B3B"> (</span><span style="--0:#569CD6;--1:#0000FF">int</span><span style="--0:#CCCCCC;--1:#3B3B3B"> i </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#B5CEA8;--1:#08774E">0</span><span style="--0:#CCCCCC;--1:#3B3B3B">; i </span><span style="--0:#D4D4D4;--1:#000000">&#x3C;</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">old_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">-></span><span style="--0:#DCDCAA;--1:#795E26">row_count</span><span style="--0:#CCCCCC;--1:#3B3B3B">(); </span><span style="--0:#D4D4D4;--1:#000000">++</span><span style="--0:#CCCCCC;--1:#3B3B3B">i) {</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">new_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">push_back</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#D4D4D4;--1:#000000">*</span><span style="--0:#9CDCFE;--1:#001080">old_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">-></span><span style="--0:#DCDCAA;--1:#795E26">row_data</span><span style="--0:#CCCCCC;--1:#3B3B3B">(i));</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">new_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">push_back</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#D4D4D4;--1:#000000">*</span><span style="--0:#9CDCFE;--1:#001080">old_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">-></span><span style="--0:#DCDCAA;--1:#795E26">row_data</span><span style="--0:#CCCCCC;--1:#3B3B3B">(i));</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">    </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#4EC9B0;--1:#227188">std</span><span style="--0:#CCCCCC;--1:#3B3B3B">::default_random_engine rng {};</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#4EC9B0;--1:#227188">std</span><span style="--0:#CCCCCC;--1:#3B3B3B">::</span><span style="--0:#DCDCAA;--1:#795E26">shuffle</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#9CDCFE;--1:#001080">new_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">begin</span><span style="--0:#CCCCCC;--1:#3B3B3B">(), </span><span style="--0:#9CDCFE;--1:#001080">new_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">end</span><span style="--0:#CCCCCC;--1:#3B3B3B">(), rng);</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">auto</span><span style="--0:#CCCCCC;--1:#3B3B3B"> tiles_model </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">std</span><span style="--0:#CCCCCC;--1:#3B3B3B">::</span><span style="--0:#DCDCAA;--1:#795E26">make_shared</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;</span><span style="--0:#4EC9B0;--1:#227188">slint</span><span style="--0:#CCCCCC;--1:#3B3B3B">::</span><span style="--0:#4EC9B0;--1:#227188">VectorModel</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;</span><span style="--0:#4EC9B0;--1:#227188">TileData</span><span style="--0:#CCCCCC;--1:#3B3B3B">>>(new_tiles);</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">main_window</span><span style="--0:#CCCCCC;--1:#3B3B3B">-></span><span style="--0:#DCDCAA;--1:#795E26">set_memory_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">(tiles_model);</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">main_window</span><span style="--0:#CCCCCC;--1:#3B3B3B">-></span><span style="--0:#DCDCAA;--1:#795E26">run</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="#include <random> // Addedint main(){    auto main_window = MainWindow::create();    auto old_tiles = main_window->get_memory_tiles();    std::vector<TileData> new_tiles;    new_tiles.reserve(old_tiles->row_count() * 2);    for (int i = 0; i < old_tiles->row_count(); ++i) {        new_tiles.push_back(*old_tiles->row_data(i));        new_tiles.push_back(*old_tiles->row_data(i));    }    std::default_random_engine rng {};    std::shuffle(new_tiles.begin(), new_tiles.end(), rng);    auto tiles_model = std::make_shared<slint::VectorModel<TileData>>(new_tiles);    main_window->set_memory_tiles(tiles_model);    main_window->run();}"><div></div></button></div></figure></div><p>The code takes the list of tiles, duplicates it, and shuffles it, accessing the <code dir="auto">memory_tiles</code> property through the C++ code.</p><p>For each top-level property, Slint generates a getter and a setter function. In this case <code dir="auto">get_memory_tiles</code> and <code dir="auto">set_memory_tiles</code>.
 Since <code dir="auto">memory_tiles</code> is a Slint array, it’s represented as a <a href="https://slint.dev/docs/cpp/api/classslint_1_1model"><code dir="auto">std::shared_ptr&#x3C;slint::Model></code></a>.</p><p>You can’t change the model generated by Slint, but you can extract the tiles from it and put them
 in a <a href="https://slint.dev/docs/cpp/api/classslint_1_1vectormodel"><code dir="auto">slint::VectorModel</code></a> which inherits from <code dir="auto">Model</code>.
-<code dir="auto">VectorModel</code> lets you make changes and you can use it to replace the static generated model.</p> </section><section id="tab-panel-4" aria-labelledby="tab-4" role="tabpanel" hidden> <p>Change <code dir="auto">main.js</code> to the following:</p><div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#C586C0;--1:#AC00D8">import</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">*</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#C586C0;--1:#AC00D8">as</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">slint</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#C586C0;--1:#AC00D8">from</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">"slint-ui"</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">ui</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">slint</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">loadFile</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#569CD6;--1:#0000FF">new</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#DCDCAA;--1:#795E26">URL</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#CE9178;--1:#A31515">"./ui/app-window.slint"</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#C586C0;--1:#AC00D8">import</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">meta</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">url</span><span style="--0:#CCCCCC;--1:#3B3B3B">));</span></div></div><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">new</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">ui</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div><div class="ec-line"><div class="code">
+<code dir="auto">VectorModel</code> lets you make changes and you can use it to replace the static generated model.</p> </section><section id="tab-panel-7" aria-labelledby="tab-7" role="tabpanel" hidden> <p>Change <code dir="auto">main.js</code> to the following:</p><div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#C586C0;--1:#AC00D8">import</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">*</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#C586C0;--1:#AC00D8">as</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">slint</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#C586C0;--1:#AC00D8">from</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">"slint-ui"</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">ui</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">slint</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">loadFile</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#569CD6;--1:#0000FF">new</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#DCDCAA;--1:#795E26">URL</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#CE9178;--1:#A31515">"./ui/app-window.slint"</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#C586C0;--1:#AC00D8">import</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">meta</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">url</span><span style="--0:#CCCCCC;--1:#3B3B3B">));</span></div></div><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">new</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">ui</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">initial_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">memory_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">initial_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">concat</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">initial_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">map</span><span style="--0:#CCCCCC;--1:#3B3B3B">((</span><span style="--0:#9CDCFE;--1:#001080">tile</span><span style="--0:#CCCCCC;--1:#3B3B3B">) </span><span style="--0:#569CD6;--1:#0000FF">=></span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">Object</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">assign</span><span style="--0:#CCCCCC;--1:#3B3B3B">({}, </span><span style="--0:#9CDCFE;--1:#001080">tile</span><span style="--0:#CCCCCC;--1:#3B3B3B">)),</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span style="--0:#C586C0;--1:#AC00D8">for</span><span style="--0:#CCCCCC;--1:#3B3B3B"> (</span><span style="--0:#569CD6;--1:#0000FF">let</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">i</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">length</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">-</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#B5CEA8;--1:#08774E">1</span><span style="--0:#CCCCCC;--1:#3B3B3B">; </span><span style="--0:#9CDCFE;--1:#001080">i</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">></span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#B5CEA8;--1:#08774E">0</span><span style="--0:#CCCCCC;--1:#3B3B3B">; </span><span style="--0:#9CDCFE;--1:#001080">i</span><span style="--0:#D4D4D4;--1:#000000">--</span><span style="--0:#CCCCCC;--1:#3B3B3B">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">j</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">Math</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">floor</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#9CDCFE;--1:#001080">Math</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">random</span><span style="--0:#CCCCCC;--1:#3B3B3B">() </span><span style="--0:#D4D4D4;--1:#000000">*</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">i</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">    </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">[</span><span style="--0:#9CDCFE;--1:#001080">tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">[</span><span style="--0:#9CDCFE;--1:#001080">i</span><span style="--0:#CCCCCC;--1:#3B3B3B">], </span><span style="--0:#9CDCFE;--1:#001080">tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">[</span><span style="--0:#9CDCFE;--1:#001080">j</span><span style="--0:#CCCCCC;--1:#3B3B3B">]] </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> [</span><span style="--0:#9CDCFE;--1:#001080">tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">[</span><span style="--0:#9CDCFE;--1:#001080">j</span><span style="--0:#CCCCCC;--1:#3B3B3B">], </span><span style="--0:#9CDCFE;--1:#001080">tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">[</span><span style="--0:#9CDCFE;--1:#001080">i</span><span style="--0:#CCCCCC;--1:#3B3B3B">]];</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">model</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">new</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">slint</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">ArrayModel</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#9CDCFE;--1:#001080">tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#9CDCFE;--1:#001080">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">memory_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">model</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span style="--0:#C586C0;--1:#AC00D8">await</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">run</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="import * as slint from &#x22;slint-ui&#x22;;const ui = slint.loadFile(new URL(&#x22;./ui/app-window.slint&#x22;, import.meta.url));const mainWindow = new ui.MainWindow();const initial_tiles = mainWindow.memory_tiles;const tiles = initial_tiles.concat(    initial_tiles.map((tile) => Object.assign({}, tile)),);for (let i = tiles.length - 1; i > 0; i--) {    const j = Math.floor(Math.random() * i);    [tiles[i], tiles[j]] = [tiles[j], tiles[i]];}const model = new slint.ArrayModel(tiles);mainWindow.memory_tiles = model;await mainWindow.run();"><div></div></button></div></figure></div><p>The code takes the list of tiles, duplicates it, and shuffles it, accessing the <code dir="auto">memory_tiles</code> property through the JavaScript code.</p><p>As <code dir="auto">memory_tiles</code> is an array, it’s represented as a JavaScript <a href="https://slint.dev/docs/node/"><code dir="auto">Array</code></a>.
 You can’t change the model generated by Slint, but you can extract the tiles from it and put them
 in a <a href="https://slint.dev/docs/node/classes/arraymodel.html"><code dir="auto">slint.ArrayModel</code></a> which implements the <a href="https://slint.dev/docs/node/interfaces/model.html"><code dir="auto">Model</code></a> interface.
-<code dir="auto">ArrayModel</code> allows you to make changes and you can use it to replace the static generated model.</p> </section><section id="tab-panel-5" aria-labelledby="tab-5" role="tabpanel" hidden> <p>The code uses the <code dir="auto">rand</code> dependency for the randomization. Add it to the <code dir="auto">Cargo.toml</code> file using the <code dir="auto">cargo</code> command.</p><div class="expressive-code"><link rel="stylesheet" href="/tng/_astro/ec.fq3m0.css"><script type="module" src="/tng/_astro/ec.8zarh.js"></script><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cargo</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">add</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">rand@0.8</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="cargo add rand@0.8"><div></div></button></div></figure></div><p>Change the main function to the following:</p><div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="rust"><code><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">fn</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#DCDCAA;--1:#795E26">main</span><span style="--0:#CCCCCC;--1:#3B3B3B">() {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">use</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">slint</span><span style="--0:#D4D4D4;--1:#000000">::</span><span style="--0:#4EC9B0;--1:#227188">Model</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code">
+<code dir="auto">ArrayModel</code> allows you to make changes and you can use it to replace the static generated model.</p> </section><section id="tab-panel-8" aria-labelledby="tab-8" role="tabpanel" hidden> <p>The code uses the <code dir="auto">rand</code> dependency for the randomization. Add it to the <code dir="auto">Cargo.toml</code> file using the <code dir="auto">cargo</code> command.</p><div class="expressive-code"><link rel="stylesheet" href="/tng/_astro/ec.fq3m0.css"><script type="module" src="/tng/_astro/ec.8zarh.js"></script><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cargo</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">add</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">rand@0.8</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="cargo add rand@0.8"><div></div></button></div></figure></div><p>Change the main function to the following:</p><div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="rust"><code><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">fn</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#DCDCAA;--1:#795E26">main</span><span style="--0:#CCCCCC;--1:#3B3B3B">() {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">use</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">slint</span><span style="--0:#D4D4D4;--1:#000000">::</span><span style="--0:#4EC9B0;--1:#227188">Model</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">let</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">main_window</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">MainWindow</span><span style="--0:#D4D4D4;--1:#000000">::</span><span style="--0:#DCDCAA;--1:#795E26">new</span><span style="--0:#CCCCCC;--1:#3B3B3B">()</span><span style="--0:#D4D4D4;--1:#000000">.</span><span style="--0:#DCDCAA;--1:#795E26">unwrap</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#76A162;--1:#007A00">// Fetch the tiles from the model</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">let</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">mut</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">tiles</span><span style="--0:#D4D4D4;--1:#000000">:</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">Vec</span><span style="--0:#CCCCCC;--1:#3B3B3B">&#x3C;</span><span style="--0:#4EC9B0;--1:#227188">TileData</span><span style="--0:#CCCCCC;--1:#3B3B3B">> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">main_window</span><span style="--0:#D4D4D4;--1:#000000">.</span><span style="--0:#DCDCAA;--1:#795E26">get_memory_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">()</span><span style="--0:#D4D4D4;--1:#000000">.</span><span style="--0:#DCDCAA;--1:#795E26">iter</span><span style="--0:#CCCCCC;--1:#3B3B3B">()</span><span style="--0:#D4D4D4;--1:#000000">.</span><span style="--0:#DCDCAA;--1:#795E26">collect</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#76A162;--1:#007A00">// Duplicate them to ensure that we have pairs</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">tiles</span><span style="--0:#D4D4D4;--1:#000000">.</span><span style="--0:#DCDCAA;--1:#795E26">extend</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#9CDCFE;--1:#001080">tiles</span><span style="--0:#D4D4D4;--1:#000000">.</span><span style="--0:#DCDCAA;--1:#795E26">clone</span><span style="--0:#CCCCCC;--1:#3B3B3B">());</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#76A162;--1:#007A00">// Randomly mix the tiles</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">use</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">rand</span><span style="--0:#D4D4D4;--1:#000000">::</span><span style="--0:#4EC9B0;--1:#227188">seq</span><span style="--0:#D4D4D4;--1:#000000">::</span><span style="--0:#4EC9B0;--1:#227188">SliceRandom</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">let</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">mut</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">rng</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">rand</span><span style="--0:#D4D4D4;--1:#000000">::</span><span style="--0:#DCDCAA;--1:#795E26">thread_rng</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">tiles</span><span style="--0:#D4D4D4;--1:#000000">.</span><span style="--0:#DCDCAA;--1:#795E26">shuffle</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#D4D4D4;--1:#000000">&#x26;</span><span style="--0:#569CD6;--1:#0000FF">mut</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">rng</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code">
diff --git a/snapshots/tng/tutorial/from_one_to_multiple_tiles/index.html b/snapshots/tng/tutorial/from_one_to_multiple_tiles/index.html
index e9955853a..97fb0cbf9 100644
--- a/snapshots/tng/tutorial/from_one_to_multiple_tiles/index.html
+++ b/snapshots/tng/tutorial/from_one_to_multiple_tiles/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><script src="/tng/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/tutorial/game_logic/index.html b/snapshots/tng/tutorial/game_logic/index.html
index 4e7a219c3..d8cf8b4b3 100644
--- a/snapshots/tng/tutorial/game_logic/index.html
+++ b/snapshots/tng/tutorial/game_logic/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><script src="/tng/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
@@ -114,7 +115,7 @@
 	}
 	customElements.define('starlight-tabs-restore', StarlightTabsRestore);
 })()
-</script><starlight-tabs data-sync-key="dev-language" class="astro-lisrjliy"> <div class="tablist-wrapper not-content astro-lisrjliy"> <ul role="tablist" class="astro-lisrjliy"> <li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-6" id="tab-6" aria-selected="true" tabindex="0" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M0.024 11.935L0.024 11.935Q0.024 9.398 0.841 7.377Q1.659 5.356 2.970 4.045Q4.282 2.733 6.216 1.873L6.216 1.873Q7.722 1.185 10.130 1.185L10.130 1.185Q12.151 1.185 13.763 2.002Q15.376 2.819 16.451 3.894L16.451 3.894L13.484 7.248L13.140 6.990Q12.409 6.431 12.021 6.302L12.021 6.302L11.549 6.173Q10.689 5.915 10.130 5.915L10.130 5.915Q9.184 5.915 8.367 6.302L8.367 6.302Q7.463 6.775 6.905 7.528Q6.346 8.280 5.959 9.441Q5.572 10.602 5.572 11.935L5.572 11.935Q5.572 15.031 6.905 16.364L6.905 16.364Q7.593 17.224 8.453 17.611Q9.313 17.998 10.387 17.998Q11.463 17.998 12.280 17.611L12.280 17.611Q13.183 17.138 13.742 16.364L13.742 16.364L16.709 19.761Q15.462 21.180 13.742 22.041L13.742 22.041Q12.151 22.814 10.130 22.814L10.130 22.814Q8.238 22.814 6.216 22.169L6.216 22.169Q4.411 21.567 2.992 20.148L2.992 20.148Q2.389 19.503 1.831 18.471L1.831 18.471Q1.530 17.869 0.970 16.537L0.970 16.537Q0.024 14.644 0.024 11.935ZM13.355 10.731L13.355 8.452L11.463 8.452L11.463 10.731L9.313 10.731L9.313 12.623L11.463 12.623L11.463 15.031L13.355 15.031L13.355 12.623L15.505 12.623L15.505 10.731L13.355 10.731ZM23.976 10.602L21.396 10.602L21.396 7.936L19.117 7.936L19.117 10.602L16.580 10.602L16.580 12.881L19.117 12.881L19.117 15.720L21.396 15.720L21.396 12.881L23.976 12.881L23.976 10.602Z"/></svg>  C++ </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-7" id="tab-7" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5.376 14.300L5.376 3.352L9.286 3.352L9.286 14.300Q9.286 17.842 7.630 19.452L7.630 19.452Q6.112 20.924 3.076 20.924L3.076 20.924Q2.386 20.924 1.558 20.809Q0.730 20.694 0.224 20.464L0.224 20.464L0.638 17.336Q1.512 17.750 2.662 17.750L2.662 17.750Q3.950 17.750 4.594 17.060L4.594 17.060Q5.376 16.232 5.376 14.300L5.376 14.300ZM11.862 19.912L12.736 16.600Q13.564 17.060 14.668 17.382L14.668 17.382Q15.910 17.750 17.014 17.750L17.014 17.750Q18.394 17.750 19.084 17.267Q19.774 16.784 19.774 15.910Q19.774 15.036 19.130 14.507Q18.486 13.978 16.876 13.426L16.876 13.426Q12.138 11.770 12.138 8.274L12.138 8.274Q12.138 5.974 13.909 4.525Q15.680 3.076 18.762 3.076L18.762 3.076Q21.200 3.076 23.224 3.950L23.224 3.950L22.350 7.124L22.074 6.986Q21.246 6.664 20.740 6.526L20.740 6.526Q19.774 6.250 18.762 6.250L18.762 6.250Q17.520 6.250 16.853 6.733Q16.186 7.216 16.186 7.998Q16.186 8.780 16.922 9.286L16.922 9.286Q17.474 9.700 19.314 10.436L19.314 10.436Q21.614 11.310 22.695 12.552Q23.776 13.794 23.776 15.588L23.776 15.588Q23.776 17.888 22.028 19.314L22.028 19.314Q20.142 20.924 16.738 20.924L16.738 20.924Q15.404 20.924 13.932 20.556L13.932 20.556Q12.782 20.326 11.862 19.912L11.862 19.912Z"/></svg>  NodeJS </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-8" id="tab-8" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M18.419 2.539L18.419 2.983L18.419 3.686L18.530 3.797L18.642 3.797Q18.826 3.760 19.178 3.704Q19.529 3.649 19.696 3.575Q19.863 3.501 19.992 3.630Q20.122 3.760 20.047 3.926Q19.973 4.093 19.918 4.444Q19.863 4.796 19.825 4.981L19.825 4.981L19.825 5.092L19.936 5.203Q19.936 5.314 20.159 5.314L20.159 5.314L21.194 5.314Q21.564 5.314 21.527 5.647L21.527 5.647L21.527 5.906Q21.453 6.128 21.232 6.572L21.232 6.572L21.084 6.831L21.084 6.942L21.157 7.016Q21.194 7.090 21.194 7.164L21.194 7.164L21.305 7.164Q21.491 7.238 21.842 7.293Q22.194 7.349 22.360 7.367Q22.526 7.386 22.601 7.589Q22.674 7.793 22.601 7.978L22.601 7.978L22.305 8.385Q22.082 8.644 22.008 8.792L22.008 8.792L22.008 9.014Q22.008 9.088 22.119 9.162L22.119 9.162L22.230 9.236L23.155 9.606Q23.340 9.680 23.396 9.846Q23.451 10.013 23.267 10.161L23.267 10.161Q22.822 10.642 22.489 10.864L22.489 10.864L22.489 11.197L22.526 11.271Q22.637 11.308 22.712 11.308L22.712 11.308L22.970 11.493Q23.303 11.715 23.488 11.789Q23.674 11.863 23.674 12.066Q23.674 12.270 23.526 12.381L23.526 12.381L22.601 12.936L22.601 13.047Q22.601 13.232 22.601 13.269Q22.601 13.306 22.712 13.417L22.712 13.417Q23.155 13.861 23.415 13.972L23.415 13.972Q23.563 14.157 23.507 14.305Q23.451 14.453 23.267 14.564L23.267 14.564Q22.601 14.786 22.341 14.897L22.341 14.897L22.305 14.934Q22.230 14.971 22.194 15.045Q22.156 15.119 22.230 15.267L22.230 15.267L22.230 15.378Q22.415 15.526 22.637 15.933L22.637 15.933L22.822 16.192Q22.896 16.266 22.878 16.414Q22.860 16.562 22.712 16.636L22.712 16.636L22.601 16.673L22.453 16.747Q22.305 16.747 22.008 16.821Q21.712 16.895 21.564 16.895L21.564 16.895L21.416 16.895Q21.416 16.932 21.361 16.987Q21.305 17.043 21.305 17.117L21.305 17.117L21.343 17.228L21.416 17.339L21.787 18.153Q21.860 18.227 21.805 18.375Q21.749 18.523 21.675 18.597L21.675 18.597L20.270 18.597Q20.159 18.745 20.159 18.967L20.159 18.967Q20.232 19.115 20.288 19.411Q20.343 19.707 20.418 19.873Q20.491 20.040 20.343 20.188Q20.195 20.336 19.936 20.336L19.936 20.336Q19.752 20.299 19.400 20.243Q19.049 20.188 18.901 20.114L18.901 20.114L18.790 20.114L18.604 20.299Q18.567 20.336 18.642 20.336L18.642 20.336L18.642 21.372Q18.642 21.742 18.308 21.742L18.308 21.742L18.087 21.742Q17.605 21.594 17.162 21.261L17.162 21.261L17.050 21.261Q16.939 21.261 16.866 21.335Q16.791 21.409 16.791 21.520L16.791 21.520Q16.791 21.668 16.736 21.964Q16.680 22.260 16.680 22.426Q16.680 22.593 16.477 22.667Q16.273 22.741 16.125 22.667L16.125 22.667Q15.756 22.297 15.311 22.075L15.311 22.075L15.200 22.075Q15.090 22.075 15.015 22.149Q14.942 22.223 14.942 22.297L14.942 22.297L14.608 23.222Q14.497 23.481 14.276 23.481L14.276 23.481Q14.201 23.481 14.165 23.407L14.165 23.407L14.128 23.370Q13.683 22.889 13.462 22.556L13.462 22.556L13.203 22.556Q13.128 22.556 13.055 22.630Q12.980 22.704 12.980 22.778L12.980 22.778L12.537 23.592Q12.425 23.740 12.222 23.740Q12.018 23.740 11.945 23.592L11.945 23.592L11.352 22.667L11.020 22.667L10.206 23.481Q10.095 23.592 9.762 23.592L9.762 23.592Q9.651 23.592 9.651 23.370L9.651 23.370L9.280 22.260Q9.243 22.186 9.169 22.186L9.169 22.186L8.837 22.186Q8.651 22.371 8.281 22.593L8.281 22.593L8.023 22.778L7.800 22.667Q7.467 22.519 7.338 22.426Q7.208 22.334 7.208 22.186L7.208 22.186Q7.097 21.853 7.097 21.150L7.097 21.150L7.060 21.113Q7.060 21.039 6.986 21.039Q6.912 21.039 6.857 20.983Q6.801 20.928 6.764 20.928L6.764 20.928L6.616 20.928L6.505 21.039L5.691 21.372Q5.543 21.483 5.395 21.409Q5.247 21.335 5.247 21.150L5.247 21.150L5.247 19.892L5.136 19.781L5.026 19.781Q4.840 19.818 4.489 19.873Q4.138 19.929 3.971 20.003Q3.804 20.077 3.675 19.947Q3.545 19.818 3.619 19.651Q3.693 19.485 3.749 19.133Q3.804 18.782 3.841 18.597L3.841 18.597L3.841 18.486L3.731 18.375L2.583 18.375Q2.250 18.375 2.250 18.042L2.250 18.042L2.250 17.783Q2.324 17.561 2.583 17.117L2.583 17.117L2.694 16.858L2.694 16.710Q2.657 16.636 2.583 16.636L2.583 16.636Q2.583 16.562 2.510 16.562L2.510 16.562L2.472 16.525Q2.287 16.525 1.936 16.469Q1.584 16.414 1.418 16.414Q1.251 16.414 1.177 16.210Q1.103 16.007 1.214 15.822L1.214 15.822Q1.548 15.489 1.769 15.008L1.769 15.008L1.769 14.786L1.584 14.638Q1.510 14.564 1.436 14.564L1.436 14.564L0.622 14.231Q0.437 14.120 0.382 13.953Q0.326 13.787 0.511 13.639L0.511 13.639Q0.696 13.565 1.066 13.269L1.066 13.269Q1.288 13.047 1.436 12.936L1.436 12.936L1.436 12.714Q1.436 12.492 1.325 12.492L1.325 12.492L0.511 12.011Q0.326 11.937 0.326 11.733Q0.326 11.530 0.511 11.456L0.511 11.456L1.436 10.864L1.436 10.642L0.622 9.828Q0.548 9.754 0.548 9.606Q0.548 9.458 0.622 9.347L0.622 9.347L0.659 9.347Q0.733 9.310 0.733 9.236L0.733 9.236L1.769 8.903L1.769 8.792Q1.843 8.718 1.806 8.533L1.806 8.533L1.769 8.422Q1.658 8.311 1.492 8.089Q1.325 7.867 1.214 7.719Q1.103 7.571 1.177 7.367Q1.251 7.164 1.418 7.127Q1.584 7.090 1.936 7.034Q2.287 6.979 2.472 6.942L2.472 6.942L2.583 6.942Q2.583 6.868 2.639 6.812Q2.694 6.757 2.694 6.683L2.694 6.683L2.694 6.572L2.583 6.461L2.250 5.647Q2.139 5.499 2.213 5.351Q2.287 5.203 2.472 5.203L2.472 5.203L3.731 5.203L3.767 5.129Q3.767 5.092 3.841 5.092L3.841 5.092L3.841 4.981Q3.619 4.278 3.619 3.945L3.619 3.945Q3.545 3.760 3.675 3.630Q3.804 3.501 3.989 3.575L3.989 3.575Q4.322 3.575 5.026 3.797L5.026 3.797L5.136 3.797L5.284 3.649Q5.321 3.575 5.247 3.575L5.247 3.575L5.247 2.539Q5.247 2.206 5.580 2.206L5.580 2.206L5.840 2.206Q6.061 2.280 6.505 2.539L6.505 2.539L6.764 2.650L6.912 2.650Q6.986 2.613 6.986 2.539L6.986 2.539Q7.060 2.539 7.060 2.465L7.060 2.465L7.097 2.428Q7.097 2.243 7.153 1.891Q7.208 1.540 7.208 1.373Q7.208 1.207 7.412 1.133Q7.615 1.059 7.800 1.133L7.800 1.133Q8.133 1.503 8.614 1.725L8.614 1.725L8.837 1.725L8.947 1.614L8.947 1.540Q8.985 1.466 9.058 1.392L9.058 1.392L9.392 0.578Q9.503 0.430 9.576 0.393Q9.651 0.356 9.872 0.356L9.872 0.356L9.983 0.467Q10.058 0.652 10.354 1.022L10.354 1.022Q10.576 1.244 10.686 1.392L10.686 1.392L10.797 1.392Q10.872 1.392 10.945 1.318L10.945 1.318L11.020 1.281L11.500 0.467Q11.648 0.282 11.815 0.263Q11.982 0.245 12.055 0.356L12.055 0.356L12.166 0.467L12.759 1.392L13.091 1.392Q13.166 1.392 13.203 1.318L13.203 1.318L13.239 1.281Q13.683 0.800 13.794 0.578L13.794 0.578Q13.869 0.504 14.017 0.504Q14.165 0.504 14.276 0.578L14.276 0.578L14.276 0.689Q14.497 1.392 14.608 1.614L14.608 1.614L14.720 1.725L14.942 1.725Q15.459 1.540 15.866 1.133L15.866 1.133Q16.052 1.059 16.255 1.133Q16.459 1.207 16.459 1.373Q16.459 1.540 16.514 1.891Q16.569 2.243 16.569 2.428L16.569 2.428L16.607 2.465Q16.607 2.539 16.680 2.539L16.680 2.539L16.791 2.539Q16.902 2.613 16.976 2.613Q17.050 2.613 17.050 2.539L17.050 2.539Q17.273 2.428 17.976 2.206L17.976 2.206Q18.160 2.095 18.290 2.187Q18.419 2.280 18.419 2.539L18.419 2.539ZM5.580 6.128L5.580 6.128L14.386 6.128Q15.090 6.128 15.422 6.239L15.422 6.239Q16.532 6.609 17.050 7.275L17.050 7.275Q17.605 7.867 17.605 8.681L17.605 8.681Q17.605 9.347 17.273 10.050L17.273 10.050Q16.902 10.605 16.348 10.975L16.348 10.975Q16.125 11.197 15.977 11.197L15.977 11.197Q16.052 11.271 16.163 11.326Q16.273 11.382 16.348 11.456L16.348 11.456L16.532 11.604Q16.939 11.974 17.050 12.233L17.050 12.233Q17.383 12.788 17.383 13.417L17.383 13.417Q17.383 13.528 17.605 13.750L17.605 13.750Q17.753 13.898 18.049 13.972L18.049 13.972Q18.197 13.972 18.549 13.972Q18.901 13.972 19.122 13.750L19.122 13.750Q19.270 13.602 19.381 13.306L19.381 13.306L19.456 13.047L19.456 12.492Q19.456 12.381 19.474 12.381Q19.492 12.381 19.566 12.381L19.566 12.381L20.380 12.381L20.380 10.864Q20.232 10.790 19.881 10.623Q19.529 10.457 19.345 10.383L19.345 10.383Q19.308 10.346 19.122 10.290Q18.938 10.235 18.901 10.161L18.901 10.161Q18.346 9.976 18.530 9.236L18.530 9.236Q19.011 8.089 19.345 7.497L19.345 7.497L19.345 7.386Q18.901 6.683 18.642 6.387L18.642 6.387Q18.197 5.832 17.716 5.425L17.716 5.425Q16.014 3.871 13.573 3.353L13.573 3.353L13.462 3.353Q12.759 4.056 12.314 4.389L12.314 4.389Q12.130 4.574 11.834 4.574Q11.538 4.574 11.352 4.389L11.352 4.389L10.317 3.353L10.206 3.353Q9.762 3.464 9.058 3.686L9.058 3.686Q7.245 4.352 5.802 5.758L5.802 5.758Q5.580 6.017 5.580 6.128ZM18.642 16.747L18.642 16.747L15.200 16.747Q14.831 16.747 14.720 16.636L14.720 16.636Q14.128 16.340 13.905 15.489L13.905 15.489L13.869 15.267Q13.683 14.601 13.683 14.231L13.683 14.231Q13.683 13.972 13.480 13.528Q13.276 13.084 12.944 12.843Q12.610 12.603 12.166 12.603L12.166 12.603L10.095 12.603L10.095 14.083L12.166 14.083Q12.277 14.083 12.296 14.101Q12.314 14.120 12.314 14.231L12.314 14.231L12.314 16.525Q12.314 16.599 12.296 16.617Q12.277 16.636 12.166 16.636L12.166 16.636L5.247 16.636Q5.469 17.006 5.950 17.450L5.950 17.450L6.061 17.450Q6.986 17.228 7.430 17.228L7.430 17.228Q7.689 17.154 7.930 17.283Q8.171 17.413 8.244 17.672L8.244 17.672L8.614 19.189L8.614 19.300Q9.540 19.670 9.983 19.781L9.983 19.781Q10.761 20.003 11.352 20.003L11.352 20.003Q11.907 20.077 12.573 20.040L12.573 20.040Q12.980 20.003 13.794 19.892L13.794 19.892Q14.386 19.781 15.534 19.300L15.534 19.300L15.534 19.189L15.866 17.672Q16.088 17.080 16.680 17.228L16.680 17.228L18.087 17.561L18.197 17.561Q18.197 17.228 18.642 16.747ZM6.283 8.681L4.914 8.681L5.247 9.347L5.284 9.458Q5.321 9.643 5.247 9.717L5.247 9.717Q5.247 9.902 4.988 10.087L4.988 10.087L4.914 10.161Q3.989 10.642 3.508 10.753L3.508 10.753L3.434 10.753Q3.397 10.790 3.397 10.864L3.397 10.864L3.397 11.456Q3.397 12.603 3.731 13.972L3.731 13.972L3.767 14.046Q3.767 14.120 3.841 14.120L3.841 14.120L6.283 14.120L6.283 8.681ZM9.872 10.272L9.872 10.272Q9.910 10.272 9.947 10.272L9.947 10.272L9.872 10.272L12.537 10.272Q12.980 10.272 13.239 10.161L13.239 10.161L13.351 10.087Q13.498 9.976 13.573 9.809Q13.646 9.643 13.628 9.402Q13.610 9.162 13.462 9.014L13.462 9.014Q13.091 8.681 12.648 8.681L12.648 8.681L9.762 8.681Q9.872 9.236 9.872 10.272ZM2.917 9.125L2.917 9.125Q2.917 9.384 3.138 9.606Q3.360 9.828 3.619 9.828Q3.878 9.828 4.100 9.606Q4.322 9.384 4.322 9.125Q4.322 8.866 4.100 8.644Q3.878 8.422 3.619 8.422Q3.360 8.422 3.138 8.644Q2.917 8.866 2.917 9.125ZM17.605 18.856L17.605 18.856Q17.605 18.597 17.402 18.375Q17.198 18.153 16.921 18.153Q16.643 18.153 16.440 18.375Q16.236 18.597 16.236 18.856Q16.236 19.115 16.440 19.318Q16.643 19.522 16.921 19.522Q17.198 19.522 17.402 19.337Q17.605 19.152 17.605 18.856ZM6.764 18.153L6.764 18.153Q6.468 18.153 6.265 18.375Q6.061 18.597 6.061 18.856Q6.061 19.115 6.265 19.318Q6.468 19.522 6.746 19.522Q7.023 19.522 7.227 19.318Q7.430 19.115 7.430 18.856Q7.430 18.597 7.227 18.375Q7.023 18.153 6.764 18.153ZM12.537 2.983L12.537 2.983Q12.537 2.724 12.352 2.520Q12.166 2.317 11.852 2.317Q11.538 2.317 11.334 2.502Q11.131 2.687 11.131 2.983Q11.131 3.279 11.316 3.482Q11.500 3.686 11.834 3.686L11.834 3.686Q12.314 3.686 12.537 2.983ZM20.047 9.939L20.047 9.939Q20.306 9.939 20.529 9.717Q20.750 9.495 20.750 9.236Q20.750 8.977 20.529 8.755Q20.306 8.533 20.047 8.533Q19.788 8.533 19.566 8.755Q19.345 8.977 19.345 9.254Q19.345 9.532 19.529 9.735Q19.715 9.939 20.047 9.939Z"/></svg>  Rust </a> </li> </ul> </div> <section id="tab-panel-6" aria-labelledby="tab-6" role="tabpanel"> <p>Add the following code inside the <span class="hljs-title">MainWindow</span> component to signal to the C++ code when the user clicks on a tile.</p><div class="expressive-code"><link rel="stylesheet" href="/tng/_astro/ec.fq3m0.css"><script type="module" src="/tng/_astro/ec.8zarh.js"></script><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">export</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">component</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">inherits</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">Window</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">width</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">326px</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">height</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">326px</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code">
+</script><starlight-tabs data-sync-key="dev-language" class="astro-lisrjliy"> <div class="tablist-wrapper not-content astro-lisrjliy"> <ul role="tablist" class="astro-lisrjliy"> <li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-9" id="tab-9" aria-selected="true" tabindex="0" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M0.024 11.935L0.024 11.935Q0.024 9.398 0.841 7.377Q1.659 5.356 2.970 4.045Q4.282 2.733 6.216 1.873L6.216 1.873Q7.722 1.185 10.130 1.185L10.130 1.185Q12.151 1.185 13.763 2.002Q15.376 2.819 16.451 3.894L16.451 3.894L13.484 7.248L13.140 6.990Q12.409 6.431 12.021 6.302L12.021 6.302L11.549 6.173Q10.689 5.915 10.130 5.915L10.130 5.915Q9.184 5.915 8.367 6.302L8.367 6.302Q7.463 6.775 6.905 7.528Q6.346 8.280 5.959 9.441Q5.572 10.602 5.572 11.935L5.572 11.935Q5.572 15.031 6.905 16.364L6.905 16.364Q7.593 17.224 8.453 17.611Q9.313 17.998 10.387 17.998Q11.463 17.998 12.280 17.611L12.280 17.611Q13.183 17.138 13.742 16.364L13.742 16.364L16.709 19.761Q15.462 21.180 13.742 22.041L13.742 22.041Q12.151 22.814 10.130 22.814L10.130 22.814Q8.238 22.814 6.216 22.169L6.216 22.169Q4.411 21.567 2.992 20.148L2.992 20.148Q2.389 19.503 1.831 18.471L1.831 18.471Q1.530 17.869 0.970 16.537L0.970 16.537Q0.024 14.644 0.024 11.935ZM13.355 10.731L13.355 8.452L11.463 8.452L11.463 10.731L9.313 10.731L9.313 12.623L11.463 12.623L11.463 15.031L13.355 15.031L13.355 12.623L15.505 12.623L15.505 10.731L13.355 10.731ZM23.976 10.602L21.396 10.602L21.396 7.936L19.117 7.936L19.117 10.602L16.580 10.602L16.580 12.881L19.117 12.881L19.117 15.720L21.396 15.720L21.396 12.881L23.976 12.881L23.976 10.602Z"/></svg>  C++ </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-10" id="tab-10" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5.376 14.300L5.376 3.352L9.286 3.352L9.286 14.300Q9.286 17.842 7.630 19.452L7.630 19.452Q6.112 20.924 3.076 20.924L3.076 20.924Q2.386 20.924 1.558 20.809Q0.730 20.694 0.224 20.464L0.224 20.464L0.638 17.336Q1.512 17.750 2.662 17.750L2.662 17.750Q3.950 17.750 4.594 17.060L4.594 17.060Q5.376 16.232 5.376 14.300L5.376 14.300ZM11.862 19.912L12.736 16.600Q13.564 17.060 14.668 17.382L14.668 17.382Q15.910 17.750 17.014 17.750L17.014 17.750Q18.394 17.750 19.084 17.267Q19.774 16.784 19.774 15.910Q19.774 15.036 19.130 14.507Q18.486 13.978 16.876 13.426L16.876 13.426Q12.138 11.770 12.138 8.274L12.138 8.274Q12.138 5.974 13.909 4.525Q15.680 3.076 18.762 3.076L18.762 3.076Q21.200 3.076 23.224 3.950L23.224 3.950L22.350 7.124L22.074 6.986Q21.246 6.664 20.740 6.526L20.740 6.526Q19.774 6.250 18.762 6.250L18.762 6.250Q17.520 6.250 16.853 6.733Q16.186 7.216 16.186 7.998Q16.186 8.780 16.922 9.286L16.922 9.286Q17.474 9.700 19.314 10.436L19.314 10.436Q21.614 11.310 22.695 12.552Q23.776 13.794 23.776 15.588L23.776 15.588Q23.776 17.888 22.028 19.314L22.028 19.314Q20.142 20.924 16.738 20.924L16.738 20.924Q15.404 20.924 13.932 20.556L13.932 20.556Q12.782 20.326 11.862 19.912L11.862 19.912Z"/></svg>  NodeJS </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-11" id="tab-11" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M18.419 2.539L18.419 2.983L18.419 3.686L18.530 3.797L18.642 3.797Q18.826 3.760 19.178 3.704Q19.529 3.649 19.696 3.575Q19.863 3.501 19.992 3.630Q20.122 3.760 20.047 3.926Q19.973 4.093 19.918 4.444Q19.863 4.796 19.825 4.981L19.825 4.981L19.825 5.092L19.936 5.203Q19.936 5.314 20.159 5.314L20.159 5.314L21.194 5.314Q21.564 5.314 21.527 5.647L21.527 5.647L21.527 5.906Q21.453 6.128 21.232 6.572L21.232 6.572L21.084 6.831L21.084 6.942L21.157 7.016Q21.194 7.090 21.194 7.164L21.194 7.164L21.305 7.164Q21.491 7.238 21.842 7.293Q22.194 7.349 22.360 7.367Q22.526 7.386 22.601 7.589Q22.674 7.793 22.601 7.978L22.601 7.978L22.305 8.385Q22.082 8.644 22.008 8.792L22.008 8.792L22.008 9.014Q22.008 9.088 22.119 9.162L22.119 9.162L22.230 9.236L23.155 9.606Q23.340 9.680 23.396 9.846Q23.451 10.013 23.267 10.161L23.267 10.161Q22.822 10.642 22.489 10.864L22.489 10.864L22.489 11.197L22.526 11.271Q22.637 11.308 22.712 11.308L22.712 11.308L22.970 11.493Q23.303 11.715 23.488 11.789Q23.674 11.863 23.674 12.066Q23.674 12.270 23.526 12.381L23.526 12.381L22.601 12.936L22.601 13.047Q22.601 13.232 22.601 13.269Q22.601 13.306 22.712 13.417L22.712 13.417Q23.155 13.861 23.415 13.972L23.415 13.972Q23.563 14.157 23.507 14.305Q23.451 14.453 23.267 14.564L23.267 14.564Q22.601 14.786 22.341 14.897L22.341 14.897L22.305 14.934Q22.230 14.971 22.194 15.045Q22.156 15.119 22.230 15.267L22.230 15.267L22.230 15.378Q22.415 15.526 22.637 15.933L22.637 15.933L22.822 16.192Q22.896 16.266 22.878 16.414Q22.860 16.562 22.712 16.636L22.712 16.636L22.601 16.673L22.453 16.747Q22.305 16.747 22.008 16.821Q21.712 16.895 21.564 16.895L21.564 16.895L21.416 16.895Q21.416 16.932 21.361 16.987Q21.305 17.043 21.305 17.117L21.305 17.117L21.343 17.228L21.416 17.339L21.787 18.153Q21.860 18.227 21.805 18.375Q21.749 18.523 21.675 18.597L21.675 18.597L20.270 18.597Q20.159 18.745 20.159 18.967L20.159 18.967Q20.232 19.115 20.288 19.411Q20.343 19.707 20.418 19.873Q20.491 20.040 20.343 20.188Q20.195 20.336 19.936 20.336L19.936 20.336Q19.752 20.299 19.400 20.243Q19.049 20.188 18.901 20.114L18.901 20.114L18.790 20.114L18.604 20.299Q18.567 20.336 18.642 20.336L18.642 20.336L18.642 21.372Q18.642 21.742 18.308 21.742L18.308 21.742L18.087 21.742Q17.605 21.594 17.162 21.261L17.162 21.261L17.050 21.261Q16.939 21.261 16.866 21.335Q16.791 21.409 16.791 21.520L16.791 21.520Q16.791 21.668 16.736 21.964Q16.680 22.260 16.680 22.426Q16.680 22.593 16.477 22.667Q16.273 22.741 16.125 22.667L16.125 22.667Q15.756 22.297 15.311 22.075L15.311 22.075L15.200 22.075Q15.090 22.075 15.015 22.149Q14.942 22.223 14.942 22.297L14.942 22.297L14.608 23.222Q14.497 23.481 14.276 23.481L14.276 23.481Q14.201 23.481 14.165 23.407L14.165 23.407L14.128 23.370Q13.683 22.889 13.462 22.556L13.462 22.556L13.203 22.556Q13.128 22.556 13.055 22.630Q12.980 22.704 12.980 22.778L12.980 22.778L12.537 23.592Q12.425 23.740 12.222 23.740Q12.018 23.740 11.945 23.592L11.945 23.592L11.352 22.667L11.020 22.667L10.206 23.481Q10.095 23.592 9.762 23.592L9.762 23.592Q9.651 23.592 9.651 23.370L9.651 23.370L9.280 22.260Q9.243 22.186 9.169 22.186L9.169 22.186L8.837 22.186Q8.651 22.371 8.281 22.593L8.281 22.593L8.023 22.778L7.800 22.667Q7.467 22.519 7.338 22.426Q7.208 22.334 7.208 22.186L7.208 22.186Q7.097 21.853 7.097 21.150L7.097 21.150L7.060 21.113Q7.060 21.039 6.986 21.039Q6.912 21.039 6.857 20.983Q6.801 20.928 6.764 20.928L6.764 20.928L6.616 20.928L6.505 21.039L5.691 21.372Q5.543 21.483 5.395 21.409Q5.247 21.335 5.247 21.150L5.247 21.150L5.247 19.892L5.136 19.781L5.026 19.781Q4.840 19.818 4.489 19.873Q4.138 19.929 3.971 20.003Q3.804 20.077 3.675 19.947Q3.545 19.818 3.619 19.651Q3.693 19.485 3.749 19.133Q3.804 18.782 3.841 18.597L3.841 18.597L3.841 18.486L3.731 18.375L2.583 18.375Q2.250 18.375 2.250 18.042L2.250 18.042L2.250 17.783Q2.324 17.561 2.583 17.117L2.583 17.117L2.694 16.858L2.694 16.710Q2.657 16.636 2.583 16.636L2.583 16.636Q2.583 16.562 2.510 16.562L2.510 16.562L2.472 16.525Q2.287 16.525 1.936 16.469Q1.584 16.414 1.418 16.414Q1.251 16.414 1.177 16.210Q1.103 16.007 1.214 15.822L1.214 15.822Q1.548 15.489 1.769 15.008L1.769 15.008L1.769 14.786L1.584 14.638Q1.510 14.564 1.436 14.564L1.436 14.564L0.622 14.231Q0.437 14.120 0.382 13.953Q0.326 13.787 0.511 13.639L0.511 13.639Q0.696 13.565 1.066 13.269L1.066 13.269Q1.288 13.047 1.436 12.936L1.436 12.936L1.436 12.714Q1.436 12.492 1.325 12.492L1.325 12.492L0.511 12.011Q0.326 11.937 0.326 11.733Q0.326 11.530 0.511 11.456L0.511 11.456L1.436 10.864L1.436 10.642L0.622 9.828Q0.548 9.754 0.548 9.606Q0.548 9.458 0.622 9.347L0.622 9.347L0.659 9.347Q0.733 9.310 0.733 9.236L0.733 9.236L1.769 8.903L1.769 8.792Q1.843 8.718 1.806 8.533L1.806 8.533L1.769 8.422Q1.658 8.311 1.492 8.089Q1.325 7.867 1.214 7.719Q1.103 7.571 1.177 7.367Q1.251 7.164 1.418 7.127Q1.584 7.090 1.936 7.034Q2.287 6.979 2.472 6.942L2.472 6.942L2.583 6.942Q2.583 6.868 2.639 6.812Q2.694 6.757 2.694 6.683L2.694 6.683L2.694 6.572L2.583 6.461L2.250 5.647Q2.139 5.499 2.213 5.351Q2.287 5.203 2.472 5.203L2.472 5.203L3.731 5.203L3.767 5.129Q3.767 5.092 3.841 5.092L3.841 5.092L3.841 4.981Q3.619 4.278 3.619 3.945L3.619 3.945Q3.545 3.760 3.675 3.630Q3.804 3.501 3.989 3.575L3.989 3.575Q4.322 3.575 5.026 3.797L5.026 3.797L5.136 3.797L5.284 3.649Q5.321 3.575 5.247 3.575L5.247 3.575L5.247 2.539Q5.247 2.206 5.580 2.206L5.580 2.206L5.840 2.206Q6.061 2.280 6.505 2.539L6.505 2.539L6.764 2.650L6.912 2.650Q6.986 2.613 6.986 2.539L6.986 2.539Q7.060 2.539 7.060 2.465L7.060 2.465L7.097 2.428Q7.097 2.243 7.153 1.891Q7.208 1.540 7.208 1.373Q7.208 1.207 7.412 1.133Q7.615 1.059 7.800 1.133L7.800 1.133Q8.133 1.503 8.614 1.725L8.614 1.725L8.837 1.725L8.947 1.614L8.947 1.540Q8.985 1.466 9.058 1.392L9.058 1.392L9.392 0.578Q9.503 0.430 9.576 0.393Q9.651 0.356 9.872 0.356L9.872 0.356L9.983 0.467Q10.058 0.652 10.354 1.022L10.354 1.022Q10.576 1.244 10.686 1.392L10.686 1.392L10.797 1.392Q10.872 1.392 10.945 1.318L10.945 1.318L11.020 1.281L11.500 0.467Q11.648 0.282 11.815 0.263Q11.982 0.245 12.055 0.356L12.055 0.356L12.166 0.467L12.759 1.392L13.091 1.392Q13.166 1.392 13.203 1.318L13.203 1.318L13.239 1.281Q13.683 0.800 13.794 0.578L13.794 0.578Q13.869 0.504 14.017 0.504Q14.165 0.504 14.276 0.578L14.276 0.578L14.276 0.689Q14.497 1.392 14.608 1.614L14.608 1.614L14.720 1.725L14.942 1.725Q15.459 1.540 15.866 1.133L15.866 1.133Q16.052 1.059 16.255 1.133Q16.459 1.207 16.459 1.373Q16.459 1.540 16.514 1.891Q16.569 2.243 16.569 2.428L16.569 2.428L16.607 2.465Q16.607 2.539 16.680 2.539L16.680 2.539L16.791 2.539Q16.902 2.613 16.976 2.613Q17.050 2.613 17.050 2.539L17.050 2.539Q17.273 2.428 17.976 2.206L17.976 2.206Q18.160 2.095 18.290 2.187Q18.419 2.280 18.419 2.539L18.419 2.539ZM5.580 6.128L5.580 6.128L14.386 6.128Q15.090 6.128 15.422 6.239L15.422 6.239Q16.532 6.609 17.050 7.275L17.050 7.275Q17.605 7.867 17.605 8.681L17.605 8.681Q17.605 9.347 17.273 10.050L17.273 10.050Q16.902 10.605 16.348 10.975L16.348 10.975Q16.125 11.197 15.977 11.197L15.977 11.197Q16.052 11.271 16.163 11.326Q16.273 11.382 16.348 11.456L16.348 11.456L16.532 11.604Q16.939 11.974 17.050 12.233L17.050 12.233Q17.383 12.788 17.383 13.417L17.383 13.417Q17.383 13.528 17.605 13.750L17.605 13.750Q17.753 13.898 18.049 13.972L18.049 13.972Q18.197 13.972 18.549 13.972Q18.901 13.972 19.122 13.750L19.122 13.750Q19.270 13.602 19.381 13.306L19.381 13.306L19.456 13.047L19.456 12.492Q19.456 12.381 19.474 12.381Q19.492 12.381 19.566 12.381L19.566 12.381L20.380 12.381L20.380 10.864Q20.232 10.790 19.881 10.623Q19.529 10.457 19.345 10.383L19.345 10.383Q19.308 10.346 19.122 10.290Q18.938 10.235 18.901 10.161L18.901 10.161Q18.346 9.976 18.530 9.236L18.530 9.236Q19.011 8.089 19.345 7.497L19.345 7.497L19.345 7.386Q18.901 6.683 18.642 6.387L18.642 6.387Q18.197 5.832 17.716 5.425L17.716 5.425Q16.014 3.871 13.573 3.353L13.573 3.353L13.462 3.353Q12.759 4.056 12.314 4.389L12.314 4.389Q12.130 4.574 11.834 4.574Q11.538 4.574 11.352 4.389L11.352 4.389L10.317 3.353L10.206 3.353Q9.762 3.464 9.058 3.686L9.058 3.686Q7.245 4.352 5.802 5.758L5.802 5.758Q5.580 6.017 5.580 6.128ZM18.642 16.747L18.642 16.747L15.200 16.747Q14.831 16.747 14.720 16.636L14.720 16.636Q14.128 16.340 13.905 15.489L13.905 15.489L13.869 15.267Q13.683 14.601 13.683 14.231L13.683 14.231Q13.683 13.972 13.480 13.528Q13.276 13.084 12.944 12.843Q12.610 12.603 12.166 12.603L12.166 12.603L10.095 12.603L10.095 14.083L12.166 14.083Q12.277 14.083 12.296 14.101Q12.314 14.120 12.314 14.231L12.314 14.231L12.314 16.525Q12.314 16.599 12.296 16.617Q12.277 16.636 12.166 16.636L12.166 16.636L5.247 16.636Q5.469 17.006 5.950 17.450L5.950 17.450L6.061 17.450Q6.986 17.228 7.430 17.228L7.430 17.228Q7.689 17.154 7.930 17.283Q8.171 17.413 8.244 17.672L8.244 17.672L8.614 19.189L8.614 19.300Q9.540 19.670 9.983 19.781L9.983 19.781Q10.761 20.003 11.352 20.003L11.352 20.003Q11.907 20.077 12.573 20.040L12.573 20.040Q12.980 20.003 13.794 19.892L13.794 19.892Q14.386 19.781 15.534 19.300L15.534 19.300L15.534 19.189L15.866 17.672Q16.088 17.080 16.680 17.228L16.680 17.228L18.087 17.561L18.197 17.561Q18.197 17.228 18.642 16.747ZM6.283 8.681L4.914 8.681L5.247 9.347L5.284 9.458Q5.321 9.643 5.247 9.717L5.247 9.717Q5.247 9.902 4.988 10.087L4.988 10.087L4.914 10.161Q3.989 10.642 3.508 10.753L3.508 10.753L3.434 10.753Q3.397 10.790 3.397 10.864L3.397 10.864L3.397 11.456Q3.397 12.603 3.731 13.972L3.731 13.972L3.767 14.046Q3.767 14.120 3.841 14.120L3.841 14.120L6.283 14.120L6.283 8.681ZM9.872 10.272L9.872 10.272Q9.910 10.272 9.947 10.272L9.947 10.272L9.872 10.272L12.537 10.272Q12.980 10.272 13.239 10.161L13.239 10.161L13.351 10.087Q13.498 9.976 13.573 9.809Q13.646 9.643 13.628 9.402Q13.610 9.162 13.462 9.014L13.462 9.014Q13.091 8.681 12.648 8.681L12.648 8.681L9.762 8.681Q9.872 9.236 9.872 10.272ZM2.917 9.125L2.917 9.125Q2.917 9.384 3.138 9.606Q3.360 9.828 3.619 9.828Q3.878 9.828 4.100 9.606Q4.322 9.384 4.322 9.125Q4.322 8.866 4.100 8.644Q3.878 8.422 3.619 8.422Q3.360 8.422 3.138 8.644Q2.917 8.866 2.917 9.125ZM17.605 18.856L17.605 18.856Q17.605 18.597 17.402 18.375Q17.198 18.153 16.921 18.153Q16.643 18.153 16.440 18.375Q16.236 18.597 16.236 18.856Q16.236 19.115 16.440 19.318Q16.643 19.522 16.921 19.522Q17.198 19.522 17.402 19.337Q17.605 19.152 17.605 18.856ZM6.764 18.153L6.764 18.153Q6.468 18.153 6.265 18.375Q6.061 18.597 6.061 18.856Q6.061 19.115 6.265 19.318Q6.468 19.522 6.746 19.522Q7.023 19.522 7.227 19.318Q7.430 19.115 7.430 18.856Q7.430 18.597 7.227 18.375Q7.023 18.153 6.764 18.153ZM12.537 2.983L12.537 2.983Q12.537 2.724 12.352 2.520Q12.166 2.317 11.852 2.317Q11.538 2.317 11.334 2.502Q11.131 2.687 11.131 2.983Q11.131 3.279 11.316 3.482Q11.500 3.686 11.834 3.686L11.834 3.686Q12.314 3.686 12.537 2.983ZM20.047 9.939L20.047 9.939Q20.306 9.939 20.529 9.717Q20.750 9.495 20.750 9.236Q20.750 8.977 20.529 8.755Q20.306 8.533 20.047 8.533Q19.788 8.533 19.566 8.755Q19.345 8.977 19.345 9.254Q19.345 9.532 19.529 9.735Q19.715 9.939 20.047 9.939Z"/></svg>  Rust </a> </li> </ul> </div> <section id="tab-panel-9" aria-labelledby="tab-9" role="tabpanel"> <p>Add the following code inside the <span class="hljs-title">MainWindow</span> component to signal to the C++ code when the user clicks on a tile.</p><div class="expressive-code"><link rel="stylesheet" href="/tng/_astro/ec.fq3m0.css"><script type="module" src="/tng/_astro/ec.8zarh.js"></script><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">export</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">component</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">inherits</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">Window</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">width</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">326px</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">height</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">326px</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#DCDCAA;--1:#795E26">callback</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">check_if_pair_solved</span><span style="--0:#CCCCCC;--1:#3B3B3B">(); </span><span style="--0:#76A162;--1:#007A00">// Added</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#569CD6;--1:#0000FF">in</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B"> &#x3C;</span><span style="--0:#4EC9B0;--1:#227188">bool</span><span style="--0:#CCCCCC;--1:#3B3B3B">> </span><span style="--0:#9CDCFE;--1:#001080">disable_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">; </span><span style="--0:#76A162;--1:#007A00">// Added</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#569CD6;--1:#0000FF">in-out</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B"> &#x3C;[</span><span style="--0:#9CDCFE;--1:#001080">TileData</span><span style="--0:#CCCCCC;--1:#3B3B3B">]> </span><span style="--0:#9CDCFE;--1:#001080">memory_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">: [</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">           </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">{ </span><span style="--0:#9CDCFE;--1:#001080">image</span><span style="--0:#CCCCCC;--1:#3B3B3B">: @image-url(</span><span style="--0:#CE9178;--1:#A31515">"icons/at.png"</span><span style="--0:#CCCCCC;--1:#3B3B3B">) },</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="    export component MainWindow inherits Window {        width: 326px;        height: 326px;        callback check_if_pair_solved(); // Added        in property <bool> disable_tiles; // Added        in-out property <[TileData]> memory_tiles: [           { image: @image-url(&#x22;icons/at.png&#x22;) },"><div></div></button></div></figure></div><p>This change adds a way for the <span class="hljs-title">MainWindow</span> to call to the C++ code that it should
 check if a player has solved a pair of tiles. The Rust code needs an additional property to toggle to disable further
@@ -125,7 +126,7 @@
 </div></div><div class="ec-line"><div class="code"><span class="indent">                    </span><span style="--0:#4EC9B0;--1:#227188">slint</span><span style="--0:#CCCCCC;--1:#3B3B3B">::</span><span style="--0:#4EC9B0;--1:#227188">Timer</span><span style="--0:#CCCCCC;--1:#3B3B3B">::</span><span style="--0:#DCDCAA;--1:#795E26">single_shot</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#4EC9B0;--1:#227188">std</span><span style="--0:#CCCCCC;--1:#3B3B3B">::</span><span style="--0:#4EC9B0;--1:#227188">chrono</span><span style="--0:#CCCCCC;--1:#3B3B3B">::</span><span style="--0:#DCDCAA;--1:#795E26">seconds</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#B5CEA8;--1:#08774E">1</span><span style="--0:#CCCCCC;--1:#3B3B3B">),</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">                        </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">[</span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B">]() </span><span style="--0:#569CD6;--1:#0000FF">mutable</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">                            </span><span style="--0:#9CDCFE;--1:#001080">main_window</span><span style="--0:#CCCCCC;--1:#3B3B3B">-></span><span style="--0:#DCDCAA;--1:#795E26">set_disable_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#569CD6;--1:#0000FF">false</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span class="indent">                            </span><span style="--0:#9CDCFE;--1:#001080">first_visible_tile</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">image_visible</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">false</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">                            </span><span style="--0:#9CDCFE;--1:#001080">tiles_model</span><span style="--0:#CCCCCC;--1:#3B3B3B">-></span><span style="--0:#DCDCAA;--1:#795E26">set_row_data</span><span style="--0:#CCCCCC;--1:#3B3B3B">(first_visible_index,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">                                                      </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">first_visible_tile);</span></div></div><div class="ec-line"><div class="code"><span class="indent">                            </span><span style="--0:#9CDCFE;--1:#001080">tile</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">image_visible</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">false</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">                            </span><span style="--0:#9CDCFE;--1:#001080">tiles_model</span><span style="--0:#CCCCCC;--1:#3B3B3B">-></span><span style="--0:#DCDCAA;--1:#795E26">set_row_data</span><span style="--0:#CCCCCC;--1:#3B3B3B">(i, tile);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">                        </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">});</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">                </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">            </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">});</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="    main_window->on_check_if_pair_solved(            [main_window_weak = slint::ComponentWeakHandle(main_window)] {                auto main_window = *main_window_weak.lock();                auto tiles_model = main_window->get_memory_tiles();                int first_visible_index = -1;                TileData first_visible_tile;                for (int i = 0; i < tiles_model->row_count(); ++i) {                    auto tile = *tiles_model->row_data(i);                    if (!tile.image_visible || tile.solved)                        continue;                    if (first_visible_index == -1) {                        first_visible_index = i;                        first_visible_tile = tile;                        continue;                    }                    bool is_pair_solved = tile == first_visible_tile;                    if (is_pair_solved) {                        first_visible_tile.solved = true;                        tiles_model->set_row_data(first_visible_index,                                                  first_visible_tile);                        tile.solved = true;                        tiles_model->set_row_data(i, tile);                        return;                    }                    main_window->set_disable_tiles(true);                    slint::Timer::single_shot(std::chrono::seconds(1),                        [=]() mutable {                            main_window->set_disable_tiles(false);                            first_visible_tile.image_visible = false;                            tiles_model->set_row_data(first_visible_index,                                                      first_visible_tile);                            tile.image_visible = false;                            tiles_model->set_row_data(i, tile);                        });                }            });"><div></div></button></div></figure></div><p>The code uses a <a href="https://slint.dev/docs/cpp/api/classslint_1_1ComponentWeakHandle">ComponentWeakHandle</a> pointer of the <code dir="auto">main_window</code>. This is
 important because capturing a copy of the <code dir="auto">main_window</code> itself within the callback handler would result in circular ownership.
 The <code dir="auto">MainWindow</code> owns the callback handler, which itself owns a reference to the <code dir="auto">MainWindow</code>, which must be weak
-instead of strong to avoid a memory leak.</p> </section><section id="tab-panel-7" aria-labelledby="tab-7" role="tabpanel" hidden> <p>Change the contents of <code dir="auto">memory.slint</code> to signal to the JavaScript code when the user clicks on a tile.</p><div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">export</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">component</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">inherits</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">Window</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">width</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">326px</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">height</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">326px</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code">
+instead of strong to avoid a memory leak.</p> </section><section id="tab-panel-10" aria-labelledby="tab-10" role="tabpanel" hidden> <p>Change the contents of <code dir="auto">memory.slint</code> to signal to the JavaScript code when the user clicks on a tile.</p><div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">export</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">component</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">inherits</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">Window</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">width</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">326px</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">height</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">326px</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#DCDCAA;--1:#795E26">callback</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">check_if_pair_solved</span><span style="--0:#CCCCCC;--1:#3B3B3B">(); </span><span style="--0:#76A162;--1:#007A00">// Added</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#569CD6;--1:#0000FF">in</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B"> &#x3C;</span><span style="--0:#4EC9B0;--1:#227188">bool</span><span style="--0:#CCCCCC;--1:#3B3B3B">> </span><span style="--0:#9CDCFE;--1:#001080">disable_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">; </span><span style="--0:#76A162;--1:#007A00">// Added</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#569CD6;--1:#0000FF">in-out</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B"> &#x3C;[</span><span style="--0:#9CDCFE;--1:#001080">TileData</span><span style="--0:#CCCCCC;--1:#3B3B3B">]> </span><span style="--0:#9CDCFE;--1:#001080">memory_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">: [</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">           </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">{ </span><span style="--0:#9CDCFE;--1:#001080">image</span><span style="--0:#CCCCCC;--1:#3B3B3B">: @image-url(</span><span style="--0:#CE9178;--1:#A31515">"icons/at.png"</span><span style="--0:#CCCCCC;--1:#3B3B3B">) },</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="    export component MainWindow inherits Window {        width: 326px;        height: 326px;        callback check_if_pair_solved(); // Added        in property <bool> disable_tiles; // Added        in-out property <[TileData]> memory_tiles: [           { image: @image-url(&#x22;icons/at.png&#x22;) },"><div></div></button></div></figure></div><p>This change adds a way for the <span class="hljs-title">MainWindow</span> to call to the JavaScript code that it should
 check if a player has solved a pair of tiles. The Rust code needs an additional property to toggle to disable further
@@ -134,7 +135,7 @@
 a player can’t click anything during this time.</p><p>Insert this code before the <code dir="auto">mainWindow.run()</code> call:</p><div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#9CDCFE;--1:#001080">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">check_if_pair_solved</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">function</span><span style="--0:#CCCCCC;--1:#3B3B3B"> () {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">flipped_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> [];</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#9CDCFE;--1:#001080">tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">forEach</span><span style="--0:#CCCCCC;--1:#3B3B3B">((</span><span style="--0:#9CDCFE;--1:#001080">tile</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">index</span><span style="--0:#CCCCCC;--1:#3B3B3B">) </span><span style="--0:#569CD6;--1:#0000FF">=></span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#C586C0;--1:#AC00D8">if</span><span style="--0:#CCCCCC;--1:#3B3B3B"> (</span><span style="--0:#9CDCFE;--1:#001080">tile</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">image_visible</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">&#x26;&#x26;</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">!</span><span style="--0:#9CDCFE;--1:#001080">tile</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">solved</span><span style="--0:#CCCCCC;--1:#3B3B3B">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent">            </span><span style="--0:#9CDCFE;--1:#001080">flipped_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">push</span><span style="--0:#CCCCCC;--1:#3B3B3B">({</span></div></div><div class="ec-line"><div class="code"><span class="indent">                </span><span style="--0:#9CDCFE;--1:#001080">index</span><span style="--0:#CCCCCC;--1:#3B3B3B">,</span></div></div><div class="ec-line"><div class="code"><span class="indent">                </span><span style="--0:#9CDCFE;--1:#001080">tile</span><span style="--0:#CCCCCC;--1:#3B3B3B">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">            </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">});</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">        </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">    </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">});</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#C586C0;--1:#AC00D8">if</span><span style="--0:#CCCCCC;--1:#3B3B3B"> (</span><span style="--0:#9CDCFE;--1:#001080">flipped_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">length</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">===</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#B5CEA8;--1:#08774E">2</span><span style="--0:#CCCCCC;--1:#3B3B3B">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> { </span><span style="--0:#9CDCFE;--1:#001080">tile</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#4FC1FF;--1:#006BB8">tile1</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">index</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#4FC1FF;--1:#006BB8">tile1_index</span><span style="--0:#CCCCCC;--1:#3B3B3B"> } </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">flipped_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">[</span><span style="--0:#B5CEA8;--1:#08774E">0</span><span style="--0:#CCCCCC;--1:#3B3B3B">];</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> { </span><span style="--0:#9CDCFE;--1:#001080">tile</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#4FC1FF;--1:#006BB8">tile2</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">index</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#4FC1FF;--1:#006BB8">tile2_index</span><span style="--0:#CCCCCC;--1:#3B3B3B"> } </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">flipped_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">[</span><span style="--0:#B5CEA8;--1:#08774E">1</span><span style="--0:#CCCCCC;--1:#3B3B3B">];</span></div></div><div class="ec-line"><div class="code">
-</div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">is_pair_solved</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">tile1</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">image</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">path</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">===</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">tile2</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">image</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">path</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#C586C0;--1:#AC00D8">if</span><span style="--0:#CCCCCC;--1:#3B3B3B"> (</span><span style="--0:#9CDCFE;--1:#001080">is_pair_solved</span><span style="--0:#CCCCCC;--1:#3B3B3B">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent">            </span><span style="--0:#9CDCFE;--1:#001080">tile1</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">solved</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">true</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">            </span><span style="--0:#9CDCFE;--1:#001080">model</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">setRowData</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#9CDCFE;--1:#001080">tile1_index</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">tile1</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span class="indent">            </span><span style="--0:#9CDCFE;--1:#001080">tile2</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">solved</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">true</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">            </span><span style="--0:#9CDCFE;--1:#001080">model</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">setRowData</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#9CDCFE;--1:#001080">tile2_index</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">tile2</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">        </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">} </span><span style="--0:#C586C0;--1:#AC00D8">else</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">            </span><span style="--0:#9CDCFE;--1:#001080">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">disable_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">true</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">            </span><span style="--0:#DCDCAA;--1:#795E26">setTimeout</span><span style="--0:#CCCCCC;--1:#3B3B3B">(() </span><span style="--0:#569CD6;--1:#0000FF">=></span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">                </span><span style="--0:#9CDCFE;--1:#001080">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">disable_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">false</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">                </span><span style="--0:#9CDCFE;--1:#001080">tile1</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">image_visible</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">false</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">                </span><span style="--0:#9CDCFE;--1:#001080">model</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">setRowData</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#9CDCFE;--1:#001080">tile1_index</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">tile1</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span class="indent">                </span><span style="--0:#9CDCFE;--1:#001080">tile2</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">image_visible</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">false</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">                </span><span style="--0:#9CDCFE;--1:#001080">model</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">setRowData</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#9CDCFE;--1:#001080">tile2_index</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">tile2</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">            </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">}, </span><span style="--0:#B5CEA8;--1:#08774E">1000</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">        </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">    </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">};</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="mainWindow.check_if_pair_solved = function () {    const flipped_tiles = [];    tiles.forEach((tile, index) => {        if (tile.image_visible &#x26;&#x26; !tile.solved) {            flipped_tiles.push({                index,                tile,            });        }    });    if (flipped_tiles.length === 2) {        const { tile: tile1, index: tile1_index } = flipped_tiles[0];        const { tile: tile2, index: tile2_index } = flipped_tiles[1];        const is_pair_solved = tile1.image.path === tile2.image.path;        if (is_pair_solved) {            tile1.solved = true;            model.setRowData(tile1_index, tile1);            tile2.solved = true;            model.setRowData(tile2_index, tile2);        } else {            mainWindow.disable_tiles = true;            setTimeout(() => {                mainWindow.disable_tiles = false;                tile1.image_visible = false;                model.setRowData(tile1_index, tile1);                tile2.image_visible = false;                model.setRowData(tile2_index, tile2);            }, 1000);        }    }};"><div></div></button></div></figure></div> </section><section id="tab-panel-8" aria-labelledby="tab-8" role="tabpanel" hidden> <p>Add the following code inside the <span class="hljs-title">MainWindow</span> component to signal to the Rust code when the user clicks on a tile.</p><div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">export</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">component</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">inherits</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">Window</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">width</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">326px</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">height</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">326px</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code">
+</div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">is_pair_solved</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">tile1</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">image</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">path</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">===</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">tile2</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">image</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">path</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#C586C0;--1:#AC00D8">if</span><span style="--0:#CCCCCC;--1:#3B3B3B"> (</span><span style="--0:#9CDCFE;--1:#001080">is_pair_solved</span><span style="--0:#CCCCCC;--1:#3B3B3B">) {</span></div></div><div class="ec-line"><div class="code"><span class="indent">            </span><span style="--0:#9CDCFE;--1:#001080">tile1</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">solved</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">true</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">            </span><span style="--0:#9CDCFE;--1:#001080">model</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">setRowData</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#9CDCFE;--1:#001080">tile1_index</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">tile1</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span class="indent">            </span><span style="--0:#9CDCFE;--1:#001080">tile2</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">solved</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">true</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">            </span><span style="--0:#9CDCFE;--1:#001080">model</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">setRowData</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#9CDCFE;--1:#001080">tile2_index</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">tile2</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">        </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">} </span><span style="--0:#C586C0;--1:#AC00D8">else</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">            </span><span style="--0:#9CDCFE;--1:#001080">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">disable_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">true</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">            </span><span style="--0:#DCDCAA;--1:#795E26">setTimeout</span><span style="--0:#CCCCCC;--1:#3B3B3B">(() </span><span style="--0:#569CD6;--1:#0000FF">=></span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">                </span><span style="--0:#9CDCFE;--1:#001080">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">disable_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">false</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">                </span><span style="--0:#9CDCFE;--1:#001080">tile1</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">image_visible</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">false</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">                </span><span style="--0:#9CDCFE;--1:#001080">model</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">setRowData</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#9CDCFE;--1:#001080">tile1_index</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">tile1</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span class="indent">                </span><span style="--0:#9CDCFE;--1:#001080">tile2</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">image_visible</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">false</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">                </span><span style="--0:#9CDCFE;--1:#001080">model</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">setRowData</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#9CDCFE;--1:#001080">tile2_index</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#9CDCFE;--1:#001080">tile2</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">            </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">}, </span><span style="--0:#B5CEA8;--1:#08774E">1000</span><span style="--0:#CCCCCC;--1:#3B3B3B">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">        </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">    </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">};</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="mainWindow.check_if_pair_solved = function () {    const flipped_tiles = [];    tiles.forEach((tile, index) => {        if (tile.image_visible &#x26;&#x26; !tile.solved) {            flipped_tiles.push({                index,                tile,            });        }    });    if (flipped_tiles.length === 2) {        const { tile: tile1, index: tile1_index } = flipped_tiles[0];        const { tile: tile2, index: tile2_index } = flipped_tiles[1];        const is_pair_solved = tile1.image.path === tile2.image.path;        if (is_pair_solved) {            tile1.solved = true;            model.setRowData(tile1_index, tile1);            tile2.solved = true;            model.setRowData(tile2_index, tile2);        } else {            mainWindow.disable_tiles = true;            setTimeout(() => {                mainWindow.disable_tiles = false;                tile1.image_visible = false;                model.setRowData(tile1_index, tile1);                tile2.image_visible = false;                model.setRowData(tile2_index, tile2);            }, 1000);        }    }};"><div></div></button></div></figure></div> </section><section id="tab-panel-11" aria-labelledby="tab-11" role="tabpanel" hidden> <p>Add the following code inside the <span class="hljs-title">MainWindow</span> component to signal to the Rust code when the user clicks on a tile.</p><div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#569CD6;--1:#0000FF">export</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">component</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">inherits</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">Window</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">width</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">326px</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">height</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#B5CEA8;--1:#08774E">326px</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#DCDCAA;--1:#795E26">callback</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">check_if_pair_solved</span><span style="--0:#CCCCCC;--1:#3B3B3B">(); </span><span style="--0:#76A162;--1:#007A00">// Added</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#569CD6;--1:#0000FF">in</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B"> &#x3C;</span><span style="--0:#4EC9B0;--1:#227188">bool</span><span style="--0:#CCCCCC;--1:#3B3B3B">> </span><span style="--0:#9CDCFE;--1:#001080">disable_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">; </span><span style="--0:#76A162;--1:#007A00">// Added</span></div></div><div class="ec-line"><div class="code">
 </div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#569CD6;--1:#0000FF">in-out</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">property</span><span style="--0:#CCCCCC;--1:#3B3B3B"> &#x3C;[</span><span style="--0:#9CDCFE;--1:#001080">TileData</span><span style="--0:#CCCCCC;--1:#3B3B3B">]> </span><span style="--0:#9CDCFE;--1:#001080">memory_tiles</span><span style="--0:#CCCCCC;--1:#3B3B3B">: [</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">           </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">{ </span><span style="--0:#9CDCFE;--1:#001080">image</span><span style="--0:#CCCCCC;--1:#3B3B3B">: @image-url(</span><span style="--0:#CE9178;--1:#A31515">"icons/at.png"</span><span style="--0:#CCCCCC;--1:#3B3B3B">) },</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="    export component MainWindow inherits Window {        width: 326px;        height: 326px;        callback check_if_pair_solved(); // Added        in property <bool> disable_tiles; // Added        in-out property <[TileData]> memory_tiles: [           { image: @image-url(&#x22;icons/at.png&#x22;) },"><div></div></button></div></figure></div><p>This change adds a way for the <span class="hljs-title">MainWindow</span> to call to the Rust code that it should
 check if a player has solved a pair of tiles. The Rust code needs an additional property to toggle to disable further
diff --git a/snapshots/tng/tutorial/getting_started/index.html b/snapshots/tng/tutorial/getting_started/index.html
index 8886225ab..028f07a16 100644
--- a/snapshots/tng/tutorial/getting_started/index.html
+++ b/snapshots/tng/tutorial/getting_started/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><script src="/tng/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
@@ -112,7 +113,7 @@ <h2 id="prerequisites">Prerequisites</h2>
 	}
 	customElements.define('starlight-tabs-restore', StarlightTabsRestore);
 })()
-</script><starlight-tabs data-sync-key="dev-language" class="astro-lisrjliy"> <div class="tablist-wrapper not-content astro-lisrjliy"> <ul role="tablist" class="astro-lisrjliy"> <li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-9" id="tab-9" aria-selected="true" tabindex="0" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M0.024 11.935L0.024 11.935Q0.024 9.398 0.841 7.377Q1.659 5.356 2.970 4.045Q4.282 2.733 6.216 1.873L6.216 1.873Q7.722 1.185 10.130 1.185L10.130 1.185Q12.151 1.185 13.763 2.002Q15.376 2.819 16.451 3.894L16.451 3.894L13.484 7.248L13.140 6.990Q12.409 6.431 12.021 6.302L12.021 6.302L11.549 6.173Q10.689 5.915 10.130 5.915L10.130 5.915Q9.184 5.915 8.367 6.302L8.367 6.302Q7.463 6.775 6.905 7.528Q6.346 8.280 5.959 9.441Q5.572 10.602 5.572 11.935L5.572 11.935Q5.572 15.031 6.905 16.364L6.905 16.364Q7.593 17.224 8.453 17.611Q9.313 17.998 10.387 17.998Q11.463 17.998 12.280 17.611L12.280 17.611Q13.183 17.138 13.742 16.364L13.742 16.364L16.709 19.761Q15.462 21.180 13.742 22.041L13.742 22.041Q12.151 22.814 10.130 22.814L10.130 22.814Q8.238 22.814 6.216 22.169L6.216 22.169Q4.411 21.567 2.992 20.148L2.992 20.148Q2.389 19.503 1.831 18.471L1.831 18.471Q1.530 17.869 0.970 16.537L0.970 16.537Q0.024 14.644 0.024 11.935ZM13.355 10.731L13.355 8.452L11.463 8.452L11.463 10.731L9.313 10.731L9.313 12.623L11.463 12.623L11.463 15.031L13.355 15.031L13.355 12.623L15.505 12.623L15.505 10.731L13.355 10.731ZM23.976 10.602L21.396 10.602L21.396 7.936L19.117 7.936L19.117 10.602L16.580 10.602L16.580 12.881L19.117 12.881L19.117 15.720L21.396 15.720L21.396 12.881L23.976 12.881L23.976 10.602Z"/></svg>  C++ </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-10" id="tab-10" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5.376 14.300L5.376 3.352L9.286 3.352L9.286 14.300Q9.286 17.842 7.630 19.452L7.630 19.452Q6.112 20.924 3.076 20.924L3.076 20.924Q2.386 20.924 1.558 20.809Q0.730 20.694 0.224 20.464L0.224 20.464L0.638 17.336Q1.512 17.750 2.662 17.750L2.662 17.750Q3.950 17.750 4.594 17.060L4.594 17.060Q5.376 16.232 5.376 14.300L5.376 14.300ZM11.862 19.912L12.736 16.600Q13.564 17.060 14.668 17.382L14.668 17.382Q15.910 17.750 17.014 17.750L17.014 17.750Q18.394 17.750 19.084 17.267Q19.774 16.784 19.774 15.910Q19.774 15.036 19.130 14.507Q18.486 13.978 16.876 13.426L16.876 13.426Q12.138 11.770 12.138 8.274L12.138 8.274Q12.138 5.974 13.909 4.525Q15.680 3.076 18.762 3.076L18.762 3.076Q21.200 3.076 23.224 3.950L23.224 3.950L22.350 7.124L22.074 6.986Q21.246 6.664 20.740 6.526L20.740 6.526Q19.774 6.250 18.762 6.250L18.762 6.250Q17.520 6.250 16.853 6.733Q16.186 7.216 16.186 7.998Q16.186 8.780 16.922 9.286L16.922 9.286Q17.474 9.700 19.314 10.436L19.314 10.436Q21.614 11.310 22.695 12.552Q23.776 13.794 23.776 15.588L23.776 15.588Q23.776 17.888 22.028 19.314L22.028 19.314Q20.142 20.924 16.738 20.924L16.738 20.924Q15.404 20.924 13.932 20.556L13.932 20.556Q12.782 20.326 11.862 19.912L11.862 19.912Z"/></svg>  NodeJS </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-11" id="tab-11" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M18.419 2.539L18.419 2.983L18.419 3.686L18.530 3.797L18.642 3.797Q18.826 3.760 19.178 3.704Q19.529 3.649 19.696 3.575Q19.863 3.501 19.992 3.630Q20.122 3.760 20.047 3.926Q19.973 4.093 19.918 4.444Q19.863 4.796 19.825 4.981L19.825 4.981L19.825 5.092L19.936 5.203Q19.936 5.314 20.159 5.314L20.159 5.314L21.194 5.314Q21.564 5.314 21.527 5.647L21.527 5.647L21.527 5.906Q21.453 6.128 21.232 6.572L21.232 6.572L21.084 6.831L21.084 6.942L21.157 7.016Q21.194 7.090 21.194 7.164L21.194 7.164L21.305 7.164Q21.491 7.238 21.842 7.293Q22.194 7.349 22.360 7.367Q22.526 7.386 22.601 7.589Q22.674 7.793 22.601 7.978L22.601 7.978L22.305 8.385Q22.082 8.644 22.008 8.792L22.008 8.792L22.008 9.014Q22.008 9.088 22.119 9.162L22.119 9.162L22.230 9.236L23.155 9.606Q23.340 9.680 23.396 9.846Q23.451 10.013 23.267 10.161L23.267 10.161Q22.822 10.642 22.489 10.864L22.489 10.864L22.489 11.197L22.526 11.271Q22.637 11.308 22.712 11.308L22.712 11.308L22.970 11.493Q23.303 11.715 23.488 11.789Q23.674 11.863 23.674 12.066Q23.674 12.270 23.526 12.381L23.526 12.381L22.601 12.936L22.601 13.047Q22.601 13.232 22.601 13.269Q22.601 13.306 22.712 13.417L22.712 13.417Q23.155 13.861 23.415 13.972L23.415 13.972Q23.563 14.157 23.507 14.305Q23.451 14.453 23.267 14.564L23.267 14.564Q22.601 14.786 22.341 14.897L22.341 14.897L22.305 14.934Q22.230 14.971 22.194 15.045Q22.156 15.119 22.230 15.267L22.230 15.267L22.230 15.378Q22.415 15.526 22.637 15.933L22.637 15.933L22.822 16.192Q22.896 16.266 22.878 16.414Q22.860 16.562 22.712 16.636L22.712 16.636L22.601 16.673L22.453 16.747Q22.305 16.747 22.008 16.821Q21.712 16.895 21.564 16.895L21.564 16.895L21.416 16.895Q21.416 16.932 21.361 16.987Q21.305 17.043 21.305 17.117L21.305 17.117L21.343 17.228L21.416 17.339L21.787 18.153Q21.860 18.227 21.805 18.375Q21.749 18.523 21.675 18.597L21.675 18.597L20.270 18.597Q20.159 18.745 20.159 18.967L20.159 18.967Q20.232 19.115 20.288 19.411Q20.343 19.707 20.418 19.873Q20.491 20.040 20.343 20.188Q20.195 20.336 19.936 20.336L19.936 20.336Q19.752 20.299 19.400 20.243Q19.049 20.188 18.901 20.114L18.901 20.114L18.790 20.114L18.604 20.299Q18.567 20.336 18.642 20.336L18.642 20.336L18.642 21.372Q18.642 21.742 18.308 21.742L18.308 21.742L18.087 21.742Q17.605 21.594 17.162 21.261L17.162 21.261L17.050 21.261Q16.939 21.261 16.866 21.335Q16.791 21.409 16.791 21.520L16.791 21.520Q16.791 21.668 16.736 21.964Q16.680 22.260 16.680 22.426Q16.680 22.593 16.477 22.667Q16.273 22.741 16.125 22.667L16.125 22.667Q15.756 22.297 15.311 22.075L15.311 22.075L15.200 22.075Q15.090 22.075 15.015 22.149Q14.942 22.223 14.942 22.297L14.942 22.297L14.608 23.222Q14.497 23.481 14.276 23.481L14.276 23.481Q14.201 23.481 14.165 23.407L14.165 23.407L14.128 23.370Q13.683 22.889 13.462 22.556L13.462 22.556L13.203 22.556Q13.128 22.556 13.055 22.630Q12.980 22.704 12.980 22.778L12.980 22.778L12.537 23.592Q12.425 23.740 12.222 23.740Q12.018 23.740 11.945 23.592L11.945 23.592L11.352 22.667L11.020 22.667L10.206 23.481Q10.095 23.592 9.762 23.592L9.762 23.592Q9.651 23.592 9.651 23.370L9.651 23.370L9.280 22.260Q9.243 22.186 9.169 22.186L9.169 22.186L8.837 22.186Q8.651 22.371 8.281 22.593L8.281 22.593L8.023 22.778L7.800 22.667Q7.467 22.519 7.338 22.426Q7.208 22.334 7.208 22.186L7.208 22.186Q7.097 21.853 7.097 21.150L7.097 21.150L7.060 21.113Q7.060 21.039 6.986 21.039Q6.912 21.039 6.857 20.983Q6.801 20.928 6.764 20.928L6.764 20.928L6.616 20.928L6.505 21.039L5.691 21.372Q5.543 21.483 5.395 21.409Q5.247 21.335 5.247 21.150L5.247 21.150L5.247 19.892L5.136 19.781L5.026 19.781Q4.840 19.818 4.489 19.873Q4.138 19.929 3.971 20.003Q3.804 20.077 3.675 19.947Q3.545 19.818 3.619 19.651Q3.693 19.485 3.749 19.133Q3.804 18.782 3.841 18.597L3.841 18.597L3.841 18.486L3.731 18.375L2.583 18.375Q2.250 18.375 2.250 18.042L2.250 18.042L2.250 17.783Q2.324 17.561 2.583 17.117L2.583 17.117L2.694 16.858L2.694 16.710Q2.657 16.636 2.583 16.636L2.583 16.636Q2.583 16.562 2.510 16.562L2.510 16.562L2.472 16.525Q2.287 16.525 1.936 16.469Q1.584 16.414 1.418 16.414Q1.251 16.414 1.177 16.210Q1.103 16.007 1.214 15.822L1.214 15.822Q1.548 15.489 1.769 15.008L1.769 15.008L1.769 14.786L1.584 14.638Q1.510 14.564 1.436 14.564L1.436 14.564L0.622 14.231Q0.437 14.120 0.382 13.953Q0.326 13.787 0.511 13.639L0.511 13.639Q0.696 13.565 1.066 13.269L1.066 13.269Q1.288 13.047 1.436 12.936L1.436 12.936L1.436 12.714Q1.436 12.492 1.325 12.492L1.325 12.492L0.511 12.011Q0.326 11.937 0.326 11.733Q0.326 11.530 0.511 11.456L0.511 11.456L1.436 10.864L1.436 10.642L0.622 9.828Q0.548 9.754 0.548 9.606Q0.548 9.458 0.622 9.347L0.622 9.347L0.659 9.347Q0.733 9.310 0.733 9.236L0.733 9.236L1.769 8.903L1.769 8.792Q1.843 8.718 1.806 8.533L1.806 8.533L1.769 8.422Q1.658 8.311 1.492 8.089Q1.325 7.867 1.214 7.719Q1.103 7.571 1.177 7.367Q1.251 7.164 1.418 7.127Q1.584 7.090 1.936 7.034Q2.287 6.979 2.472 6.942L2.472 6.942L2.583 6.942Q2.583 6.868 2.639 6.812Q2.694 6.757 2.694 6.683L2.694 6.683L2.694 6.572L2.583 6.461L2.250 5.647Q2.139 5.499 2.213 5.351Q2.287 5.203 2.472 5.203L2.472 5.203L3.731 5.203L3.767 5.129Q3.767 5.092 3.841 5.092L3.841 5.092L3.841 4.981Q3.619 4.278 3.619 3.945L3.619 3.945Q3.545 3.760 3.675 3.630Q3.804 3.501 3.989 3.575L3.989 3.575Q4.322 3.575 5.026 3.797L5.026 3.797L5.136 3.797L5.284 3.649Q5.321 3.575 5.247 3.575L5.247 3.575L5.247 2.539Q5.247 2.206 5.580 2.206L5.580 2.206L5.840 2.206Q6.061 2.280 6.505 2.539L6.505 2.539L6.764 2.650L6.912 2.650Q6.986 2.613 6.986 2.539L6.986 2.539Q7.060 2.539 7.060 2.465L7.060 2.465L7.097 2.428Q7.097 2.243 7.153 1.891Q7.208 1.540 7.208 1.373Q7.208 1.207 7.412 1.133Q7.615 1.059 7.800 1.133L7.800 1.133Q8.133 1.503 8.614 1.725L8.614 1.725L8.837 1.725L8.947 1.614L8.947 1.540Q8.985 1.466 9.058 1.392L9.058 1.392L9.392 0.578Q9.503 0.430 9.576 0.393Q9.651 0.356 9.872 0.356L9.872 0.356L9.983 0.467Q10.058 0.652 10.354 1.022L10.354 1.022Q10.576 1.244 10.686 1.392L10.686 1.392L10.797 1.392Q10.872 1.392 10.945 1.318L10.945 1.318L11.020 1.281L11.500 0.467Q11.648 0.282 11.815 0.263Q11.982 0.245 12.055 0.356L12.055 0.356L12.166 0.467L12.759 1.392L13.091 1.392Q13.166 1.392 13.203 1.318L13.203 1.318L13.239 1.281Q13.683 0.800 13.794 0.578L13.794 0.578Q13.869 0.504 14.017 0.504Q14.165 0.504 14.276 0.578L14.276 0.578L14.276 0.689Q14.497 1.392 14.608 1.614L14.608 1.614L14.720 1.725L14.942 1.725Q15.459 1.540 15.866 1.133L15.866 1.133Q16.052 1.059 16.255 1.133Q16.459 1.207 16.459 1.373Q16.459 1.540 16.514 1.891Q16.569 2.243 16.569 2.428L16.569 2.428L16.607 2.465Q16.607 2.539 16.680 2.539L16.680 2.539L16.791 2.539Q16.902 2.613 16.976 2.613Q17.050 2.613 17.050 2.539L17.050 2.539Q17.273 2.428 17.976 2.206L17.976 2.206Q18.160 2.095 18.290 2.187Q18.419 2.280 18.419 2.539L18.419 2.539ZM5.580 6.128L5.580 6.128L14.386 6.128Q15.090 6.128 15.422 6.239L15.422 6.239Q16.532 6.609 17.050 7.275L17.050 7.275Q17.605 7.867 17.605 8.681L17.605 8.681Q17.605 9.347 17.273 10.050L17.273 10.050Q16.902 10.605 16.348 10.975L16.348 10.975Q16.125 11.197 15.977 11.197L15.977 11.197Q16.052 11.271 16.163 11.326Q16.273 11.382 16.348 11.456L16.348 11.456L16.532 11.604Q16.939 11.974 17.050 12.233L17.050 12.233Q17.383 12.788 17.383 13.417L17.383 13.417Q17.383 13.528 17.605 13.750L17.605 13.750Q17.753 13.898 18.049 13.972L18.049 13.972Q18.197 13.972 18.549 13.972Q18.901 13.972 19.122 13.750L19.122 13.750Q19.270 13.602 19.381 13.306L19.381 13.306L19.456 13.047L19.456 12.492Q19.456 12.381 19.474 12.381Q19.492 12.381 19.566 12.381L19.566 12.381L20.380 12.381L20.380 10.864Q20.232 10.790 19.881 10.623Q19.529 10.457 19.345 10.383L19.345 10.383Q19.308 10.346 19.122 10.290Q18.938 10.235 18.901 10.161L18.901 10.161Q18.346 9.976 18.530 9.236L18.530 9.236Q19.011 8.089 19.345 7.497L19.345 7.497L19.345 7.386Q18.901 6.683 18.642 6.387L18.642 6.387Q18.197 5.832 17.716 5.425L17.716 5.425Q16.014 3.871 13.573 3.353L13.573 3.353L13.462 3.353Q12.759 4.056 12.314 4.389L12.314 4.389Q12.130 4.574 11.834 4.574Q11.538 4.574 11.352 4.389L11.352 4.389L10.317 3.353L10.206 3.353Q9.762 3.464 9.058 3.686L9.058 3.686Q7.245 4.352 5.802 5.758L5.802 5.758Q5.580 6.017 5.580 6.128ZM18.642 16.747L18.642 16.747L15.200 16.747Q14.831 16.747 14.720 16.636L14.720 16.636Q14.128 16.340 13.905 15.489L13.905 15.489L13.869 15.267Q13.683 14.601 13.683 14.231L13.683 14.231Q13.683 13.972 13.480 13.528Q13.276 13.084 12.944 12.843Q12.610 12.603 12.166 12.603L12.166 12.603L10.095 12.603L10.095 14.083L12.166 14.083Q12.277 14.083 12.296 14.101Q12.314 14.120 12.314 14.231L12.314 14.231L12.314 16.525Q12.314 16.599 12.296 16.617Q12.277 16.636 12.166 16.636L12.166 16.636L5.247 16.636Q5.469 17.006 5.950 17.450L5.950 17.450L6.061 17.450Q6.986 17.228 7.430 17.228L7.430 17.228Q7.689 17.154 7.930 17.283Q8.171 17.413 8.244 17.672L8.244 17.672L8.614 19.189L8.614 19.300Q9.540 19.670 9.983 19.781L9.983 19.781Q10.761 20.003 11.352 20.003L11.352 20.003Q11.907 20.077 12.573 20.040L12.573 20.040Q12.980 20.003 13.794 19.892L13.794 19.892Q14.386 19.781 15.534 19.300L15.534 19.300L15.534 19.189L15.866 17.672Q16.088 17.080 16.680 17.228L16.680 17.228L18.087 17.561L18.197 17.561Q18.197 17.228 18.642 16.747ZM6.283 8.681L4.914 8.681L5.247 9.347L5.284 9.458Q5.321 9.643 5.247 9.717L5.247 9.717Q5.247 9.902 4.988 10.087L4.988 10.087L4.914 10.161Q3.989 10.642 3.508 10.753L3.508 10.753L3.434 10.753Q3.397 10.790 3.397 10.864L3.397 10.864L3.397 11.456Q3.397 12.603 3.731 13.972L3.731 13.972L3.767 14.046Q3.767 14.120 3.841 14.120L3.841 14.120L6.283 14.120L6.283 8.681ZM9.872 10.272L9.872 10.272Q9.910 10.272 9.947 10.272L9.947 10.272L9.872 10.272L12.537 10.272Q12.980 10.272 13.239 10.161L13.239 10.161L13.351 10.087Q13.498 9.976 13.573 9.809Q13.646 9.643 13.628 9.402Q13.610 9.162 13.462 9.014L13.462 9.014Q13.091 8.681 12.648 8.681L12.648 8.681L9.762 8.681Q9.872 9.236 9.872 10.272ZM2.917 9.125L2.917 9.125Q2.917 9.384 3.138 9.606Q3.360 9.828 3.619 9.828Q3.878 9.828 4.100 9.606Q4.322 9.384 4.322 9.125Q4.322 8.866 4.100 8.644Q3.878 8.422 3.619 8.422Q3.360 8.422 3.138 8.644Q2.917 8.866 2.917 9.125ZM17.605 18.856L17.605 18.856Q17.605 18.597 17.402 18.375Q17.198 18.153 16.921 18.153Q16.643 18.153 16.440 18.375Q16.236 18.597 16.236 18.856Q16.236 19.115 16.440 19.318Q16.643 19.522 16.921 19.522Q17.198 19.522 17.402 19.337Q17.605 19.152 17.605 18.856ZM6.764 18.153L6.764 18.153Q6.468 18.153 6.265 18.375Q6.061 18.597 6.061 18.856Q6.061 19.115 6.265 19.318Q6.468 19.522 6.746 19.522Q7.023 19.522 7.227 19.318Q7.430 19.115 7.430 18.856Q7.430 18.597 7.227 18.375Q7.023 18.153 6.764 18.153ZM12.537 2.983L12.537 2.983Q12.537 2.724 12.352 2.520Q12.166 2.317 11.852 2.317Q11.538 2.317 11.334 2.502Q11.131 2.687 11.131 2.983Q11.131 3.279 11.316 3.482Q11.500 3.686 11.834 3.686L11.834 3.686Q12.314 3.686 12.537 2.983ZM20.047 9.939L20.047 9.939Q20.306 9.939 20.529 9.717Q20.750 9.495 20.750 9.236Q20.750 8.977 20.529 8.755Q20.306 8.533 20.047 8.533Q19.788 8.533 19.566 8.755Q19.345 8.977 19.345 9.254Q19.345 9.532 19.529 9.735Q19.715 9.939 20.047 9.939Z"/></svg>  Rust </a> </li> </ul> </div> <section id="tab-panel-9" aria-labelledby="tab-9" role="tabpanel"> <p>Before using the template, you need a C++ compiler that supports C++ 20 and to install <a href="https://cmake.org/download/">CMake</a> 3.21 or newer.</p><ol>
+</script><starlight-tabs data-sync-key="dev-language" class="astro-lisrjliy"> <div class="tablist-wrapper not-content astro-lisrjliy"> <ul role="tablist" class="astro-lisrjliy"> <li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-12" id="tab-12" aria-selected="true" tabindex="0" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M0.024 11.935L0.024 11.935Q0.024 9.398 0.841 7.377Q1.659 5.356 2.970 4.045Q4.282 2.733 6.216 1.873L6.216 1.873Q7.722 1.185 10.130 1.185L10.130 1.185Q12.151 1.185 13.763 2.002Q15.376 2.819 16.451 3.894L16.451 3.894L13.484 7.248L13.140 6.990Q12.409 6.431 12.021 6.302L12.021 6.302L11.549 6.173Q10.689 5.915 10.130 5.915L10.130 5.915Q9.184 5.915 8.367 6.302L8.367 6.302Q7.463 6.775 6.905 7.528Q6.346 8.280 5.959 9.441Q5.572 10.602 5.572 11.935L5.572 11.935Q5.572 15.031 6.905 16.364L6.905 16.364Q7.593 17.224 8.453 17.611Q9.313 17.998 10.387 17.998Q11.463 17.998 12.280 17.611L12.280 17.611Q13.183 17.138 13.742 16.364L13.742 16.364L16.709 19.761Q15.462 21.180 13.742 22.041L13.742 22.041Q12.151 22.814 10.130 22.814L10.130 22.814Q8.238 22.814 6.216 22.169L6.216 22.169Q4.411 21.567 2.992 20.148L2.992 20.148Q2.389 19.503 1.831 18.471L1.831 18.471Q1.530 17.869 0.970 16.537L0.970 16.537Q0.024 14.644 0.024 11.935ZM13.355 10.731L13.355 8.452L11.463 8.452L11.463 10.731L9.313 10.731L9.313 12.623L11.463 12.623L11.463 15.031L13.355 15.031L13.355 12.623L15.505 12.623L15.505 10.731L13.355 10.731ZM23.976 10.602L21.396 10.602L21.396 7.936L19.117 7.936L19.117 10.602L16.580 10.602L16.580 12.881L19.117 12.881L19.117 15.720L21.396 15.720L21.396 12.881L23.976 12.881L23.976 10.602Z"/></svg>  C++ </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-13" id="tab-13" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5.376 14.300L5.376 3.352L9.286 3.352L9.286 14.300Q9.286 17.842 7.630 19.452L7.630 19.452Q6.112 20.924 3.076 20.924L3.076 20.924Q2.386 20.924 1.558 20.809Q0.730 20.694 0.224 20.464L0.224 20.464L0.638 17.336Q1.512 17.750 2.662 17.750L2.662 17.750Q3.950 17.750 4.594 17.060L4.594 17.060Q5.376 16.232 5.376 14.300L5.376 14.300ZM11.862 19.912L12.736 16.600Q13.564 17.060 14.668 17.382L14.668 17.382Q15.910 17.750 17.014 17.750L17.014 17.750Q18.394 17.750 19.084 17.267Q19.774 16.784 19.774 15.910Q19.774 15.036 19.130 14.507Q18.486 13.978 16.876 13.426L16.876 13.426Q12.138 11.770 12.138 8.274L12.138 8.274Q12.138 5.974 13.909 4.525Q15.680 3.076 18.762 3.076L18.762 3.076Q21.200 3.076 23.224 3.950L23.224 3.950L22.350 7.124L22.074 6.986Q21.246 6.664 20.740 6.526L20.740 6.526Q19.774 6.250 18.762 6.250L18.762 6.250Q17.520 6.250 16.853 6.733Q16.186 7.216 16.186 7.998Q16.186 8.780 16.922 9.286L16.922 9.286Q17.474 9.700 19.314 10.436L19.314 10.436Q21.614 11.310 22.695 12.552Q23.776 13.794 23.776 15.588L23.776 15.588Q23.776 17.888 22.028 19.314L22.028 19.314Q20.142 20.924 16.738 20.924L16.738 20.924Q15.404 20.924 13.932 20.556L13.932 20.556Q12.782 20.326 11.862 19.912L11.862 19.912Z"/></svg>  NodeJS </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-14" id="tab-14" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M18.419 2.539L18.419 2.983L18.419 3.686L18.530 3.797L18.642 3.797Q18.826 3.760 19.178 3.704Q19.529 3.649 19.696 3.575Q19.863 3.501 19.992 3.630Q20.122 3.760 20.047 3.926Q19.973 4.093 19.918 4.444Q19.863 4.796 19.825 4.981L19.825 4.981L19.825 5.092L19.936 5.203Q19.936 5.314 20.159 5.314L20.159 5.314L21.194 5.314Q21.564 5.314 21.527 5.647L21.527 5.647L21.527 5.906Q21.453 6.128 21.232 6.572L21.232 6.572L21.084 6.831L21.084 6.942L21.157 7.016Q21.194 7.090 21.194 7.164L21.194 7.164L21.305 7.164Q21.491 7.238 21.842 7.293Q22.194 7.349 22.360 7.367Q22.526 7.386 22.601 7.589Q22.674 7.793 22.601 7.978L22.601 7.978L22.305 8.385Q22.082 8.644 22.008 8.792L22.008 8.792L22.008 9.014Q22.008 9.088 22.119 9.162L22.119 9.162L22.230 9.236L23.155 9.606Q23.340 9.680 23.396 9.846Q23.451 10.013 23.267 10.161L23.267 10.161Q22.822 10.642 22.489 10.864L22.489 10.864L22.489 11.197L22.526 11.271Q22.637 11.308 22.712 11.308L22.712 11.308L22.970 11.493Q23.303 11.715 23.488 11.789Q23.674 11.863 23.674 12.066Q23.674 12.270 23.526 12.381L23.526 12.381L22.601 12.936L22.601 13.047Q22.601 13.232 22.601 13.269Q22.601 13.306 22.712 13.417L22.712 13.417Q23.155 13.861 23.415 13.972L23.415 13.972Q23.563 14.157 23.507 14.305Q23.451 14.453 23.267 14.564L23.267 14.564Q22.601 14.786 22.341 14.897L22.341 14.897L22.305 14.934Q22.230 14.971 22.194 15.045Q22.156 15.119 22.230 15.267L22.230 15.267L22.230 15.378Q22.415 15.526 22.637 15.933L22.637 15.933L22.822 16.192Q22.896 16.266 22.878 16.414Q22.860 16.562 22.712 16.636L22.712 16.636L22.601 16.673L22.453 16.747Q22.305 16.747 22.008 16.821Q21.712 16.895 21.564 16.895L21.564 16.895L21.416 16.895Q21.416 16.932 21.361 16.987Q21.305 17.043 21.305 17.117L21.305 17.117L21.343 17.228L21.416 17.339L21.787 18.153Q21.860 18.227 21.805 18.375Q21.749 18.523 21.675 18.597L21.675 18.597L20.270 18.597Q20.159 18.745 20.159 18.967L20.159 18.967Q20.232 19.115 20.288 19.411Q20.343 19.707 20.418 19.873Q20.491 20.040 20.343 20.188Q20.195 20.336 19.936 20.336L19.936 20.336Q19.752 20.299 19.400 20.243Q19.049 20.188 18.901 20.114L18.901 20.114L18.790 20.114L18.604 20.299Q18.567 20.336 18.642 20.336L18.642 20.336L18.642 21.372Q18.642 21.742 18.308 21.742L18.308 21.742L18.087 21.742Q17.605 21.594 17.162 21.261L17.162 21.261L17.050 21.261Q16.939 21.261 16.866 21.335Q16.791 21.409 16.791 21.520L16.791 21.520Q16.791 21.668 16.736 21.964Q16.680 22.260 16.680 22.426Q16.680 22.593 16.477 22.667Q16.273 22.741 16.125 22.667L16.125 22.667Q15.756 22.297 15.311 22.075L15.311 22.075L15.200 22.075Q15.090 22.075 15.015 22.149Q14.942 22.223 14.942 22.297L14.942 22.297L14.608 23.222Q14.497 23.481 14.276 23.481L14.276 23.481Q14.201 23.481 14.165 23.407L14.165 23.407L14.128 23.370Q13.683 22.889 13.462 22.556L13.462 22.556L13.203 22.556Q13.128 22.556 13.055 22.630Q12.980 22.704 12.980 22.778L12.980 22.778L12.537 23.592Q12.425 23.740 12.222 23.740Q12.018 23.740 11.945 23.592L11.945 23.592L11.352 22.667L11.020 22.667L10.206 23.481Q10.095 23.592 9.762 23.592L9.762 23.592Q9.651 23.592 9.651 23.370L9.651 23.370L9.280 22.260Q9.243 22.186 9.169 22.186L9.169 22.186L8.837 22.186Q8.651 22.371 8.281 22.593L8.281 22.593L8.023 22.778L7.800 22.667Q7.467 22.519 7.338 22.426Q7.208 22.334 7.208 22.186L7.208 22.186Q7.097 21.853 7.097 21.150L7.097 21.150L7.060 21.113Q7.060 21.039 6.986 21.039Q6.912 21.039 6.857 20.983Q6.801 20.928 6.764 20.928L6.764 20.928L6.616 20.928L6.505 21.039L5.691 21.372Q5.543 21.483 5.395 21.409Q5.247 21.335 5.247 21.150L5.247 21.150L5.247 19.892L5.136 19.781L5.026 19.781Q4.840 19.818 4.489 19.873Q4.138 19.929 3.971 20.003Q3.804 20.077 3.675 19.947Q3.545 19.818 3.619 19.651Q3.693 19.485 3.749 19.133Q3.804 18.782 3.841 18.597L3.841 18.597L3.841 18.486L3.731 18.375L2.583 18.375Q2.250 18.375 2.250 18.042L2.250 18.042L2.250 17.783Q2.324 17.561 2.583 17.117L2.583 17.117L2.694 16.858L2.694 16.710Q2.657 16.636 2.583 16.636L2.583 16.636Q2.583 16.562 2.510 16.562L2.510 16.562L2.472 16.525Q2.287 16.525 1.936 16.469Q1.584 16.414 1.418 16.414Q1.251 16.414 1.177 16.210Q1.103 16.007 1.214 15.822L1.214 15.822Q1.548 15.489 1.769 15.008L1.769 15.008L1.769 14.786L1.584 14.638Q1.510 14.564 1.436 14.564L1.436 14.564L0.622 14.231Q0.437 14.120 0.382 13.953Q0.326 13.787 0.511 13.639L0.511 13.639Q0.696 13.565 1.066 13.269L1.066 13.269Q1.288 13.047 1.436 12.936L1.436 12.936L1.436 12.714Q1.436 12.492 1.325 12.492L1.325 12.492L0.511 12.011Q0.326 11.937 0.326 11.733Q0.326 11.530 0.511 11.456L0.511 11.456L1.436 10.864L1.436 10.642L0.622 9.828Q0.548 9.754 0.548 9.606Q0.548 9.458 0.622 9.347L0.622 9.347L0.659 9.347Q0.733 9.310 0.733 9.236L0.733 9.236L1.769 8.903L1.769 8.792Q1.843 8.718 1.806 8.533L1.806 8.533L1.769 8.422Q1.658 8.311 1.492 8.089Q1.325 7.867 1.214 7.719Q1.103 7.571 1.177 7.367Q1.251 7.164 1.418 7.127Q1.584 7.090 1.936 7.034Q2.287 6.979 2.472 6.942L2.472 6.942L2.583 6.942Q2.583 6.868 2.639 6.812Q2.694 6.757 2.694 6.683L2.694 6.683L2.694 6.572L2.583 6.461L2.250 5.647Q2.139 5.499 2.213 5.351Q2.287 5.203 2.472 5.203L2.472 5.203L3.731 5.203L3.767 5.129Q3.767 5.092 3.841 5.092L3.841 5.092L3.841 4.981Q3.619 4.278 3.619 3.945L3.619 3.945Q3.545 3.760 3.675 3.630Q3.804 3.501 3.989 3.575L3.989 3.575Q4.322 3.575 5.026 3.797L5.026 3.797L5.136 3.797L5.284 3.649Q5.321 3.575 5.247 3.575L5.247 3.575L5.247 2.539Q5.247 2.206 5.580 2.206L5.580 2.206L5.840 2.206Q6.061 2.280 6.505 2.539L6.505 2.539L6.764 2.650L6.912 2.650Q6.986 2.613 6.986 2.539L6.986 2.539Q7.060 2.539 7.060 2.465L7.060 2.465L7.097 2.428Q7.097 2.243 7.153 1.891Q7.208 1.540 7.208 1.373Q7.208 1.207 7.412 1.133Q7.615 1.059 7.800 1.133L7.800 1.133Q8.133 1.503 8.614 1.725L8.614 1.725L8.837 1.725L8.947 1.614L8.947 1.540Q8.985 1.466 9.058 1.392L9.058 1.392L9.392 0.578Q9.503 0.430 9.576 0.393Q9.651 0.356 9.872 0.356L9.872 0.356L9.983 0.467Q10.058 0.652 10.354 1.022L10.354 1.022Q10.576 1.244 10.686 1.392L10.686 1.392L10.797 1.392Q10.872 1.392 10.945 1.318L10.945 1.318L11.020 1.281L11.500 0.467Q11.648 0.282 11.815 0.263Q11.982 0.245 12.055 0.356L12.055 0.356L12.166 0.467L12.759 1.392L13.091 1.392Q13.166 1.392 13.203 1.318L13.203 1.318L13.239 1.281Q13.683 0.800 13.794 0.578L13.794 0.578Q13.869 0.504 14.017 0.504Q14.165 0.504 14.276 0.578L14.276 0.578L14.276 0.689Q14.497 1.392 14.608 1.614L14.608 1.614L14.720 1.725L14.942 1.725Q15.459 1.540 15.866 1.133L15.866 1.133Q16.052 1.059 16.255 1.133Q16.459 1.207 16.459 1.373Q16.459 1.540 16.514 1.891Q16.569 2.243 16.569 2.428L16.569 2.428L16.607 2.465Q16.607 2.539 16.680 2.539L16.680 2.539L16.791 2.539Q16.902 2.613 16.976 2.613Q17.050 2.613 17.050 2.539L17.050 2.539Q17.273 2.428 17.976 2.206L17.976 2.206Q18.160 2.095 18.290 2.187Q18.419 2.280 18.419 2.539L18.419 2.539ZM5.580 6.128L5.580 6.128L14.386 6.128Q15.090 6.128 15.422 6.239L15.422 6.239Q16.532 6.609 17.050 7.275L17.050 7.275Q17.605 7.867 17.605 8.681L17.605 8.681Q17.605 9.347 17.273 10.050L17.273 10.050Q16.902 10.605 16.348 10.975L16.348 10.975Q16.125 11.197 15.977 11.197L15.977 11.197Q16.052 11.271 16.163 11.326Q16.273 11.382 16.348 11.456L16.348 11.456L16.532 11.604Q16.939 11.974 17.050 12.233L17.050 12.233Q17.383 12.788 17.383 13.417L17.383 13.417Q17.383 13.528 17.605 13.750L17.605 13.750Q17.753 13.898 18.049 13.972L18.049 13.972Q18.197 13.972 18.549 13.972Q18.901 13.972 19.122 13.750L19.122 13.750Q19.270 13.602 19.381 13.306L19.381 13.306L19.456 13.047L19.456 12.492Q19.456 12.381 19.474 12.381Q19.492 12.381 19.566 12.381L19.566 12.381L20.380 12.381L20.380 10.864Q20.232 10.790 19.881 10.623Q19.529 10.457 19.345 10.383L19.345 10.383Q19.308 10.346 19.122 10.290Q18.938 10.235 18.901 10.161L18.901 10.161Q18.346 9.976 18.530 9.236L18.530 9.236Q19.011 8.089 19.345 7.497L19.345 7.497L19.345 7.386Q18.901 6.683 18.642 6.387L18.642 6.387Q18.197 5.832 17.716 5.425L17.716 5.425Q16.014 3.871 13.573 3.353L13.573 3.353L13.462 3.353Q12.759 4.056 12.314 4.389L12.314 4.389Q12.130 4.574 11.834 4.574Q11.538 4.574 11.352 4.389L11.352 4.389L10.317 3.353L10.206 3.353Q9.762 3.464 9.058 3.686L9.058 3.686Q7.245 4.352 5.802 5.758L5.802 5.758Q5.580 6.017 5.580 6.128ZM18.642 16.747L18.642 16.747L15.200 16.747Q14.831 16.747 14.720 16.636L14.720 16.636Q14.128 16.340 13.905 15.489L13.905 15.489L13.869 15.267Q13.683 14.601 13.683 14.231L13.683 14.231Q13.683 13.972 13.480 13.528Q13.276 13.084 12.944 12.843Q12.610 12.603 12.166 12.603L12.166 12.603L10.095 12.603L10.095 14.083L12.166 14.083Q12.277 14.083 12.296 14.101Q12.314 14.120 12.314 14.231L12.314 14.231L12.314 16.525Q12.314 16.599 12.296 16.617Q12.277 16.636 12.166 16.636L12.166 16.636L5.247 16.636Q5.469 17.006 5.950 17.450L5.950 17.450L6.061 17.450Q6.986 17.228 7.430 17.228L7.430 17.228Q7.689 17.154 7.930 17.283Q8.171 17.413 8.244 17.672L8.244 17.672L8.614 19.189L8.614 19.300Q9.540 19.670 9.983 19.781L9.983 19.781Q10.761 20.003 11.352 20.003L11.352 20.003Q11.907 20.077 12.573 20.040L12.573 20.040Q12.980 20.003 13.794 19.892L13.794 19.892Q14.386 19.781 15.534 19.300L15.534 19.300L15.534 19.189L15.866 17.672Q16.088 17.080 16.680 17.228L16.680 17.228L18.087 17.561L18.197 17.561Q18.197 17.228 18.642 16.747ZM6.283 8.681L4.914 8.681L5.247 9.347L5.284 9.458Q5.321 9.643 5.247 9.717L5.247 9.717Q5.247 9.902 4.988 10.087L4.988 10.087L4.914 10.161Q3.989 10.642 3.508 10.753L3.508 10.753L3.434 10.753Q3.397 10.790 3.397 10.864L3.397 10.864L3.397 11.456Q3.397 12.603 3.731 13.972L3.731 13.972L3.767 14.046Q3.767 14.120 3.841 14.120L3.841 14.120L6.283 14.120L6.283 8.681ZM9.872 10.272L9.872 10.272Q9.910 10.272 9.947 10.272L9.947 10.272L9.872 10.272L12.537 10.272Q12.980 10.272 13.239 10.161L13.239 10.161L13.351 10.087Q13.498 9.976 13.573 9.809Q13.646 9.643 13.628 9.402Q13.610 9.162 13.462 9.014L13.462 9.014Q13.091 8.681 12.648 8.681L12.648 8.681L9.762 8.681Q9.872 9.236 9.872 10.272ZM2.917 9.125L2.917 9.125Q2.917 9.384 3.138 9.606Q3.360 9.828 3.619 9.828Q3.878 9.828 4.100 9.606Q4.322 9.384 4.322 9.125Q4.322 8.866 4.100 8.644Q3.878 8.422 3.619 8.422Q3.360 8.422 3.138 8.644Q2.917 8.866 2.917 9.125ZM17.605 18.856L17.605 18.856Q17.605 18.597 17.402 18.375Q17.198 18.153 16.921 18.153Q16.643 18.153 16.440 18.375Q16.236 18.597 16.236 18.856Q16.236 19.115 16.440 19.318Q16.643 19.522 16.921 19.522Q17.198 19.522 17.402 19.337Q17.605 19.152 17.605 18.856ZM6.764 18.153L6.764 18.153Q6.468 18.153 6.265 18.375Q6.061 18.597 6.061 18.856Q6.061 19.115 6.265 19.318Q6.468 19.522 6.746 19.522Q7.023 19.522 7.227 19.318Q7.430 19.115 7.430 18.856Q7.430 18.597 7.227 18.375Q7.023 18.153 6.764 18.153ZM12.537 2.983L12.537 2.983Q12.537 2.724 12.352 2.520Q12.166 2.317 11.852 2.317Q11.538 2.317 11.334 2.502Q11.131 2.687 11.131 2.983Q11.131 3.279 11.316 3.482Q11.500 3.686 11.834 3.686L11.834 3.686Q12.314 3.686 12.537 2.983ZM20.047 9.939L20.047 9.939Q20.306 9.939 20.529 9.717Q20.750 9.495 20.750 9.236Q20.750 8.977 20.529 8.755Q20.306 8.533 20.047 8.533Q19.788 8.533 19.566 8.755Q19.345 8.977 19.345 9.254Q19.345 9.532 19.529 9.735Q19.715 9.939 20.047 9.939Z"/></svg>  Rust </a> </li> </ul> </div> <section id="tab-panel-12" aria-labelledby="tab-12" role="tabpanel"> <p>Before using the template, you need a C++ compiler that supports C++ 20 and to install <a href="https://cmake.org/download/">CMake</a> 3.21 or newer.</p><ol>
 <li>Download and extract the <a href="https://github.com/slint-ui/slint-cpp-template/archive/refs/heads/main.zip">ZIP archive of the C++ Template</a>.</li>
 <li>Rename the extracted directory and change into it:</li>
 </ol><div class="expressive-code"><link rel="stylesheet" href="/tng/_astro/ec.fq3m0.css"><script type="module" src="/tng/_astro/ec.8zarh.js"></script><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">mv</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">slint-cpp-template-main</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">memory</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cd</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">memory</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="mv slint-cpp-template-main memorycd memory"><div></div></button></div></figure></div><h3 id="configure-the-project">Configure the project</h3><p>The <code dir="auto">CMakeLists.txt</code> uses the line <code dir="auto">add_executable(my_application src/main.cpp)</code> to set <code dir="auto">src/main.cpp</code> as the main C++ code file.</p><p>Replace the content of <code dir="auto">src/main.cpp</code> with the following:</p><div class="expressive-code"><link rel="stylesheet" href="/tng/_astro/ec.fq3m0.css"><script type="module" src="/tng/_astro/ec.8zarh.js"></script><figure class="frame has-title not-content"><figcaption class="header"><span class="title">main_initial.cpp</span></figcaption><pre data-language="cpp"><code><div class="ec-line"><div class="code"><span style="--0:#C586C0;--1:#AC00D8">#include</span><span style="--0:#569CD6;--1:#0000FF"> </span><span style="--0:#CE9178;--1:#A31515">"app-window.h"</span><span style="--0:#569CD6;--1:#0000FF"> </span><span style="--0:#76A162;--1:#007A00">// generated header from ui/app-window.slint</span></div></div><div class="ec-line"><div class="code">
@@ -120,13 +121,13 @@ <h2 id="prerequisites">Prerequisites</h2>
 <code dir="auto">slint_target_sources(my_application ui/app-window.slint)</code> is a Slint function used to
 add the <code dir="auto">app-window.slint</code> file to the target.</p><p>Replace the contents of <code dir="auto">ui/app-window.slint</code> with the following:</p><div class="expressive-code"><figure class="frame has-title not-content"><figcaption class="header"><span class="title">app-window.slint</span></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">export</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">component</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">inherits</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">Window</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#4EC9B0;--1:#227188">Text</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">text</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#CE9178;--1:#A31515">"hello world"</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">color</span><span style="--0:#CCCCCC;--1:#3B3B3B">: green;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">    </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="export component MainWindow inherits Window {    Text {        text: &#x22;hello world&#x22;;        color: green;    }}"><div></div></button></div></figure></div><p>Configure with CMake:</p><div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cmake</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">-B</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">build</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="cmake -B build"><div></div></button></div></figure></div><aside aria-label="Tip" class="starlight-aside starlight-aside--tip"> <p class="starlight-aside__title" aria-hidden="true"> <svg aria-hidden="true" class="starlight-aside__icon astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path fill-rule="evenodd" d="M1.44 8.855v-.001l3.527-3.516c.34-.344.802-.541 1.285-.548h6.649l.947-.947c3.07-3.07 6.207-3.072 7.62-2.868a1.821 1.821 0 0 1 1.557 1.557c.204 1.413.203 4.55-2.868 7.62l-.946.946v6.649a1.845 1.845 0 0 1-.549 1.286l-3.516 3.528a1.844 1.844 0 0 1-3.11-.944l-.858-4.275-4.52-4.52-2.31-.463-1.964-.394A1.847 1.847 0 0 1 .98 10.693a1.843 1.843 0 0 1 .46-1.838Zm5.379 2.017-3.873-.776L6.32 6.733h4.638l-4.14 4.14Zm8.403-5.655c2.459-2.46 4.856-2.463 5.89-2.33.134 1.035.13 3.432-2.329 5.891l-6.71 6.71-3.561-3.56 6.71-6.711Zm-1.318 15.837-.776-3.873 4.14-4.14v4.639l-3.364 3.374Z" clip-rule="evenodd"></path><path d="M9.318 18.345a.972.972 0 0 0-1.86-.561c-.482 1.435-1.687 2.204-2.934 2.619a8.22 8.22 0 0 1-1.23.302c.062-.365.157-.79.303-1.229.415-1.247 1.184-2.452 2.62-2.935a.971.971 0 1 0-.62-1.842c-.12.04-.236.084-.35.13-2.02.828-3.012 2.588-3.493 4.033a10.383 10.383 0 0 0-.51 2.845l-.001.016v.063c0 .536.434.972.97.972H2.24a7.21 7.21 0 0 0 .878-.065c.527-.063 1.248-.19 2.02-.447 1.445-.48 3.205-1.472 4.033-3.494a5.828 5.828 0 0 0 .147-.407Z"></path></svg> Tip </p> <section class="starlight-aside__content"> <p>When configuring with CMake, the FetchContent module fetches the source code of Slint via git.
 This may take some time when building for the first time, as the process needs to build
-the Slint runtime and compiler.</p> </section> </aside><p>Build with CMake:</p><div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cmake</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">--build</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">build</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="cmake --build build"><div></div></button></div></figure></div><h3 id="run-the-application">Run the application</h3><p>Run the application binary on Linux or macOS:</p><div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">./build/my_application</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="./build/my_application"><div></div></button></div></figure></div><p>Or on Windows:</p><div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">build\my_application.exe</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="build\my_application.exe"><div></div></button></div></figure></div><p>This opens a window with a green “Hello World” greeting.</p><p>If you are stepping through this tutorial on a Windows machine, you can run the application at each step with:</p><div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">my_application</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="my_application"><div></div></button></div></figure></div> </section><section id="tab-panel-10" aria-labelledby="tab-10" role="tabpanel" hidden> <ol>
+the Slint runtime and compiler.</p> </section> </aside><p>Build with CMake:</p><div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cmake</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">--build</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">build</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="cmake --build build"><div></div></button></div></figure></div><h3 id="run-the-application">Run the application</h3><p>Run the application binary on Linux or macOS:</p><div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">./build/my_application</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="./build/my_application"><div></div></button></div></figure></div><p>Or on Windows:</p><div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">build\my_application.exe</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="build\my_application.exe"><div></div></button></div></figure></div><p>This opens a window with a green “Hello World” greeting.</p><p>If you are stepping through this tutorial on a Windows machine, you can run the application at each step with:</p><div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">my_application</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="my_application"><div></div></button></div></figure></div> </section><section id="tab-panel-13" aria-labelledby="tab-13" role="tabpanel" hidden> <ol>
 <li>Download and extract the <a href="https://github.com/slint-ui/slint-nodejs-template/archive/refs/heads/main.zip">ZIP archive of the Node.js Template</a>.</li>
 <li>Rename the extracted directory and change into it:</li>
 </ol><div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">mv</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">slint-nodejs-template-main</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">memory</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cd</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">memory</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="mv slint-nodejs-template-main memorycd memory"><div></div></button></div></figure></div><ol start="3">
 <li>Install dependencies with npm:</li>
 </ol><div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">npm</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">install</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="npm install"><div></div></button></div></figure></div><h3 id="configure-the-project-1">Configure the project</h3><p>The <code dir="auto">package.json</code> file references <code dir="auto">src/main.js</code> as the entry point for the application and <code dir="auto">src/main.js</code> references <code dir="auto">memory.slint</code> as the UI file.</p><p>Replace the contents of <code dir="auto">src/main.js</code> with the following:</p><div class="expressive-code"><figure class="frame has-title not-content"><figcaption class="header"><span class="title">main_initial.js</span></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#C586C0;--1:#AC00D8">import</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">*</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#C586C0;--1:#AC00D8">as</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">slint</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#C586C0;--1:#AC00D8">from</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">"slint-ui"</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code">
-</div></div><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">ui</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">slint</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">loadFile</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#569CD6;--1:#0000FF">new</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#DCDCAA;--1:#795E26">URL</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#CE9178;--1:#A31515">"./ui/app-window.slint"</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#C586C0;--1:#AC00D8">import</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">meta</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">url</span><span style="--0:#CCCCCC;--1:#3B3B3B">));</span></div></div><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">new</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">ui</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div><div class="ec-line"><div class="code"><span style="--0:#C586C0;--1:#AC00D8">await</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">run</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="import * as slint from &#x22;slint-ui&#x22;;const ui = slint.loadFile(new URL(&#x22;./ui/app-window.slint&#x22;, import.meta.url));const mainWindow = new ui.MainWindow();await mainWindow.run();"><div></div></button></div></figure></div><p>The <code dir="auto">slint.loadFile</code> method resolves files from the process’s current working directory, so from the <code dir="auto">package.json</code> file’s location.</p><p>Replace the contents of <code dir="auto">ui/app-window.slint</code> with the following:</p><div class="expressive-code"><figure class="frame has-title not-content"><figcaption class="header"><span class="title">memory.slint</span></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">export</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">component</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">inherits</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">Window</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#4EC9B0;--1:#227188">Text</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">text</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#CE9178;--1:#A31515">"hello world"</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">color</span><span style="--0:#CCCCCC;--1:#3B3B3B">: green;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">    </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="export component MainWindow inherits Window {    Text {        text: &#x22;hello world&#x22;;        color: green;    }}"><div></div></button></div></figure></div><h3 id="run-the-application-1">Run the application</h3><p>Run the example with <code dir="auto">npm start</code> and a window appears with the green “Hello World” greeting.</p> </section><section id="tab-panel-11" aria-labelledby="tab-11" role="tabpanel" hidden> <p>We recommend using <a href="https://rust-analyzer.github.io">rust-analyzer</a> and <a href="https://github.com/slint-ui/slint/tree/master/editors">our editor integrations for Slint</a> for following this tutorial.</p><ol>
+</div></div><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">ui</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">slint</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">loadFile</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#569CD6;--1:#0000FF">new</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#DCDCAA;--1:#795E26">URL</span><span style="--0:#CCCCCC;--1:#3B3B3B">(</span><span style="--0:#CE9178;--1:#A31515">"./ui/app-window.slint"</span><span style="--0:#CCCCCC;--1:#3B3B3B">, </span><span style="--0:#C586C0;--1:#AC00D8">import</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">meta</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#9CDCFE;--1:#001080">url</span><span style="--0:#CCCCCC;--1:#3B3B3B">));</span></div></div><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">const</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4FC1FF;--1:#006BB8">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">=</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">new</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">ui</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div><div class="ec-line"><div class="code"><span style="--0:#C586C0;--1:#AC00D8">await</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#9CDCFE;--1:#001080">mainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B">.</span><span style="--0:#DCDCAA;--1:#795E26">run</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="import * as slint from &#x22;slint-ui&#x22;;const ui = slint.loadFile(new URL(&#x22;./ui/app-window.slint&#x22;, import.meta.url));const mainWindow = new ui.MainWindow();await mainWindow.run();"><div></div></button></div></figure></div><p>The <code dir="auto">slint.loadFile</code> method resolves files from the process’s current working directory, so from the <code dir="auto">package.json</code> file’s location.</p><p>Replace the contents of <code dir="auto">ui/app-window.slint</code> with the following:</p><div class="expressive-code"><figure class="frame has-title not-content"><figcaption class="header"><span class="title">memory.slint</span></figcaption><pre data-language="slint"><code><div class="ec-line"><div class="code"><span style="--0:#569CD6;--1:#0000FF">export</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">component</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">MainWindow</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">inherits</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#4EC9B0;--1:#227188">Window</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#4EC9B0;--1:#227188">Text</span><span style="--0:#CCCCCC;--1:#3B3B3B"> {</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">text</span><span style="--0:#CCCCCC;--1:#3B3B3B">: </span><span style="--0:#CE9178;--1:#A31515">"hello world"</span><span style="--0:#CCCCCC;--1:#3B3B3B">;</span></div></div><div class="ec-line"><div class="code"><span class="indent">        </span><span style="--0:#9CDCFE;--1:#001080">color</span><span style="--0:#CCCCCC;--1:#3B3B3B">: green;</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#CCCCCC;--1:#3B3B3B">    </span></span><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">}</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="export component MainWindow inherits Window {    Text {        text: &#x22;hello world&#x22;;        color: green;    }}"><div></div></button></div></figure></div><h3 id="run-the-application-1">Run the application</h3><p>Run the example with <code dir="auto">npm start</code> and a window appears with the green “Hello World” greeting.</p> </section><section id="tab-panel-14" aria-labelledby="tab-14" role="tabpanel" hidden> <p>We recommend using <a href="https://rust-analyzer.github.io">rust-analyzer</a> and <a href="https://github.com/slint-ui/slint/tree/master/editors">our editor integrations for Slint</a> for following this tutorial.</p><ol>
 <li>Download and extract the <a href="https://github.com/slint-ui/slint-rust-template/archive/refs/heads/main.zip">ZIP archive of the Rust Template</a>.</li>
 <li>Rename the extracted directory and change into it:</li>
 </ol><div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">mv</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">slint-rust-template-main</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">memory</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cd</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">memory</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="mv slint-rust-template-main memorycd memory"><div></div></button></div></figure></div><h3 id="configure-the-project-2">Configure the project</h3><p>Replace the contents of <code dir="auto">src/main.rs</code> with the following:</p><div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="rust"><code><div class="ec-line"><div class="code"><span style="--0:#4EC9B0;--1:#227188">slint</span><span style="--0:#D4D4D4;--1:#000000">::</span><span style="--0:#DCDCAA;--1:#795E26">include_modules!</span><span style="--0:#CCCCCC;--1:#3B3B3B">();</span></div></div><div class="ec-line"><div class="code">
diff --git a/snapshots/tng/tutorial/ideas_for_the_reader/index.html b/snapshots/tng/tutorial/ideas_for_the_reader/index.html
index 031a4e98b..0535eb45e 100644
--- a/snapshots/tng/tutorial/ideas_for_the_reader/index.html
+++ b/snapshots/tng/tutorial/ideas_for_the_reader/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/tutorial/memory_tile/index.html b/snapshots/tng/tutorial/memory_tile/index.html
index 70f1d899e..1c4e88b1a 100644
--- a/snapshots/tng/tutorial/memory_tile/index.html
+++ b/snapshots/tng/tutorial/memory_tile/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><script src="/tng/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
@@ -126,6 +127,6 @@
 	}
 	customElements.define('starlight-tabs-restore', StarlightTabsRestore);
 })()
-</script><starlight-tabs data-sync-key="dev-platform" class="astro-lisrjliy"> <div class="tablist-wrapper not-content astro-lisrjliy"> <ul role="tablist" class="astro-lisrjliy"> <li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-12" id="tab-12" aria-selected="true" tabindex="0" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M0.125 11.544L0.125 3.450L9.815 2.120L9.815 11.506L0.125 11.544ZM0.125 12.532L9.815 12.570L9.815 21.956L0.125 20.626L0.125 12.532ZM10.993 11.468L10.993 1.968L23.837 0.106L23.837 11.392L10.993 11.468ZM10.955 12.646L23.875 12.684L23.837 23.894L10.993 22.108L10.955 12.646Z"/></svg>  Windows </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-13" id="tab-13" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M14.94 5.19A4.38 4.38 0 0 0 16 2a4.44 4.44 0 0 0-3 1.52 4.17 4.17 0 0 0-1 3.09 3.69 3.69 0 0 0 2.94-1.42Zm2.52 7.44a4.51 4.51 0 0 1 2.16-3.81 4.66 4.66 0 0 0-3.66-2c-1.56-.16-3 .91-3.83.91s-2-.89-3.3-.87a4.92 4.92 0 0 0-4.14 2.53C2.93 12.45 4.24 17 6 19.47c.8 1.21 1.8 2.58 3.12 2.53s1.75-.82 3.28-.82 2 .82 3.3.79 2.22-1.24 3.06-2.45a11 11 0 0 0 1.38-2.85 4.41 4.41 0 0 1-2.68-4.04Z"/></svg>  macOS </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-14" id="tab-14" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M19.7 17.6c-.1-.2-.2-.4-.2-.6 0-.4-.2-.7-.5-1-.1-.1-.3-.2-.4-.2.6-1.8-.3-3.6-1.3-4.9-.8-1.2-2-2.1-1.9-3.7 0-1.9.2-5.4-3.3-5.1-3.6.2-2.6 3.9-2.7 5.2 0 1.1-.5 2.2-1.3 3.1-.2.2-.4.5-.5.7-1 1.2-1.5 2.8-1.5 4.3-.2.2-.4.4-.5.6-.1.1-.2.2-.2.3-.1.1-.3.2-.5.3-.4.1-.7.3-.9.7-.1.3-.2.7-.1 1.1.1.2.1.4 0 .7-.2.4-.2.9 0 1.4.3.4.8.5 1.5.6.5 0 1.1.2 1.6.4.5.3 1.1.5 1.7.5.3 0 .7-.1 1-.2.3-.2.5-.4.6-.7.4 0 1-.2 1.7-.2.6 0 1.2.2 2 .1 0 .1 0 .2.1.3.2.5.7.9 1.3 1h.2c.8-.1 1.6-.5 2.1-1.1.4-.4.9-.7 1.4-.9.6-.3 1-.5 1.1-1 .1-.7-.1-1.1-.5-1.7zM12.8 4.8c.6.1 1.1.6 1 1.2 0 .3-.1.6-.3.9h-.1c-.2-.1-.3-.1-.4-.2.1-.1.1-.3.2-.5 0-.4-.2-.7-.4-.7-.3 0-.5.3-.5.7v.1c-.1-.1-.3-.1-.4-.2V6c-.1-.5.3-1.1.9-1.2zm-.3 2c.1.1.3.2.4.2.1 0 .3.1.4.2.2.1.4.2.4.5s-.3.6-.9.8c-.2.1-.3.1-.4.2-.3.2-.6.3-1 .3-.3 0-.6-.2-.8-.4-.1-.1-.2-.2-.4-.3-.1-.1-.3-.3-.4-.6 0-.1.1-.2.2-.3.3-.2.4-.3.5-.4l.1-.1c.2-.3.6-.5 1-.5.3.1.6.2.9.4zM10.4 5c.4 0 .7.4.8 1.1v.2c-.1 0-.3.1-.4.2v-.2c0-.3-.2-.6-.4-.5-.2 0-.3.3-.3.6 0 .2.1.3.2.4 0 0-.1.1-.2.1-.2-.2-.4-.5-.4-.8 0-.6.3-1.1.7-1.1zm-1 16.1c-.7.3-1.6.2-2.2-.2-.6-.3-1.1-.4-1.8-.4-.5-.1-1-.1-1.1-.3-.1-.2-.1-.5.1-1 .1-.3.1-.6 0-.9-.1-.3-.1-.5 0-.8.1-.3.3-.4.6-.5.3-.1.5-.2.7-.4.1-.1.2-.2.3-.4.3-.4.5-.6.8-.6.6.1 1.1 1 1.5 1.9.2.3.4.7.7 1 .4.5.9 1.2.9 1.6 0 .5-.2.8-.5 1zm4.9-2.2c0 .1 0 .1-.1.2-1.2.9-2.8 1-4.1.3l-.6-.9c.9-.1.7-1.3-1.2-2.5-2-1.3-.6-3.7.1-4.8.1-.1.1 0-.3.8-.3.6-.9 2.1-.1 3.2 0-.8.2-1.6.5-2.4.7-1.3 1.2-2.8 1.5-4.3.1.1.1.1.2.1.1.1.2.2.3.2.2.3.6.4.9.4h.1c.4 0 .8-.1 1.1-.4.1-.1.2-.2.4-.2.3-.1.6-.3.9-.6.4 1.3.8 2.5 1.4 3.6.4.8.7 1.6.9 2.5.3 0 .7.1 1 .3.8.4 1.1.7 1 1.2H18c0-.3-.2-.6-.9-.9-.7-.3-1.3-.3-1.5.4-.1 0-.2.1-.3.1-.8.4-.8 1.5-.9 2.6.1.4 0 .7-.1 1.1zm4.6.6c-.6.2-1.1.6-1.5 1.1-.4.6-1.1 1-1.9.9-.4 0-.8-.3-.9-.7-.1-.6-.1-1.2.2-1.8.1-.4.2-.7.3-1.1.1-1.2.1-1.9.6-2.2 0 .5.3.8.7 1 .5 0 1-.1 1.4-.5h.2c.3 0 .5 0 .7.2.2.2.3.5.3.7 0 .3.2.6.3.9.5.5.5.8.5.9-.1.2-.5.4-.9.6zm-9-12c-.1 0-.1 0-.1.1 0 0 0 .1.1.1s.1.1.1.1c.3.4.8.6 1.4.7.5-.1 1-.2 1.5-.6l.6-.3c.1 0 .1-.1.1-.1 0-.1 0-.1-.1-.1-.2.1-.5.2-.7.3-.4.3-.9.5-1.4.5-.5 0-.9-.3-1.2-.6-.1 0-.2-.1-.3-.1z"/></svg>  Linux </a> </li> </ul> </div> <section id="tab-panel-12" aria-labelledby="tab-12" role="tabpanel"> <p>If you are on Windows, use the following commands:</p><div class="expressive-code"><link rel="stylesheet" href="/tng/_astro/ec.fq3m0.css"><script type="module" src="/tng/_astro/ec.8zarh.js"></script><figure class="frame is-terminal has-title not-content"><figcaption class="header"><span class="title">PowerShell</span></figcaption><pre data-language="powershell"><code><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">cd ui</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">powershell curl </span><span style="--0:#D4D4D4;--1:#000000">-</span><span style="--0:#CCCCCC;--1:#3B3B3B">Uri https:</span><span style="--0:#D4D4D4;--1:#000000">//</span><span style="--0:#CCCCCC;--1:#3B3B3B">slint.dev</span><span style="--0:#D4D4D4;--1:#000000">/</span><span style="--0:#CCCCCC;--1:#3B3B3B">blog</span><span style="--0:#D4D4D4;--1:#000000">/</span><span style="--0:#CCCCCC;--1:#3B3B3B">memory</span><span style="--0:#D4D4D4;--1:#000000">-</span><span style="--0:#CCCCCC;--1:#3B3B3B">game</span><span style="--0:#D4D4D4;--1:#000000">-</span><span style="--0:#CCCCCC;--1:#3B3B3B">tutorial</span><span style="--0:#D4D4D4;--1:#000000">/</span><span style="--0:#CCCCCC;--1:#3B3B3B">icons.zip </span><span style="--0:#D4D4D4;--1:#000000">-</span><span style="--0:#CCCCCC;--1:#3B3B3B">Outfile icons.zip</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">powershell </span><span style="--0:#DCDCAA;--1:#795E26">Expand-Archive</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">-</span><span style="--0:#CCCCCC;--1:#3B3B3B">Path icons.zip </span><span style="--0:#D4D4D4;--1:#000000">-</span><span style="--0:#CCCCCC;--1:#3B3B3B">DestinationPath .</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">cd ..</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="cd uipowershell curl -Uri https://slint.dev/blog/memory-game-tutorial/icons.zip -Outfile icons.zippowershell Expand-Archive -Path icons.zip -DestinationPath .cd .."><div></div></button></div></figure></div><p>This unpacks an <code dir="auto">icons</code> directory containing several icons.</p> </section><section id="tab-panel-13" aria-labelledby="tab-13" role="tabpanel" hidden> <div class="expressive-code"><figure class="frame is-terminal has-title not-content"><figcaption class="header"><span class="title">Terminal</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cd</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">ui</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">curl</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">-O</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">https://slint.dev/blog/memory-game-tutorial/icons.zip</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">unzip</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">icons.zip</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cd</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">..</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="cd uicurl -O https://slint.dev/blog/memory-game-tutorial/icons.zipunzip icons.zipcd .."><div></div></button></div></figure></div><p>This unpacks an <code dir="auto">icons</code> directory containing several icons.</p> </section><section id="tab-panel-14" aria-labelledby="tab-14" role="tabpanel" hidden> <div class="expressive-code"><figure class="frame is-terminal has-title not-content"><figcaption class="header"><span class="title">Bash</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cd</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">ui</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">curl</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">-O</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">https://slint.dev/blog/memory-game-tutorial/icons.zip</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">unzip</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">icons.zip</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cd</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">..</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="cd uicurl -O https://slint.dev/blog/memory-game-tutorial/icons.zipunzip icons.zipcd .."><div></div></button></div></figure></div><p>This unpacks an <code dir="auto">icons</code> directory containing several icons.</p> </section> <starlight-tabs-restore class="astro-lisrjliy"></starlight-tabs-restore> </starlight-tabs>  
-<starlight-tabs data-sync-key="dev-language" class="astro-lisrjliy"> <div class="tablist-wrapper not-content astro-lisrjliy"> <ul role="tablist" class="astro-lisrjliy"> <li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-15" id="tab-15" aria-selected="true" tabindex="0" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M0.024 11.935L0.024 11.935Q0.024 9.398 0.841 7.377Q1.659 5.356 2.970 4.045Q4.282 2.733 6.216 1.873L6.216 1.873Q7.722 1.185 10.130 1.185L10.130 1.185Q12.151 1.185 13.763 2.002Q15.376 2.819 16.451 3.894L16.451 3.894L13.484 7.248L13.140 6.990Q12.409 6.431 12.021 6.302L12.021 6.302L11.549 6.173Q10.689 5.915 10.130 5.915L10.130 5.915Q9.184 5.915 8.367 6.302L8.367 6.302Q7.463 6.775 6.905 7.528Q6.346 8.280 5.959 9.441Q5.572 10.602 5.572 11.935L5.572 11.935Q5.572 15.031 6.905 16.364L6.905 16.364Q7.593 17.224 8.453 17.611Q9.313 17.998 10.387 17.998Q11.463 17.998 12.280 17.611L12.280 17.611Q13.183 17.138 13.742 16.364L13.742 16.364L16.709 19.761Q15.462 21.180 13.742 22.041L13.742 22.041Q12.151 22.814 10.130 22.814L10.130 22.814Q8.238 22.814 6.216 22.169L6.216 22.169Q4.411 21.567 2.992 20.148L2.992 20.148Q2.389 19.503 1.831 18.471L1.831 18.471Q1.530 17.869 0.970 16.537L0.970 16.537Q0.024 14.644 0.024 11.935ZM13.355 10.731L13.355 8.452L11.463 8.452L11.463 10.731L9.313 10.731L9.313 12.623L11.463 12.623L11.463 15.031L13.355 15.031L13.355 12.623L15.505 12.623L15.505 10.731L13.355 10.731ZM23.976 10.602L21.396 10.602L21.396 7.936L19.117 7.936L19.117 10.602L16.580 10.602L16.580 12.881L19.117 12.881L19.117 15.720L21.396 15.720L21.396 12.881L23.976 12.881L23.976 10.602Z"/></svg>  C++ </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-16" id="tab-16" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5.376 14.300L5.376 3.352L9.286 3.352L9.286 14.300Q9.286 17.842 7.630 19.452L7.630 19.452Q6.112 20.924 3.076 20.924L3.076 20.924Q2.386 20.924 1.558 20.809Q0.730 20.694 0.224 20.464L0.224 20.464L0.638 17.336Q1.512 17.750 2.662 17.750L2.662 17.750Q3.950 17.750 4.594 17.060L4.594 17.060Q5.376 16.232 5.376 14.300L5.376 14.300ZM11.862 19.912L12.736 16.600Q13.564 17.060 14.668 17.382L14.668 17.382Q15.910 17.750 17.014 17.750L17.014 17.750Q18.394 17.750 19.084 17.267Q19.774 16.784 19.774 15.910Q19.774 15.036 19.130 14.507Q18.486 13.978 16.876 13.426L16.876 13.426Q12.138 11.770 12.138 8.274L12.138 8.274Q12.138 5.974 13.909 4.525Q15.680 3.076 18.762 3.076L18.762 3.076Q21.200 3.076 23.224 3.950L23.224 3.950L22.350 7.124L22.074 6.986Q21.246 6.664 20.740 6.526L20.740 6.526Q19.774 6.250 18.762 6.250L18.762 6.250Q17.520 6.250 16.853 6.733Q16.186 7.216 16.186 7.998Q16.186 8.780 16.922 9.286L16.922 9.286Q17.474 9.700 19.314 10.436L19.314 10.436Q21.614 11.310 22.695 12.552Q23.776 13.794 23.776 15.588L23.776 15.588Q23.776 17.888 22.028 19.314L22.028 19.314Q20.142 20.924 16.738 20.924L16.738 20.924Q15.404 20.924 13.932 20.556L13.932 20.556Q12.782 20.326 11.862 19.912L11.862 19.912Z"/></svg>  NodeJS </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-17" id="tab-17" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M18.419 2.539L18.419 2.983L18.419 3.686L18.530 3.797L18.642 3.797Q18.826 3.760 19.178 3.704Q19.529 3.649 19.696 3.575Q19.863 3.501 19.992 3.630Q20.122 3.760 20.047 3.926Q19.973 4.093 19.918 4.444Q19.863 4.796 19.825 4.981L19.825 4.981L19.825 5.092L19.936 5.203Q19.936 5.314 20.159 5.314L20.159 5.314L21.194 5.314Q21.564 5.314 21.527 5.647L21.527 5.647L21.527 5.906Q21.453 6.128 21.232 6.572L21.232 6.572L21.084 6.831L21.084 6.942L21.157 7.016Q21.194 7.090 21.194 7.164L21.194 7.164L21.305 7.164Q21.491 7.238 21.842 7.293Q22.194 7.349 22.360 7.367Q22.526 7.386 22.601 7.589Q22.674 7.793 22.601 7.978L22.601 7.978L22.305 8.385Q22.082 8.644 22.008 8.792L22.008 8.792L22.008 9.014Q22.008 9.088 22.119 9.162L22.119 9.162L22.230 9.236L23.155 9.606Q23.340 9.680 23.396 9.846Q23.451 10.013 23.267 10.161L23.267 10.161Q22.822 10.642 22.489 10.864L22.489 10.864L22.489 11.197L22.526 11.271Q22.637 11.308 22.712 11.308L22.712 11.308L22.970 11.493Q23.303 11.715 23.488 11.789Q23.674 11.863 23.674 12.066Q23.674 12.270 23.526 12.381L23.526 12.381L22.601 12.936L22.601 13.047Q22.601 13.232 22.601 13.269Q22.601 13.306 22.712 13.417L22.712 13.417Q23.155 13.861 23.415 13.972L23.415 13.972Q23.563 14.157 23.507 14.305Q23.451 14.453 23.267 14.564L23.267 14.564Q22.601 14.786 22.341 14.897L22.341 14.897L22.305 14.934Q22.230 14.971 22.194 15.045Q22.156 15.119 22.230 15.267L22.230 15.267L22.230 15.378Q22.415 15.526 22.637 15.933L22.637 15.933L22.822 16.192Q22.896 16.266 22.878 16.414Q22.860 16.562 22.712 16.636L22.712 16.636L22.601 16.673L22.453 16.747Q22.305 16.747 22.008 16.821Q21.712 16.895 21.564 16.895L21.564 16.895L21.416 16.895Q21.416 16.932 21.361 16.987Q21.305 17.043 21.305 17.117L21.305 17.117L21.343 17.228L21.416 17.339L21.787 18.153Q21.860 18.227 21.805 18.375Q21.749 18.523 21.675 18.597L21.675 18.597L20.270 18.597Q20.159 18.745 20.159 18.967L20.159 18.967Q20.232 19.115 20.288 19.411Q20.343 19.707 20.418 19.873Q20.491 20.040 20.343 20.188Q20.195 20.336 19.936 20.336L19.936 20.336Q19.752 20.299 19.400 20.243Q19.049 20.188 18.901 20.114L18.901 20.114L18.790 20.114L18.604 20.299Q18.567 20.336 18.642 20.336L18.642 20.336L18.642 21.372Q18.642 21.742 18.308 21.742L18.308 21.742L18.087 21.742Q17.605 21.594 17.162 21.261L17.162 21.261L17.050 21.261Q16.939 21.261 16.866 21.335Q16.791 21.409 16.791 21.520L16.791 21.520Q16.791 21.668 16.736 21.964Q16.680 22.260 16.680 22.426Q16.680 22.593 16.477 22.667Q16.273 22.741 16.125 22.667L16.125 22.667Q15.756 22.297 15.311 22.075L15.311 22.075L15.200 22.075Q15.090 22.075 15.015 22.149Q14.942 22.223 14.942 22.297L14.942 22.297L14.608 23.222Q14.497 23.481 14.276 23.481L14.276 23.481Q14.201 23.481 14.165 23.407L14.165 23.407L14.128 23.370Q13.683 22.889 13.462 22.556L13.462 22.556L13.203 22.556Q13.128 22.556 13.055 22.630Q12.980 22.704 12.980 22.778L12.980 22.778L12.537 23.592Q12.425 23.740 12.222 23.740Q12.018 23.740 11.945 23.592L11.945 23.592L11.352 22.667L11.020 22.667L10.206 23.481Q10.095 23.592 9.762 23.592L9.762 23.592Q9.651 23.592 9.651 23.370L9.651 23.370L9.280 22.260Q9.243 22.186 9.169 22.186L9.169 22.186L8.837 22.186Q8.651 22.371 8.281 22.593L8.281 22.593L8.023 22.778L7.800 22.667Q7.467 22.519 7.338 22.426Q7.208 22.334 7.208 22.186L7.208 22.186Q7.097 21.853 7.097 21.150L7.097 21.150L7.060 21.113Q7.060 21.039 6.986 21.039Q6.912 21.039 6.857 20.983Q6.801 20.928 6.764 20.928L6.764 20.928L6.616 20.928L6.505 21.039L5.691 21.372Q5.543 21.483 5.395 21.409Q5.247 21.335 5.247 21.150L5.247 21.150L5.247 19.892L5.136 19.781L5.026 19.781Q4.840 19.818 4.489 19.873Q4.138 19.929 3.971 20.003Q3.804 20.077 3.675 19.947Q3.545 19.818 3.619 19.651Q3.693 19.485 3.749 19.133Q3.804 18.782 3.841 18.597L3.841 18.597L3.841 18.486L3.731 18.375L2.583 18.375Q2.250 18.375 2.250 18.042L2.250 18.042L2.250 17.783Q2.324 17.561 2.583 17.117L2.583 17.117L2.694 16.858L2.694 16.710Q2.657 16.636 2.583 16.636L2.583 16.636Q2.583 16.562 2.510 16.562L2.510 16.562L2.472 16.525Q2.287 16.525 1.936 16.469Q1.584 16.414 1.418 16.414Q1.251 16.414 1.177 16.210Q1.103 16.007 1.214 15.822L1.214 15.822Q1.548 15.489 1.769 15.008L1.769 15.008L1.769 14.786L1.584 14.638Q1.510 14.564 1.436 14.564L1.436 14.564L0.622 14.231Q0.437 14.120 0.382 13.953Q0.326 13.787 0.511 13.639L0.511 13.639Q0.696 13.565 1.066 13.269L1.066 13.269Q1.288 13.047 1.436 12.936L1.436 12.936L1.436 12.714Q1.436 12.492 1.325 12.492L1.325 12.492L0.511 12.011Q0.326 11.937 0.326 11.733Q0.326 11.530 0.511 11.456L0.511 11.456L1.436 10.864L1.436 10.642L0.622 9.828Q0.548 9.754 0.548 9.606Q0.548 9.458 0.622 9.347L0.622 9.347L0.659 9.347Q0.733 9.310 0.733 9.236L0.733 9.236L1.769 8.903L1.769 8.792Q1.843 8.718 1.806 8.533L1.806 8.533L1.769 8.422Q1.658 8.311 1.492 8.089Q1.325 7.867 1.214 7.719Q1.103 7.571 1.177 7.367Q1.251 7.164 1.418 7.127Q1.584 7.090 1.936 7.034Q2.287 6.979 2.472 6.942L2.472 6.942L2.583 6.942Q2.583 6.868 2.639 6.812Q2.694 6.757 2.694 6.683L2.694 6.683L2.694 6.572L2.583 6.461L2.250 5.647Q2.139 5.499 2.213 5.351Q2.287 5.203 2.472 5.203L2.472 5.203L3.731 5.203L3.767 5.129Q3.767 5.092 3.841 5.092L3.841 5.092L3.841 4.981Q3.619 4.278 3.619 3.945L3.619 3.945Q3.545 3.760 3.675 3.630Q3.804 3.501 3.989 3.575L3.989 3.575Q4.322 3.575 5.026 3.797L5.026 3.797L5.136 3.797L5.284 3.649Q5.321 3.575 5.247 3.575L5.247 3.575L5.247 2.539Q5.247 2.206 5.580 2.206L5.580 2.206L5.840 2.206Q6.061 2.280 6.505 2.539L6.505 2.539L6.764 2.650L6.912 2.650Q6.986 2.613 6.986 2.539L6.986 2.539Q7.060 2.539 7.060 2.465L7.060 2.465L7.097 2.428Q7.097 2.243 7.153 1.891Q7.208 1.540 7.208 1.373Q7.208 1.207 7.412 1.133Q7.615 1.059 7.800 1.133L7.800 1.133Q8.133 1.503 8.614 1.725L8.614 1.725L8.837 1.725L8.947 1.614L8.947 1.540Q8.985 1.466 9.058 1.392L9.058 1.392L9.392 0.578Q9.503 0.430 9.576 0.393Q9.651 0.356 9.872 0.356L9.872 0.356L9.983 0.467Q10.058 0.652 10.354 1.022L10.354 1.022Q10.576 1.244 10.686 1.392L10.686 1.392L10.797 1.392Q10.872 1.392 10.945 1.318L10.945 1.318L11.020 1.281L11.500 0.467Q11.648 0.282 11.815 0.263Q11.982 0.245 12.055 0.356L12.055 0.356L12.166 0.467L12.759 1.392L13.091 1.392Q13.166 1.392 13.203 1.318L13.203 1.318L13.239 1.281Q13.683 0.800 13.794 0.578L13.794 0.578Q13.869 0.504 14.017 0.504Q14.165 0.504 14.276 0.578L14.276 0.578L14.276 0.689Q14.497 1.392 14.608 1.614L14.608 1.614L14.720 1.725L14.942 1.725Q15.459 1.540 15.866 1.133L15.866 1.133Q16.052 1.059 16.255 1.133Q16.459 1.207 16.459 1.373Q16.459 1.540 16.514 1.891Q16.569 2.243 16.569 2.428L16.569 2.428L16.607 2.465Q16.607 2.539 16.680 2.539L16.680 2.539L16.791 2.539Q16.902 2.613 16.976 2.613Q17.050 2.613 17.050 2.539L17.050 2.539Q17.273 2.428 17.976 2.206L17.976 2.206Q18.160 2.095 18.290 2.187Q18.419 2.280 18.419 2.539L18.419 2.539ZM5.580 6.128L5.580 6.128L14.386 6.128Q15.090 6.128 15.422 6.239L15.422 6.239Q16.532 6.609 17.050 7.275L17.050 7.275Q17.605 7.867 17.605 8.681L17.605 8.681Q17.605 9.347 17.273 10.050L17.273 10.050Q16.902 10.605 16.348 10.975L16.348 10.975Q16.125 11.197 15.977 11.197L15.977 11.197Q16.052 11.271 16.163 11.326Q16.273 11.382 16.348 11.456L16.348 11.456L16.532 11.604Q16.939 11.974 17.050 12.233L17.050 12.233Q17.383 12.788 17.383 13.417L17.383 13.417Q17.383 13.528 17.605 13.750L17.605 13.750Q17.753 13.898 18.049 13.972L18.049 13.972Q18.197 13.972 18.549 13.972Q18.901 13.972 19.122 13.750L19.122 13.750Q19.270 13.602 19.381 13.306L19.381 13.306L19.456 13.047L19.456 12.492Q19.456 12.381 19.474 12.381Q19.492 12.381 19.566 12.381L19.566 12.381L20.380 12.381L20.380 10.864Q20.232 10.790 19.881 10.623Q19.529 10.457 19.345 10.383L19.345 10.383Q19.308 10.346 19.122 10.290Q18.938 10.235 18.901 10.161L18.901 10.161Q18.346 9.976 18.530 9.236L18.530 9.236Q19.011 8.089 19.345 7.497L19.345 7.497L19.345 7.386Q18.901 6.683 18.642 6.387L18.642 6.387Q18.197 5.832 17.716 5.425L17.716 5.425Q16.014 3.871 13.573 3.353L13.573 3.353L13.462 3.353Q12.759 4.056 12.314 4.389L12.314 4.389Q12.130 4.574 11.834 4.574Q11.538 4.574 11.352 4.389L11.352 4.389L10.317 3.353L10.206 3.353Q9.762 3.464 9.058 3.686L9.058 3.686Q7.245 4.352 5.802 5.758L5.802 5.758Q5.580 6.017 5.580 6.128ZM18.642 16.747L18.642 16.747L15.200 16.747Q14.831 16.747 14.720 16.636L14.720 16.636Q14.128 16.340 13.905 15.489L13.905 15.489L13.869 15.267Q13.683 14.601 13.683 14.231L13.683 14.231Q13.683 13.972 13.480 13.528Q13.276 13.084 12.944 12.843Q12.610 12.603 12.166 12.603L12.166 12.603L10.095 12.603L10.095 14.083L12.166 14.083Q12.277 14.083 12.296 14.101Q12.314 14.120 12.314 14.231L12.314 14.231L12.314 16.525Q12.314 16.599 12.296 16.617Q12.277 16.636 12.166 16.636L12.166 16.636L5.247 16.636Q5.469 17.006 5.950 17.450L5.950 17.450L6.061 17.450Q6.986 17.228 7.430 17.228L7.430 17.228Q7.689 17.154 7.930 17.283Q8.171 17.413 8.244 17.672L8.244 17.672L8.614 19.189L8.614 19.300Q9.540 19.670 9.983 19.781L9.983 19.781Q10.761 20.003 11.352 20.003L11.352 20.003Q11.907 20.077 12.573 20.040L12.573 20.040Q12.980 20.003 13.794 19.892L13.794 19.892Q14.386 19.781 15.534 19.300L15.534 19.300L15.534 19.189L15.866 17.672Q16.088 17.080 16.680 17.228L16.680 17.228L18.087 17.561L18.197 17.561Q18.197 17.228 18.642 16.747ZM6.283 8.681L4.914 8.681L5.247 9.347L5.284 9.458Q5.321 9.643 5.247 9.717L5.247 9.717Q5.247 9.902 4.988 10.087L4.988 10.087L4.914 10.161Q3.989 10.642 3.508 10.753L3.508 10.753L3.434 10.753Q3.397 10.790 3.397 10.864L3.397 10.864L3.397 11.456Q3.397 12.603 3.731 13.972L3.731 13.972L3.767 14.046Q3.767 14.120 3.841 14.120L3.841 14.120L6.283 14.120L6.283 8.681ZM9.872 10.272L9.872 10.272Q9.910 10.272 9.947 10.272L9.947 10.272L9.872 10.272L12.537 10.272Q12.980 10.272 13.239 10.161L13.239 10.161L13.351 10.087Q13.498 9.976 13.573 9.809Q13.646 9.643 13.628 9.402Q13.610 9.162 13.462 9.014L13.462 9.014Q13.091 8.681 12.648 8.681L12.648 8.681L9.762 8.681Q9.872 9.236 9.872 10.272ZM2.917 9.125L2.917 9.125Q2.917 9.384 3.138 9.606Q3.360 9.828 3.619 9.828Q3.878 9.828 4.100 9.606Q4.322 9.384 4.322 9.125Q4.322 8.866 4.100 8.644Q3.878 8.422 3.619 8.422Q3.360 8.422 3.138 8.644Q2.917 8.866 2.917 9.125ZM17.605 18.856L17.605 18.856Q17.605 18.597 17.402 18.375Q17.198 18.153 16.921 18.153Q16.643 18.153 16.440 18.375Q16.236 18.597 16.236 18.856Q16.236 19.115 16.440 19.318Q16.643 19.522 16.921 19.522Q17.198 19.522 17.402 19.337Q17.605 19.152 17.605 18.856ZM6.764 18.153L6.764 18.153Q6.468 18.153 6.265 18.375Q6.061 18.597 6.061 18.856Q6.061 19.115 6.265 19.318Q6.468 19.522 6.746 19.522Q7.023 19.522 7.227 19.318Q7.430 19.115 7.430 18.856Q7.430 18.597 7.227 18.375Q7.023 18.153 6.764 18.153ZM12.537 2.983L12.537 2.983Q12.537 2.724 12.352 2.520Q12.166 2.317 11.852 2.317Q11.538 2.317 11.334 2.502Q11.131 2.687 11.131 2.983Q11.131 3.279 11.316 3.482Q11.500 3.686 11.834 3.686L11.834 3.686Q12.314 3.686 12.537 2.983ZM20.047 9.939L20.047 9.939Q20.306 9.939 20.529 9.717Q20.750 9.495 20.750 9.236Q20.750 8.977 20.529 8.755Q20.306 8.533 20.047 8.533Q19.788 8.533 19.566 8.755Q19.345 8.977 19.345 9.254Q19.345 9.532 19.529 9.735Q19.715 9.939 20.047 9.939Z"/></svg>  Rust </a> </li> </ul> </div> <section id="tab-panel-15" aria-labelledby="tab-15" role="tabpanel" tabindex="0"> <p>Compiling the program with <code dir="auto">cmake --build build</code> and running with the <code dir="auto">./build/my_application</code> opens a window that shows the icon of a bus on a blue background.</p> </section><section id="tab-panel-16" aria-labelledby="tab-16" role="tabpanel" tabindex="0" hidden> <p>Running the program with <code dir="auto">npm start</code> opens a window that shows the icon of a bus on a blue background.</p> </section><section id="tab-panel-17" aria-labelledby="tab-17" role="tabpanel" tabindex="0" hidden> <p>Running the program with <code dir="auto">cargo run</code> opens a window that shows the icon of a bus on a blue background.</p> </section> <starlight-tabs-restore class="astro-lisrjliy"></starlight-tabs-restore> </starlight-tabs>  
+</script><starlight-tabs data-sync-key="dev-platform" class="astro-lisrjliy"> <div class="tablist-wrapper not-content astro-lisrjliy"> <ul role="tablist" class="astro-lisrjliy"> <li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-15" id="tab-15" aria-selected="true" tabindex="0" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M0.125 11.544L0.125 3.450L9.815 2.120L9.815 11.506L0.125 11.544ZM0.125 12.532L9.815 12.570L9.815 21.956L0.125 20.626L0.125 12.532ZM10.993 11.468L10.993 1.968L23.837 0.106L23.837 11.392L10.993 11.468ZM10.955 12.646L23.875 12.684L23.837 23.894L10.993 22.108L10.955 12.646Z"/></svg>  Windows </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-16" id="tab-16" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M14.94 5.19A4.38 4.38 0 0 0 16 2a4.44 4.44 0 0 0-3 1.52 4.17 4.17 0 0 0-1 3.09 3.69 3.69 0 0 0 2.94-1.42Zm2.52 7.44a4.51 4.51 0 0 1 2.16-3.81 4.66 4.66 0 0 0-3.66-2c-1.56-.16-3 .91-3.83.91s-2-.89-3.3-.87a4.92 4.92 0 0 0-4.14 2.53C2.93 12.45 4.24 17 6 19.47c.8 1.21 1.8 2.58 3.12 2.53s1.75-.82 3.28-.82 2 .82 3.3.79 2.22-1.24 3.06-2.45a11 11 0 0 0 1.38-2.85 4.41 4.41 0 0 1-2.68-4.04Z"/></svg>  macOS </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-17" id="tab-17" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M19.7 17.6c-.1-.2-.2-.4-.2-.6 0-.4-.2-.7-.5-1-.1-.1-.3-.2-.4-.2.6-1.8-.3-3.6-1.3-4.9-.8-1.2-2-2.1-1.9-3.7 0-1.9.2-5.4-3.3-5.1-3.6.2-2.6 3.9-2.7 5.2 0 1.1-.5 2.2-1.3 3.1-.2.2-.4.5-.5.7-1 1.2-1.5 2.8-1.5 4.3-.2.2-.4.4-.5.6-.1.1-.2.2-.2.3-.1.1-.3.2-.5.3-.4.1-.7.3-.9.7-.1.3-.2.7-.1 1.1.1.2.1.4 0 .7-.2.4-.2.9 0 1.4.3.4.8.5 1.5.6.5 0 1.1.2 1.6.4.5.3 1.1.5 1.7.5.3 0 .7-.1 1-.2.3-.2.5-.4.6-.7.4 0 1-.2 1.7-.2.6 0 1.2.2 2 .1 0 .1 0 .2.1.3.2.5.7.9 1.3 1h.2c.8-.1 1.6-.5 2.1-1.1.4-.4.9-.7 1.4-.9.6-.3 1-.5 1.1-1 .1-.7-.1-1.1-.5-1.7zM12.8 4.8c.6.1 1.1.6 1 1.2 0 .3-.1.6-.3.9h-.1c-.2-.1-.3-.1-.4-.2.1-.1.1-.3.2-.5 0-.4-.2-.7-.4-.7-.3 0-.5.3-.5.7v.1c-.1-.1-.3-.1-.4-.2V6c-.1-.5.3-1.1.9-1.2zm-.3 2c.1.1.3.2.4.2.1 0 .3.1.4.2.2.1.4.2.4.5s-.3.6-.9.8c-.2.1-.3.1-.4.2-.3.2-.6.3-1 .3-.3 0-.6-.2-.8-.4-.1-.1-.2-.2-.4-.3-.1-.1-.3-.3-.4-.6 0-.1.1-.2.2-.3.3-.2.4-.3.5-.4l.1-.1c.2-.3.6-.5 1-.5.3.1.6.2.9.4zM10.4 5c.4 0 .7.4.8 1.1v.2c-.1 0-.3.1-.4.2v-.2c0-.3-.2-.6-.4-.5-.2 0-.3.3-.3.6 0 .2.1.3.2.4 0 0-.1.1-.2.1-.2-.2-.4-.5-.4-.8 0-.6.3-1.1.7-1.1zm-1 16.1c-.7.3-1.6.2-2.2-.2-.6-.3-1.1-.4-1.8-.4-.5-.1-1-.1-1.1-.3-.1-.2-.1-.5.1-1 .1-.3.1-.6 0-.9-.1-.3-.1-.5 0-.8.1-.3.3-.4.6-.5.3-.1.5-.2.7-.4.1-.1.2-.2.3-.4.3-.4.5-.6.8-.6.6.1 1.1 1 1.5 1.9.2.3.4.7.7 1 .4.5.9 1.2.9 1.6 0 .5-.2.8-.5 1zm4.9-2.2c0 .1 0 .1-.1.2-1.2.9-2.8 1-4.1.3l-.6-.9c.9-.1.7-1.3-1.2-2.5-2-1.3-.6-3.7.1-4.8.1-.1.1 0-.3.8-.3.6-.9 2.1-.1 3.2 0-.8.2-1.6.5-2.4.7-1.3 1.2-2.8 1.5-4.3.1.1.1.1.2.1.1.1.2.2.3.2.2.3.6.4.9.4h.1c.4 0 .8-.1 1.1-.4.1-.1.2-.2.4-.2.3-.1.6-.3.9-.6.4 1.3.8 2.5 1.4 3.6.4.8.7 1.6.9 2.5.3 0 .7.1 1 .3.8.4 1.1.7 1 1.2H18c0-.3-.2-.6-.9-.9-.7-.3-1.3-.3-1.5.4-.1 0-.2.1-.3.1-.8.4-.8 1.5-.9 2.6.1.4 0 .7-.1 1.1zm4.6.6c-.6.2-1.1.6-1.5 1.1-.4.6-1.1 1-1.9.9-.4 0-.8-.3-.9-.7-.1-.6-.1-1.2.2-1.8.1-.4.2-.7.3-1.1.1-1.2.1-1.9.6-2.2 0 .5.3.8.7 1 .5 0 1-.1 1.4-.5h.2c.3 0 .5 0 .7.2.2.2.3.5.3.7 0 .3.2.6.3.9.5.5.5.8.5.9-.1.2-.5.4-.9.6zm-9-12c-.1 0-.1 0-.1.1 0 0 0 .1.1.1s.1.1.1.1c.3.4.8.6 1.4.7.5-.1 1-.2 1.5-.6l.6-.3c.1 0 .1-.1.1-.1 0-.1 0-.1-.1-.1-.2.1-.5.2-.7.3-.4.3-.9.5-1.4.5-.5 0-.9-.3-1.2-.6-.1 0-.2-.1-.3-.1z"/></svg>  Linux </a> </li> </ul> </div> <section id="tab-panel-15" aria-labelledby="tab-15" role="tabpanel"> <p>If you are on Windows, use the following commands:</p><div class="expressive-code"><link rel="stylesheet" href="/tng/_astro/ec.fq3m0.css"><script type="module" src="/tng/_astro/ec.8zarh.js"></script><figure class="frame is-terminal has-title not-content"><figcaption class="header"><span class="title">PowerShell</span></figcaption><pre data-language="powershell"><code><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">cd ui</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">powershell curl </span><span style="--0:#D4D4D4;--1:#000000">-</span><span style="--0:#CCCCCC;--1:#3B3B3B">Uri https:</span><span style="--0:#D4D4D4;--1:#000000">//</span><span style="--0:#CCCCCC;--1:#3B3B3B">slint.dev</span><span style="--0:#D4D4D4;--1:#000000">/</span><span style="--0:#CCCCCC;--1:#3B3B3B">blog</span><span style="--0:#D4D4D4;--1:#000000">/</span><span style="--0:#CCCCCC;--1:#3B3B3B">memory</span><span style="--0:#D4D4D4;--1:#000000">-</span><span style="--0:#CCCCCC;--1:#3B3B3B">game</span><span style="--0:#D4D4D4;--1:#000000">-</span><span style="--0:#CCCCCC;--1:#3B3B3B">tutorial</span><span style="--0:#D4D4D4;--1:#000000">/</span><span style="--0:#CCCCCC;--1:#3B3B3B">icons.zip </span><span style="--0:#D4D4D4;--1:#000000">-</span><span style="--0:#CCCCCC;--1:#3B3B3B">Outfile icons.zip</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">powershell </span><span style="--0:#DCDCAA;--1:#795E26">Expand-Archive</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#D4D4D4;--1:#000000">-</span><span style="--0:#CCCCCC;--1:#3B3B3B">Path icons.zip </span><span style="--0:#D4D4D4;--1:#000000">-</span><span style="--0:#CCCCCC;--1:#3B3B3B">DestinationPath .</span></div></div><div class="ec-line"><div class="code"><span style="--0:#CCCCCC;--1:#3B3B3B">cd ..</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="cd uipowershell curl -Uri https://slint.dev/blog/memory-game-tutorial/icons.zip -Outfile icons.zippowershell Expand-Archive -Path icons.zip -DestinationPath .cd .."><div></div></button></div></figure></div><p>This unpacks an <code dir="auto">icons</code> directory containing several icons.</p> </section><section id="tab-panel-16" aria-labelledby="tab-16" role="tabpanel" hidden> <div class="expressive-code"><figure class="frame is-terminal has-title not-content"><figcaption class="header"><span class="title">Terminal</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cd</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">ui</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">curl</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">-O</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">https://slint.dev/blog/memory-game-tutorial/icons.zip</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">unzip</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">icons.zip</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cd</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">..</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="cd uicurl -O https://slint.dev/blog/memory-game-tutorial/icons.zipunzip icons.zipcd .."><div></div></button></div></figure></div><p>This unpacks an <code dir="auto">icons</code> directory containing several icons.</p> </section><section id="tab-panel-17" aria-labelledby="tab-17" role="tabpanel" hidden> <div class="expressive-code"><figure class="frame is-terminal has-title not-content"><figcaption class="header"><span class="title">Bash</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cd</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">ui</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">curl</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#569CD6;--1:#0000FF">-O</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">https://slint.dev/blog/memory-game-tutorial/icons.zip</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">unzip</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">icons.zip</span></div></div><div class="ec-line"><div class="code"><span style="--0:#DCDCAA;--1:#795E26">cd</span><span style="--0:#CCCCCC;--1:#3B3B3B"> </span><span style="--0:#CE9178;--1:#A31515">..</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="cd uicurl -O https://slint.dev/blog/memory-game-tutorial/icons.zipunzip icons.zipcd .."><div></div></button></div></figure></div><p>This unpacks an <code dir="auto">icons</code> directory containing several icons.</p> </section> <starlight-tabs-restore class="astro-lisrjliy"></starlight-tabs-restore> </starlight-tabs>  
+<starlight-tabs data-sync-key="dev-language" class="astro-lisrjliy"> <div class="tablist-wrapper not-content astro-lisrjliy"> <ul role="tablist" class="astro-lisrjliy"> <li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-18" id="tab-18" aria-selected="true" tabindex="0" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M0.024 11.935L0.024 11.935Q0.024 9.398 0.841 7.377Q1.659 5.356 2.970 4.045Q4.282 2.733 6.216 1.873L6.216 1.873Q7.722 1.185 10.130 1.185L10.130 1.185Q12.151 1.185 13.763 2.002Q15.376 2.819 16.451 3.894L16.451 3.894L13.484 7.248L13.140 6.990Q12.409 6.431 12.021 6.302L12.021 6.302L11.549 6.173Q10.689 5.915 10.130 5.915L10.130 5.915Q9.184 5.915 8.367 6.302L8.367 6.302Q7.463 6.775 6.905 7.528Q6.346 8.280 5.959 9.441Q5.572 10.602 5.572 11.935L5.572 11.935Q5.572 15.031 6.905 16.364L6.905 16.364Q7.593 17.224 8.453 17.611Q9.313 17.998 10.387 17.998Q11.463 17.998 12.280 17.611L12.280 17.611Q13.183 17.138 13.742 16.364L13.742 16.364L16.709 19.761Q15.462 21.180 13.742 22.041L13.742 22.041Q12.151 22.814 10.130 22.814L10.130 22.814Q8.238 22.814 6.216 22.169L6.216 22.169Q4.411 21.567 2.992 20.148L2.992 20.148Q2.389 19.503 1.831 18.471L1.831 18.471Q1.530 17.869 0.970 16.537L0.970 16.537Q0.024 14.644 0.024 11.935ZM13.355 10.731L13.355 8.452L11.463 8.452L11.463 10.731L9.313 10.731L9.313 12.623L11.463 12.623L11.463 15.031L13.355 15.031L13.355 12.623L15.505 12.623L15.505 10.731L13.355 10.731ZM23.976 10.602L21.396 10.602L21.396 7.936L19.117 7.936L19.117 10.602L16.580 10.602L16.580 12.881L19.117 12.881L19.117 15.720L21.396 15.720L21.396 12.881L23.976 12.881L23.976 10.602Z"/></svg>  C++ </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-19" id="tab-19" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5.376 14.300L5.376 3.352L9.286 3.352L9.286 14.300Q9.286 17.842 7.630 19.452L7.630 19.452Q6.112 20.924 3.076 20.924L3.076 20.924Q2.386 20.924 1.558 20.809Q0.730 20.694 0.224 20.464L0.224 20.464L0.638 17.336Q1.512 17.750 2.662 17.750L2.662 17.750Q3.950 17.750 4.594 17.060L4.594 17.060Q5.376 16.232 5.376 14.300L5.376 14.300ZM11.862 19.912L12.736 16.600Q13.564 17.060 14.668 17.382L14.668 17.382Q15.910 17.750 17.014 17.750L17.014 17.750Q18.394 17.750 19.084 17.267Q19.774 16.784 19.774 15.910Q19.774 15.036 19.130 14.507Q18.486 13.978 16.876 13.426L16.876 13.426Q12.138 11.770 12.138 8.274L12.138 8.274Q12.138 5.974 13.909 4.525Q15.680 3.076 18.762 3.076L18.762 3.076Q21.200 3.076 23.224 3.950L23.224 3.950L22.350 7.124L22.074 6.986Q21.246 6.664 20.740 6.526L20.740 6.526Q19.774 6.250 18.762 6.250L18.762 6.250Q17.520 6.250 16.853 6.733Q16.186 7.216 16.186 7.998Q16.186 8.780 16.922 9.286L16.922 9.286Q17.474 9.700 19.314 10.436L19.314 10.436Q21.614 11.310 22.695 12.552Q23.776 13.794 23.776 15.588L23.776 15.588Q23.776 17.888 22.028 19.314L22.028 19.314Q20.142 20.924 16.738 20.924L16.738 20.924Q15.404 20.924 13.932 20.556L13.932 20.556Q12.782 20.326 11.862 19.912L11.862 19.912Z"/></svg>  NodeJS </a> </li><li role="presentation" class="tab astro-lisrjliy"> <a role="tab" href="#tab-panel-20" id="tab-20" aria-selected="false" tabindex="-1" class="astro-lisrjliy"> <svg aria-hidden="true" class="astro-lisrjliy astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M18.419 2.539L18.419 2.983L18.419 3.686L18.530 3.797L18.642 3.797Q18.826 3.760 19.178 3.704Q19.529 3.649 19.696 3.575Q19.863 3.501 19.992 3.630Q20.122 3.760 20.047 3.926Q19.973 4.093 19.918 4.444Q19.863 4.796 19.825 4.981L19.825 4.981L19.825 5.092L19.936 5.203Q19.936 5.314 20.159 5.314L20.159 5.314L21.194 5.314Q21.564 5.314 21.527 5.647L21.527 5.647L21.527 5.906Q21.453 6.128 21.232 6.572L21.232 6.572L21.084 6.831L21.084 6.942L21.157 7.016Q21.194 7.090 21.194 7.164L21.194 7.164L21.305 7.164Q21.491 7.238 21.842 7.293Q22.194 7.349 22.360 7.367Q22.526 7.386 22.601 7.589Q22.674 7.793 22.601 7.978L22.601 7.978L22.305 8.385Q22.082 8.644 22.008 8.792L22.008 8.792L22.008 9.014Q22.008 9.088 22.119 9.162L22.119 9.162L22.230 9.236L23.155 9.606Q23.340 9.680 23.396 9.846Q23.451 10.013 23.267 10.161L23.267 10.161Q22.822 10.642 22.489 10.864L22.489 10.864L22.489 11.197L22.526 11.271Q22.637 11.308 22.712 11.308L22.712 11.308L22.970 11.493Q23.303 11.715 23.488 11.789Q23.674 11.863 23.674 12.066Q23.674 12.270 23.526 12.381L23.526 12.381L22.601 12.936L22.601 13.047Q22.601 13.232 22.601 13.269Q22.601 13.306 22.712 13.417L22.712 13.417Q23.155 13.861 23.415 13.972L23.415 13.972Q23.563 14.157 23.507 14.305Q23.451 14.453 23.267 14.564L23.267 14.564Q22.601 14.786 22.341 14.897L22.341 14.897L22.305 14.934Q22.230 14.971 22.194 15.045Q22.156 15.119 22.230 15.267L22.230 15.267L22.230 15.378Q22.415 15.526 22.637 15.933L22.637 15.933L22.822 16.192Q22.896 16.266 22.878 16.414Q22.860 16.562 22.712 16.636L22.712 16.636L22.601 16.673L22.453 16.747Q22.305 16.747 22.008 16.821Q21.712 16.895 21.564 16.895L21.564 16.895L21.416 16.895Q21.416 16.932 21.361 16.987Q21.305 17.043 21.305 17.117L21.305 17.117L21.343 17.228L21.416 17.339L21.787 18.153Q21.860 18.227 21.805 18.375Q21.749 18.523 21.675 18.597L21.675 18.597L20.270 18.597Q20.159 18.745 20.159 18.967L20.159 18.967Q20.232 19.115 20.288 19.411Q20.343 19.707 20.418 19.873Q20.491 20.040 20.343 20.188Q20.195 20.336 19.936 20.336L19.936 20.336Q19.752 20.299 19.400 20.243Q19.049 20.188 18.901 20.114L18.901 20.114L18.790 20.114L18.604 20.299Q18.567 20.336 18.642 20.336L18.642 20.336L18.642 21.372Q18.642 21.742 18.308 21.742L18.308 21.742L18.087 21.742Q17.605 21.594 17.162 21.261L17.162 21.261L17.050 21.261Q16.939 21.261 16.866 21.335Q16.791 21.409 16.791 21.520L16.791 21.520Q16.791 21.668 16.736 21.964Q16.680 22.260 16.680 22.426Q16.680 22.593 16.477 22.667Q16.273 22.741 16.125 22.667L16.125 22.667Q15.756 22.297 15.311 22.075L15.311 22.075L15.200 22.075Q15.090 22.075 15.015 22.149Q14.942 22.223 14.942 22.297L14.942 22.297L14.608 23.222Q14.497 23.481 14.276 23.481L14.276 23.481Q14.201 23.481 14.165 23.407L14.165 23.407L14.128 23.370Q13.683 22.889 13.462 22.556L13.462 22.556L13.203 22.556Q13.128 22.556 13.055 22.630Q12.980 22.704 12.980 22.778L12.980 22.778L12.537 23.592Q12.425 23.740 12.222 23.740Q12.018 23.740 11.945 23.592L11.945 23.592L11.352 22.667L11.020 22.667L10.206 23.481Q10.095 23.592 9.762 23.592L9.762 23.592Q9.651 23.592 9.651 23.370L9.651 23.370L9.280 22.260Q9.243 22.186 9.169 22.186L9.169 22.186L8.837 22.186Q8.651 22.371 8.281 22.593L8.281 22.593L8.023 22.778L7.800 22.667Q7.467 22.519 7.338 22.426Q7.208 22.334 7.208 22.186L7.208 22.186Q7.097 21.853 7.097 21.150L7.097 21.150L7.060 21.113Q7.060 21.039 6.986 21.039Q6.912 21.039 6.857 20.983Q6.801 20.928 6.764 20.928L6.764 20.928L6.616 20.928L6.505 21.039L5.691 21.372Q5.543 21.483 5.395 21.409Q5.247 21.335 5.247 21.150L5.247 21.150L5.247 19.892L5.136 19.781L5.026 19.781Q4.840 19.818 4.489 19.873Q4.138 19.929 3.971 20.003Q3.804 20.077 3.675 19.947Q3.545 19.818 3.619 19.651Q3.693 19.485 3.749 19.133Q3.804 18.782 3.841 18.597L3.841 18.597L3.841 18.486L3.731 18.375L2.583 18.375Q2.250 18.375 2.250 18.042L2.250 18.042L2.250 17.783Q2.324 17.561 2.583 17.117L2.583 17.117L2.694 16.858L2.694 16.710Q2.657 16.636 2.583 16.636L2.583 16.636Q2.583 16.562 2.510 16.562L2.510 16.562L2.472 16.525Q2.287 16.525 1.936 16.469Q1.584 16.414 1.418 16.414Q1.251 16.414 1.177 16.210Q1.103 16.007 1.214 15.822L1.214 15.822Q1.548 15.489 1.769 15.008L1.769 15.008L1.769 14.786L1.584 14.638Q1.510 14.564 1.436 14.564L1.436 14.564L0.622 14.231Q0.437 14.120 0.382 13.953Q0.326 13.787 0.511 13.639L0.511 13.639Q0.696 13.565 1.066 13.269L1.066 13.269Q1.288 13.047 1.436 12.936L1.436 12.936L1.436 12.714Q1.436 12.492 1.325 12.492L1.325 12.492L0.511 12.011Q0.326 11.937 0.326 11.733Q0.326 11.530 0.511 11.456L0.511 11.456L1.436 10.864L1.436 10.642L0.622 9.828Q0.548 9.754 0.548 9.606Q0.548 9.458 0.622 9.347L0.622 9.347L0.659 9.347Q0.733 9.310 0.733 9.236L0.733 9.236L1.769 8.903L1.769 8.792Q1.843 8.718 1.806 8.533L1.806 8.533L1.769 8.422Q1.658 8.311 1.492 8.089Q1.325 7.867 1.214 7.719Q1.103 7.571 1.177 7.367Q1.251 7.164 1.418 7.127Q1.584 7.090 1.936 7.034Q2.287 6.979 2.472 6.942L2.472 6.942L2.583 6.942Q2.583 6.868 2.639 6.812Q2.694 6.757 2.694 6.683L2.694 6.683L2.694 6.572L2.583 6.461L2.250 5.647Q2.139 5.499 2.213 5.351Q2.287 5.203 2.472 5.203L2.472 5.203L3.731 5.203L3.767 5.129Q3.767 5.092 3.841 5.092L3.841 5.092L3.841 4.981Q3.619 4.278 3.619 3.945L3.619 3.945Q3.545 3.760 3.675 3.630Q3.804 3.501 3.989 3.575L3.989 3.575Q4.322 3.575 5.026 3.797L5.026 3.797L5.136 3.797L5.284 3.649Q5.321 3.575 5.247 3.575L5.247 3.575L5.247 2.539Q5.247 2.206 5.580 2.206L5.580 2.206L5.840 2.206Q6.061 2.280 6.505 2.539L6.505 2.539L6.764 2.650L6.912 2.650Q6.986 2.613 6.986 2.539L6.986 2.539Q7.060 2.539 7.060 2.465L7.060 2.465L7.097 2.428Q7.097 2.243 7.153 1.891Q7.208 1.540 7.208 1.373Q7.208 1.207 7.412 1.133Q7.615 1.059 7.800 1.133L7.800 1.133Q8.133 1.503 8.614 1.725L8.614 1.725L8.837 1.725L8.947 1.614L8.947 1.540Q8.985 1.466 9.058 1.392L9.058 1.392L9.392 0.578Q9.503 0.430 9.576 0.393Q9.651 0.356 9.872 0.356L9.872 0.356L9.983 0.467Q10.058 0.652 10.354 1.022L10.354 1.022Q10.576 1.244 10.686 1.392L10.686 1.392L10.797 1.392Q10.872 1.392 10.945 1.318L10.945 1.318L11.020 1.281L11.500 0.467Q11.648 0.282 11.815 0.263Q11.982 0.245 12.055 0.356L12.055 0.356L12.166 0.467L12.759 1.392L13.091 1.392Q13.166 1.392 13.203 1.318L13.203 1.318L13.239 1.281Q13.683 0.800 13.794 0.578L13.794 0.578Q13.869 0.504 14.017 0.504Q14.165 0.504 14.276 0.578L14.276 0.578L14.276 0.689Q14.497 1.392 14.608 1.614L14.608 1.614L14.720 1.725L14.942 1.725Q15.459 1.540 15.866 1.133L15.866 1.133Q16.052 1.059 16.255 1.133Q16.459 1.207 16.459 1.373Q16.459 1.540 16.514 1.891Q16.569 2.243 16.569 2.428L16.569 2.428L16.607 2.465Q16.607 2.539 16.680 2.539L16.680 2.539L16.791 2.539Q16.902 2.613 16.976 2.613Q17.050 2.613 17.050 2.539L17.050 2.539Q17.273 2.428 17.976 2.206L17.976 2.206Q18.160 2.095 18.290 2.187Q18.419 2.280 18.419 2.539L18.419 2.539ZM5.580 6.128L5.580 6.128L14.386 6.128Q15.090 6.128 15.422 6.239L15.422 6.239Q16.532 6.609 17.050 7.275L17.050 7.275Q17.605 7.867 17.605 8.681L17.605 8.681Q17.605 9.347 17.273 10.050L17.273 10.050Q16.902 10.605 16.348 10.975L16.348 10.975Q16.125 11.197 15.977 11.197L15.977 11.197Q16.052 11.271 16.163 11.326Q16.273 11.382 16.348 11.456L16.348 11.456L16.532 11.604Q16.939 11.974 17.050 12.233L17.050 12.233Q17.383 12.788 17.383 13.417L17.383 13.417Q17.383 13.528 17.605 13.750L17.605 13.750Q17.753 13.898 18.049 13.972L18.049 13.972Q18.197 13.972 18.549 13.972Q18.901 13.972 19.122 13.750L19.122 13.750Q19.270 13.602 19.381 13.306L19.381 13.306L19.456 13.047L19.456 12.492Q19.456 12.381 19.474 12.381Q19.492 12.381 19.566 12.381L19.566 12.381L20.380 12.381L20.380 10.864Q20.232 10.790 19.881 10.623Q19.529 10.457 19.345 10.383L19.345 10.383Q19.308 10.346 19.122 10.290Q18.938 10.235 18.901 10.161L18.901 10.161Q18.346 9.976 18.530 9.236L18.530 9.236Q19.011 8.089 19.345 7.497L19.345 7.497L19.345 7.386Q18.901 6.683 18.642 6.387L18.642 6.387Q18.197 5.832 17.716 5.425L17.716 5.425Q16.014 3.871 13.573 3.353L13.573 3.353L13.462 3.353Q12.759 4.056 12.314 4.389L12.314 4.389Q12.130 4.574 11.834 4.574Q11.538 4.574 11.352 4.389L11.352 4.389L10.317 3.353L10.206 3.353Q9.762 3.464 9.058 3.686L9.058 3.686Q7.245 4.352 5.802 5.758L5.802 5.758Q5.580 6.017 5.580 6.128ZM18.642 16.747L18.642 16.747L15.200 16.747Q14.831 16.747 14.720 16.636L14.720 16.636Q14.128 16.340 13.905 15.489L13.905 15.489L13.869 15.267Q13.683 14.601 13.683 14.231L13.683 14.231Q13.683 13.972 13.480 13.528Q13.276 13.084 12.944 12.843Q12.610 12.603 12.166 12.603L12.166 12.603L10.095 12.603L10.095 14.083L12.166 14.083Q12.277 14.083 12.296 14.101Q12.314 14.120 12.314 14.231L12.314 14.231L12.314 16.525Q12.314 16.599 12.296 16.617Q12.277 16.636 12.166 16.636L12.166 16.636L5.247 16.636Q5.469 17.006 5.950 17.450L5.950 17.450L6.061 17.450Q6.986 17.228 7.430 17.228L7.430 17.228Q7.689 17.154 7.930 17.283Q8.171 17.413 8.244 17.672L8.244 17.672L8.614 19.189L8.614 19.300Q9.540 19.670 9.983 19.781L9.983 19.781Q10.761 20.003 11.352 20.003L11.352 20.003Q11.907 20.077 12.573 20.040L12.573 20.040Q12.980 20.003 13.794 19.892L13.794 19.892Q14.386 19.781 15.534 19.300L15.534 19.300L15.534 19.189L15.866 17.672Q16.088 17.080 16.680 17.228L16.680 17.228L18.087 17.561L18.197 17.561Q18.197 17.228 18.642 16.747ZM6.283 8.681L4.914 8.681L5.247 9.347L5.284 9.458Q5.321 9.643 5.247 9.717L5.247 9.717Q5.247 9.902 4.988 10.087L4.988 10.087L4.914 10.161Q3.989 10.642 3.508 10.753L3.508 10.753L3.434 10.753Q3.397 10.790 3.397 10.864L3.397 10.864L3.397 11.456Q3.397 12.603 3.731 13.972L3.731 13.972L3.767 14.046Q3.767 14.120 3.841 14.120L3.841 14.120L6.283 14.120L6.283 8.681ZM9.872 10.272L9.872 10.272Q9.910 10.272 9.947 10.272L9.947 10.272L9.872 10.272L12.537 10.272Q12.980 10.272 13.239 10.161L13.239 10.161L13.351 10.087Q13.498 9.976 13.573 9.809Q13.646 9.643 13.628 9.402Q13.610 9.162 13.462 9.014L13.462 9.014Q13.091 8.681 12.648 8.681L12.648 8.681L9.762 8.681Q9.872 9.236 9.872 10.272ZM2.917 9.125L2.917 9.125Q2.917 9.384 3.138 9.606Q3.360 9.828 3.619 9.828Q3.878 9.828 4.100 9.606Q4.322 9.384 4.322 9.125Q4.322 8.866 4.100 8.644Q3.878 8.422 3.619 8.422Q3.360 8.422 3.138 8.644Q2.917 8.866 2.917 9.125ZM17.605 18.856L17.605 18.856Q17.605 18.597 17.402 18.375Q17.198 18.153 16.921 18.153Q16.643 18.153 16.440 18.375Q16.236 18.597 16.236 18.856Q16.236 19.115 16.440 19.318Q16.643 19.522 16.921 19.522Q17.198 19.522 17.402 19.337Q17.605 19.152 17.605 18.856ZM6.764 18.153L6.764 18.153Q6.468 18.153 6.265 18.375Q6.061 18.597 6.061 18.856Q6.061 19.115 6.265 19.318Q6.468 19.522 6.746 19.522Q7.023 19.522 7.227 19.318Q7.430 19.115 7.430 18.856Q7.430 18.597 7.227 18.375Q7.023 18.153 6.764 18.153ZM12.537 2.983L12.537 2.983Q12.537 2.724 12.352 2.520Q12.166 2.317 11.852 2.317Q11.538 2.317 11.334 2.502Q11.131 2.687 11.131 2.983Q11.131 3.279 11.316 3.482Q11.500 3.686 11.834 3.686L11.834 3.686Q12.314 3.686 12.537 2.983ZM20.047 9.939L20.047 9.939Q20.306 9.939 20.529 9.717Q20.750 9.495 20.750 9.236Q20.750 8.977 20.529 8.755Q20.306 8.533 20.047 8.533Q19.788 8.533 19.566 8.755Q19.345 8.977 19.345 9.254Q19.345 9.532 19.529 9.735Q19.715 9.939 20.047 9.939Z"/></svg>  Rust </a> </li> </ul> </div> <section id="tab-panel-18" aria-labelledby="tab-18" role="tabpanel" tabindex="0"> <p>Compiling the program with <code dir="auto">cmake --build build</code> and running with the <code dir="auto">./build/my_application</code> opens a window that shows the icon of a bus on a blue background.</p> </section><section id="tab-panel-19" aria-labelledby="tab-19" role="tabpanel" tabindex="0" hidden> <p>Running the program with <code dir="auto">npm start</code> opens a window that shows the icon of a bus on a blue background.</p> </section><section id="tab-panel-20" aria-labelledby="tab-20" role="tabpanel" tabindex="0" hidden> <p>Running the program with <code dir="auto">cargo run</code> opens a window that shows the icon of a bus on a blue background.</p> </section> <starlight-tabs-restore class="astro-lisrjliy"></starlight-tabs-restore> </starlight-tabs>  
 <p><img src="https://slint.dev/blog/memory-game-tutorial/memory-tile.png" alt="Screenshot of the first tile" title="Memory Tile Screenshot"></p> </div> <footer class="sl-flex astro-eifwj7ft"> <div class="meta sl-flex astro-eifwj7ft">   </div> <div class="pagination-links astro-dyqvxwuo" dir="ltr"> <a href="/tng/tutorial/getting_started" rel="prev" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg>  <span class="astro-dyqvxwuo"> Previous <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Getting Started</span> </span> </a> <a href="/tng/tutorial/polishing_the_tile" rel="next" class="astro-dyqvxwuo"> <svg aria-hidden="true" class="astro-dyqvxwuo astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg>  <span class="astro-dyqvxwuo"> Next <br class="astro-dyqvxwuo"> <span class="link-title astro-dyqvxwuo">Polishing The Tile</span> </span> </a> </div>   </footer>  </div> </div>   </main> </div> </div>  </div> </div>  </body></html>
\ No newline at end of file
diff --git a/snapshots/tng/tutorial/polishing_the_tile/index.html b/snapshots/tng/tutorial/polishing_the_tile/index.html
index dd84c350e..37dc8b213 100644
--- a/snapshots/tng/tutorial/polishing_the_tile/index.html
+++ b/snapshots/tng/tutorial/polishing_the_tile/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><script src="/tng/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/tutorial/quickstart/index.html b/snapshots/tng/tutorial/quickstart/index.html
index 453b4e741..beb2d26f9 100644
--- a/snapshots/tng/tutorial/quickstart/index.html
+++ b/snapshots/tng/tutorial/quickstart/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;
diff --git a/snapshots/tng/tutorial/running_in_a_browser/index.html b/snapshots/tng/tutorial/running_in_a_browser/index.html
index a24d51519..4fab28626 100644
--- a/snapshots/tng/tutorial/running_in_a_browser/index.html
+++ b/snapshots/tng/tutorial/running_in_a_browser/index.html
@@ -32,6 +32,7 @@
 svg:where(.astro-6uleiwf3){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em}
 starlight-tabs:where(.astro-lisrjliy){display:block}.tablist-wrapper:where(.astro-lisrjliy){overflow-x:auto}:where(.astro-lisrjliy)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-lisrjliy){margin-bottom:-2px}.tab:where(.astro-lisrjliy)>:where(.astro-lisrjliy)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-lisrjliy) :where(.astro-lisrjliy)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-lisrjliy)~[role=tabpanel]{margin-top:1rem}
 .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}}
+starlight-file-tree:where(.astro-25yaqiub){--x-space: 1.5rem;--y-space: .125rem;--y-pad: 0;display:block;border:1px solid var(--sl-color-gray-5);padding:1rem;background-color:var(--sl-color-gray-6);font-size:var(--sl-text-xs);font-family:var(--__sl-font-mono);overflow-x:auto}starlight-file-tree:where(.astro-25yaqiub) .directory>details{border:0;padding:0;padding-inline-start:var(--x-space);background:transparent}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary{margin-inline-start:calc(-1 * var(--x-space));border:0;padding:var(--y-pad) .625rem;font-weight:400;color:var(--sl-color-white);max-width:100%}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::marker,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary::-webkit-details-marker{color:var(--sl-color-gray-3)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover,starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .tree-icon{cursor:pointer;color:var(--sl-color-text-accent);fill:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover~ul{border-color:var(--sl-color-gray-4)}starlight-file-tree:where(.astro-25yaqiub) .directory>details>summary:hover .highlight .tree-icon{fill:var(--sl-color-text-invert)}starlight-file-tree:where(.astro-25yaqiub) ul{margin-inline-start:.5rem;border-inline-start:1px solid var(--sl-color-gray-5);padding:0;padding-inline-start:.125rem;list-style:none}starlight-file-tree:where(.astro-25yaqiub)>ul{margin:0;border:0;padding:0}starlight-file-tree:where(.astro-25yaqiub) li{margin:var(--y-space) 0;padding:var(--y-pad) 0}starlight-file-tree:where(.astro-25yaqiub) .file{margin-inline-start:calc(var(--x-space) - .125rem);color:var(--sl-color-white)}starlight-file-tree:where(.astro-25yaqiub) .tree-entry{display:inline-flex;align-items:flex-start;flex-wrap:wrap;max-width:calc(100% - 1rem)}@media (min-width: 30em){starlight-file-tree:where(.astro-25yaqiub) .tree-entry{flex-wrap:nowrap}}starlight-file-tree:where(.astro-25yaqiub) .tree-entry>:first-child{flex-shrink:0}starlight-file-tree:where(.astro-25yaqiub) .empty{color:var(--sl-color-gray-3);padding-inline-start:.375rem}starlight-file-tree:where(.astro-25yaqiub) .comment{color:var(--sl-color-gray-3);padding-inline-start:1.625rem;max-width:24rem;min-width:12rem}starlight-file-tree:where(.astro-25yaqiub) .highlight{display:inline-block;border-radius:.25rem;padding-inline-end:.5rem;color:var(--sl-color-text-invert);background-color:var(--sl-color-text-accent)}starlight-file-tree:where(.astro-25yaqiub) svg{display:inline;fill:var(--sl-color-gray-3);vertical-align:middle;margin-inline:.25rem .375rem;width:.875rem;height:.875rem}starlight-file-tree:where(.astro-25yaqiub) .highlight svg.tree-icon{fill:var(--sl-color-text-invert)}
 .sl-link-button:where(.astro-vd3d6cjr){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-vd3d6cjr).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-vd3d6cjr).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-vd3d6cjr).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-vd3d6cjr) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-vd3d6cjr){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-vd3d6cjr):not(:where(p *)){margin-block:1rem}
 </style><script type="module" src="/tng/_astro/hoisted.DO7nuvb1.js"></script>
 <script type="module" src="/tng/_astro/page.7qqag-5g.js"></script><script src="/tng/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-77jcyavj"> <a href="#_top" class="astro-zsdkhnly">Skip to content</a>  <div class="page sl-flex astro-p25nhtne"> <header class="header astro-p25nhtne"><div class="header sl-flex astro-d3tpnkqt"> <div class="title-wrapper sl-flex astro-d3tpnkqt"> <a href="/tng/" class="site-title sl-flex astro-bcspq4kh">  <span class="astro-bcspq4kh"> Slint Language Docs </span> </a>  </div> <div class="sl-flex astro-d3tpnkqt"> <site-search data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" class="astro-r5fg3mjj"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-r5fg3mjj"> <svg aria-hidden="true" class="astro-r5fg3mjj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>  <span class="sl-hidden md:sl-block astro-r5fg3mjj" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-r5fg3mjj" style="display: none;"> <kbd class="astro-r5fg3mjj">Ctrl</kbd><kbd class="astro-r5fg3mjj">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-r5fg3mjj"> <div class="dialog-frame sl-flex astro-r5fg3mjj">  <button data-close-modal class="sl-flex md:sl-hidden astro-r5fg3mjj"> Cancel </button> <div class="search-container astro-r5fg3mjj"> <div id="starlight__search" class="astro-r5fg3mjj"></div> </div> </div> </dialog> </site-search>  <script>
@@ -48,7 +49,7 @@
 	})();
 </script>    </div> <div class="sl-hidden md:sl-flex right-group astro-d3tpnkqt"> <div class="sl-flex social-icons astro-d3tpnkqt"> <a href="https://github.com/slint-ui/slint" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">GitHub</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"/></svg> </a><a href="https://x.com/slint_ui" rel="me" class="sl-flex astro-t6vzpkfa"><span class="sr-only astro-t6vzpkfa">X</span><svg aria-hidden="true" class="astro-t6vzpkfa astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M 18.242188 2.25 L 21.554688 2.25 L 14.324219 10.507812 L 22.828125 21.75 L 16.171875 21.75 L 10.953125 14.933594 L 4.992188 21.75 L 1.679688 21.75 L 9.40625 12.914062 L 1.257812 2.25 L 8.082031 2.25 L 12.792969 8.480469 Z M 17.082031 19.773438 L 18.914062 19.773438 L 7.082031 4.125 L 5.113281 4.125 Z M 17.082031 19.773438 "/></svg> </a> </div> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-f7om4qbc"> <span class="sr-only astro-f7om4qbc">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg>  <select value="auto" class="astro-f7om4qbc"> <option value="dark" class="astro-f7om4qbc">Dark</option><option value="light" class="astro-f7om4qbc">Light</option><option value="auto" selected class="astro-f7om4qbc">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-f7om4qbc astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </label>  </starlight-theme-select>  <script>
 	StarlightThemeProvider.updatePickers();
-</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="018r985" class="astro-kfcivcey"> <script>
+</script>   </div> </div> </header> <nav class="sidebar astro-p25nhtne" aria-label="Main"> <starlight-menu-button class="astro-pgmabcwj"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-pgmabcwj"> <svg aria-hidden="true" class="astro-pgmabcwj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg>  </button> </starlight-menu-button>    <div id="starlight__sidebar" class="sidebar-pane astro-p25nhtne"> <div class="sidebar-content sl-flex astro-p25nhtne"> <sl-sidebar-state-persist data-hash="0qfrqb2" class="astro-kfcivcey"> <script>
 		(() => {
 			try {
 				if (!matchMedia('(min-width: 50em)').matches) return;
@@ -71,7 +72,7 @@
 				);
 			} catch {}
 		})();
-	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/philosophy" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
+	</script>  <ul class="top-level astro-mphvganj"> <li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Getting started</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/getting-started/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Welcome</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/getting-started/which_language" class="astro-mphvganj"> <span class="astro-mphvganj">Which language?</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Guide</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/guide/intro" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/basics" class="astro-mphvganj"> <span class="astro-mphvganj">Basics</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/guide/types" class="astro-mphvganj"> <span class="astro-mphvganj">Types</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details open class="astro-mphvganj"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Tutorial</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/tutorial/quickstart" class="astro-mphvganj"> <span class="astro-mphvganj">Introduction</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/getting_started" class="astro-mphvganj"> <span class="astro-mphvganj">Getting Started</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/memory_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Memory Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/polishing_the_tile" class="astro-mphvganj"> <span class="astro-mphvganj">Polishing The Tile</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/from_one_to_multiple_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">From One To Multiple Tiles</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/creating_the_tiles" class="astro-mphvganj"> <span class="astro-mphvganj">Creating The Tiles From Code</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/game_logic" class="astro-mphvganj"> <span class="astro-mphvganj">Game Logic</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/running_in_a_browser" aria-current="page" class="astro-mphvganj"> <span class="astro-mphvganj">Running In A Browser</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/ideas_for_the_reader" class="astro-mphvganj"> <span class="astro-mphvganj">Ideas For The Reader</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/tutorial/conclusion" class="astro-mphvganj"> <span class="astro-mphvganj">Conclusion</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Elements</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="/tng/elements/dialog/" class="astro-mphvganj"> <span class="astro-mphvganj">Dialog</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/flickable/" class="astro-mphvganj"> <span class="astro-mphvganj">Flickable</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/focusscope/" class="astro-mphvganj"> <span class="astro-mphvganj">FocusScope</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/gridlayout/" class="astro-mphvganj"> <span class="astro-mphvganj">GridLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/horizontallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">HorizontalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/image/" class="astro-mphvganj"> <span class="astro-mphvganj">Image</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/path/" class="astro-mphvganj"> <span class="astro-mphvganj">Path</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/popupwindow/" class="astro-mphvganj"> <span class="astro-mphvganj">PopupWindow</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/rectangle/" class="astro-mphvganj"> <span class="astro-mphvganj">Rectangle</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/swipegestrurehandler/" class="astro-mphvganj"> <span class="astro-mphvganj">SwipeGestureHandler</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/text/" class="astro-mphvganj"> <span class="astro-mphvganj">Text</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/textinput/" class="astro-mphvganj"> <span class="astro-mphvganj">TextInput</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/timer/" class="astro-mphvganj"> <span class="astro-mphvganj">Timer</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/toucharea/" class="astro-mphvganj"> <span class="astro-mphvganj">TouchArea</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/verticallayout/" class="astro-mphvganj"> <span class="astro-mphvganj">VerticalLayout</span>  </a> </li><li class="astro-mphvganj"> <a href="/tng/elements/window/" class="astro-mphvganj"> <span class="astro-mphvganj">Window</span>  </a> </li> </ul>  </details> </li><li class="astro-mphvganj"> <details class="astro-mphvganj"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-mphvganj"> <div class="group-label astro-mphvganj"> <span class="large astro-mphvganj">Native API</span>  </div> <svg aria-hidden="true" class="caret astro-mphvganj astro-6uleiwf3" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>  </summary> <ul class="astro-mphvganj"> <li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/cpp/" class="astro-mphvganj"> <span class="astro-mphvganj">C++</span>  </a> </li><li class="astro-mphvganj"> <a href="https://pypi.org/project/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Python</span> <span class="sl-badge caution small  astro-mphvganj astro-jentkhzs">beta</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/rust/slint/" class="astro-mphvganj"> <span class="astro-mphvganj">Rust</span>  </a> </li><li class="astro-mphvganj"> <a href="https://docs.slint.dev/latest/docs/node/" class="astro-mphvganj"> <span class="astro-mphvganj">TypeScript</span>  </a> </li> </ul>  </details> </li> </ul>   <script>
 		(() => {
 			const scroller = document.getElementById('starlight__sidebar');
 			if (!window._starlightScrollRestore || !scroller) return;