[{"data":1,"prerenderedAt":1102},["ShallowReactive",2],{"navigation_docs":3,"-guide-scrolling":223,"-guide-scrolling-surround":1097},[4,26,96,105,202],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":25},"Getting started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20],{"title":11,"path":12,"stem":13,"icon":14},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F1.installation","i-lucide-download",{"title":16,"path":17,"stem":18,"icon":19},"The first app","\u002Fgetting-started\u002Ffirst-app","1.getting-started\u002F2.first-app","i-lucide-play",{"title":21,"path":22,"stem":23,"icon":24},"The first test","\u002Fgetting-started\u002Ffirst-test","1.getting-started\u002F3.first-test","i-lucide-flask-conical",false,{"title":27,"icon":28,"path":29,"stem":30,"children":31,"page":25},"Guide","i-lucide-book-open","\u002Fguide","2.guide",[32,37,42,47,52,57,62,67,72,77,81,86,91],{"title":33,"path":34,"stem":35,"icon":36},"Components","\u002Fguide\u002Fcomponents","2.guide\u002F01.components","i-lucide-component",{"title":38,"path":39,"stem":40,"icon":41},"Inputs and forms","\u002Fguide\u002Finputs-and-forms","2.guide\u002F02.inputs-and-forms","i-lucide-text-cursor-input",{"title":43,"path":44,"stem":45,"icon":46},"Scrolling and viewports","\u002Fguide\u002Fscrolling","2.guide\u002F03.scrolling","i-lucide-scroll-text",{"title":48,"path":49,"stem":50,"icon":51},"Overlays and layers","\u002Fguide\u002Foverlays","2.guide\u002F04.overlays","i-lucide-layers",{"title":53,"path":54,"stem":55,"icon":56},"Styles and theme","\u002Fguide\u002Fstyles","2.guide\u002F05.styles","i-lucide-palette",{"title":58,"path":59,"stem":60,"icon":61},"Composables","\u002Fguide\u002Fcomposables","2.guide\u002F06.composables","i-lucide-puzzle",{"title":63,"path":64,"stem":65,"icon":66},"Widgets","\u002Fguide\u002Fwidgets","2.guide\u002F07.widgets","i-lucide-blocks",{"title":68,"path":69,"stem":70,"icon":71},"The assistant","\u002Fguide\u002Fassistant","2.guide\u002F08.assistant","i-lucide-message-square",{"title":73,"path":74,"stem":75,"icon":76},"The same app on the web","\u002Fguide\u002Fweb","2.guide\u002F09.web","i-lucide-globe",{"title":78,"path":79,"stem":80,"icon":24},"Testing","\u002Fguide\u002Ftesting","2.guide\u002F10.testing",{"title":82,"path":83,"stem":84,"icon":85},"Running and packaging","\u002Fguide\u002Fpackaging","2.guide\u002F11.packaging","i-lucide-package",{"title":87,"path":88,"stem":89,"icon":90},"The terminal contract","\u002Fguide\u002Fterminal","2.guide\u002F12.terminal","i-lucide-square-terminal",{"title":92,"path":93,"stem":94,"icon":95},"Benchmarks","\u002Fguide\u002Fbenchmarks","2.guide\u002F13.benchmarks","i-lucide-gauge",{"title":97,"icon":98,"path":99,"stem":100,"children":101,"page":25},"AI and agents","i-lucide-bot","\u002Fai","3.ai",[102],{"title":97,"path":103,"stem":104,"icon":98},"\u002Fai\u002Fagents","3.ai\u002F1.agents",{"title":106,"icon":107,"path":108,"stem":109,"children":110},"Decisions","i-lucide-scale","\u002Fdecisions","4.decisions",[111,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198],{"title":112,"path":108,"stem":113,"icon":46},"All decisions","4.decisions\u002Findex",{"title":115,"path":116,"stem":117},"0001. kyo-ui is the DSL","\u002Fdecisions\u002F0001-kyo-ui-is-the-dsl","4.decisions\u002F0001-kyo-ui-is-the-dsl",{"title":119,"path":120,"stem":121},"0002. jatatui renders the cells","\u002Fdecisions\u002F0002-jatatui-renders-the-cells","4.decisions\u002F0002-jatatui-renders-the-cells",{"title":123,"path":124,"stem":125},"0003. Pin Kyo 1.0.0-RC7 and JDK 25","\u002Fdecisions\u002F0003-pin-kyo-rc7-and-jdk-25","4.decisions\u002F0003-pin-kyo-rc7-and-jdk-25",{"title":127,"path":128,"stem":129},"0004. Public Kyo APIs only","\u002Fdecisions\u002F0004-public-kyo-apis-only","4.decisions\u002F0004-public-kyo-apis-only",{"title":131,"path":132,"stem":133},"0005. A SOFT frame contract and an own watcher loop","\u002Fdecisions\u002F0005-soft-frame-contract-and-own-watcher-loop","4.decisions\u002F0005-soft-frame-contract-and-own-watcher-loop",{"title":135,"path":136,"stem":137},"0006. Purity: edge files, lint and a pure painter","\u002Fdecisions\u002F0006-purity-edge-files-and-lint","4.decisions\u002F0006-purity-edge-files-and-lint",{"title":139,"path":140,"stem":141},"0007. Compiler flags from sbt-tpolecat","\u002Fdecisions\u002F0007-compiler-flags-from-sbt-tpolecat","4.decisions\u002F0007-compiler-flags-from-sbt-tpolecat",{"title":143,"path":144,"stem":145},"0008. The artifact split: runner, app, testkit and core","\u002Fdecisions\u002F0008-artifact-split-runner-app-testkit-core","4.decisions\u002F0008-artifact-split-runner-app-testkit-core",{"title":147,"path":148,"stem":149},"0009. tui4s-use and tui4s-widgets, cross-built","\u002Fdecisions\u002F0009-use-and-widgets-cross-built","4.decisions\u002F0009-use-and-widgets-cross-built",{"title":151,"path":152,"stem":153},"0010. The flagship assistant is the blueprint of a real app","\u002Fdecisions\u002F0010-the-flagship-assistant-as-blueprint","4.decisions\u002F0010-the-flagship-assistant-as-blueprint",{"title":155,"path":156,"stem":157},"0011. The web target: a standalone Scala.js app and one theme","\u002Fdecisions\u002F0011-web-target-standalone-scalajs-and-one-theme","4.decisions\u002F0011-web-target-standalone-scalajs-and-one-theme",{"title":159,"path":160,"stem":161},"0012. The documentation is example-first","\u002Fdecisions\u002F0012-documentation-is-example-first","4.decisions\u002F0012-documentation-is-example-first",{"title":163,"path":164,"stem":165},"0013. Benchmarks in the repository, with their own build","\u002Fdecisions\u002F0013-benchmarks-in-repo-with-own-build","4.decisions\u002F0013-benchmarks-in-repo-with-own-build",{"title":167,"path":168,"stem":169},"0014. Release per module, by tag, as 0.1.0-RC1","\u002Fdecisions\u002F0014-release-per-module-tags-and-rc1","4.decisions\u002F0014-release-per-module-tags-and-rc1",{"title":171,"path":172,"stem":173},"0015. Packaging: the AOT cache in the start scripts, native-image as an option","\u002Fdecisions\u002F0015-packaging-aot-cache-and-native-image","4.decisions\u002F0015-packaging-aot-cache-and-native-image",{"title":175,"path":176,"stem":177},"0016. Process: lean mode and agent roles","\u002Fdecisions\u002F0016-process-lean-mode-and-agent-roles","4.decisions\u002F0016-process-lean-mode-and-agent-roles",{"title":179,"path":180,"stem":181},"0017. Deferred: templates, mouse, the kitty keyboard protocol and Windows","\u002Fdecisions\u002F0017-deferred-templates-mouse-and-kitty","4.decisions\u002F0017-deferred-templates-mouse-and-kitty",{"title":183,"path":184,"stem":185},"0018. pini4s is a vendored Git submodule","\u002Fdecisions\u002F0018-pini4s-as-a-vendored-submodule","4.decisions\u002F0018-pini4s-as-a-vendored-submodule",{"title":187,"path":188,"stem":189},"0019. Upstream issues are drafts that the user posts","\u002Fdecisions\u002F0019-upstream-kyo-issues-as-drafts","4.decisions\u002F0019-upstream-kyo-issues-as-drafts",{"title":191,"path":192,"stem":193},"0020. Release from the Actions form","\u002Fdecisions\u002F0020-release-from-the-actions-form","4.decisions\u002F0020-release-from-the-actions-form",{"title":195,"path":196,"stem":197},"0021. The rulebook is CONTRIBUTING.md","\u002Fdecisions\u002F0021-the-rulebook-is-contributing-md","4.decisions\u002F0021-the-rulebook-is-contributing-md",{"title":199,"path":200,"stem":201},"0022. The logo is text","\u002Fdecisions\u002F0022-the-logo-is-text","4.decisions\u002F0022-the-logo-is-text",{"title":203,"icon":204,"path":205,"stem":206,"children":207,"page":25},"Project","i-lucide-compass","\u002Fproject","5.project",[208,213,218],{"title":209,"path":210,"stem":211,"icon":212},"Roadmap","\u002Fproject\u002Froadmap","5.project\u002F1.roadmap","i-lucide-map",{"title":214,"path":215,"stem":216,"icon":217},"Contributing","\u002Fproject\u002Fcontributing","5.project\u002F2.contributing","i-lucide-git-pull-request",{"title":219,"path":220,"stem":221,"icon":222},"Security","\u002Fproject\u002Fsecurity","5.project\u002F3.security","i-lucide-shield",{"id":224,"title":43,"body":225,"description":1090,"extension":1091,"links":1092,"meta":1093,"navigation":1094,"path":44,"seo":1095,"stem":45,"__hash__":1096},"docs\u002F2.guide\u002F03.scrolling.md",{"type":226,"value":227,"toc":1085},"minimark",[228,888,892,923,928,980,991,995,1002,1013,1017,1074,1081],[229,230,236],"pre",{"className":231,"code":232,"filename":233,"language":234,"meta":235,"style":235},"language-scala shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","    \u002F** One line of text: a longer text ends with \"…\" at the edge of its box\n      * (CSS `overflow: hidden`, `text-overflow: ellipsis`,\n      * `white-space: nowrap`).\n      *\u002F\n    val oneLine: Style =\n      Style.overflow(_.hidden).textOverflow(_.ellipsis).whiteSpace(_.noWrap)\n\n    \u002F** A row: the check box keeps its 3 cells, and a long title ends with \"…\".\n      * The list names the selected row by its id.\n      *\u002F\n    def row(r: Row): Ast.Li =\n      li.id(s\"item-${r.item.id}\")\n        .style(\n          (if r.selected then\n               Style.bg(Style.Color.indigo).color(Style.Color.white)\n           else Style.empty).gap(1.px),\n        )(\n          checkbox.checked(r.item.done).style(_.flexShrink(0)),\n          span(r.item.text).style(\n            if r.item.done then oneLine.strikethrough.color(Style.Color.gray)\n            else oneLine,\n          ),\n        )\n\n    \u002F** The list keeps the focus while the arrows move the selection:\n      * `aria-activedescendant` names the selected row (`selected`, its id), so\n      * the viewport around the list scrolls to it, and `preventScrollKeys`\n      * keeps the arrows from scrolling it too. kyo-ui's `aria` takes a fixed\n      * value, so the list is built again when `selected` changes; a toggle or\n      * an add changes only its rows (the `foreachKeyed`).\n      *\u002F\n    def list(\n        selected: Signal[String],\n        rows: Signal[Chunk[Row]],\n        onKey: KeyboardEvent => Any \u003C Async,\n    ): UI =\n      selected.map(id =>\n        ul.id(\"list\")\n          .tabIndex(0)\n          .preventScrollKeys\n          .aria(\"activedescendant\", id)\n          .onKeyDown(onKey)\n          .style(\n            _.border(1.px, Style.Color.slate)\n              .minHeight(4.px)\n              .focus(_.border(1.px, Style.Color.blue)),\n          )(\n            rows.foreachKeyed(_.item.id.toString)(row),\n          ): UI,\n      )\n\n    \u002F** The list and the input bar under it, in a viewport that takes the free\n      * rows and scrolls (`overflowY: auto`). It is not a tab stop, because it\n      * holds focusable elements (its list and its input).\n      *\u002F\n    def body(list: UI, input: UI): UI =\n      div.style(_.overflowY(_.auto).flexGrow(1))(list, input)\n","Todo.scala","scala","",[237,238,239,248,254,260,266,287,296,303,309,315,320,359,389,395,411,440,458,464,476,482,506,515,521,527,532,538,544,550,556,562,568,573,584,604,626,652,665,674,689,699,705,721,727,733,753,765,784,790,796,808,814,819,825,831,837,842,877],"code",{"__ignoreMap":235},[240,241,244],"span",{"class":242,"line":243},"line",1,[240,245,247],{"class":246},"sHwdD","    \u002F** One line of text: a longer text ends with \"…\" at the edge of its box\n",[240,249,251],{"class":242,"line":250},2,[240,252,253],{"class":246},"      * (CSS `overflow: hidden`, `text-overflow: ellipsis`,\n",[240,255,257],{"class":242,"line":256},3,[240,258,259],{"class":246},"      * `white-space: nowrap`).\n",[240,261,263],{"class":242,"line":262},4,[240,264,265],{"class":246},"      *\u002F\n",[240,267,269,273,277,280,284],{"class":242,"line":268},5,[240,270,272],{"class":271},"sMK4o","    val",[240,274,276],{"class":275},"sTEyZ"," oneLine",[240,278,279],{"class":271},":",[240,281,283],{"class":282},"sBMFI"," Style",[240,285,286],{"class":271}," =\n",[240,288,290,293],{"class":242,"line":289},6,[240,291,292],{"class":282},"      Style",[240,294,295],{"class":275},".overflow(_.hidden).textOverflow(_.ellipsis).whiteSpace(_.noWrap)\n",[240,297,299],{"class":242,"line":298},7,[240,300,302],{"emptyLinePlaceholder":301},true,"\n",[240,304,306],{"class":242,"line":305},8,[240,307,308],{"class":246},"    \u002F** A row: the check box keeps its 3 cells, and a long title ends with \"…\".\n",[240,310,312],{"class":242,"line":311},9,[240,313,314],{"class":246},"      * The list names the selected row by its id.\n",[240,316,318],{"class":242,"line":317},10,[240,319,265],{"class":246},[240,321,323,326,330,333,337,340,343,346,348,351,354,357],{"class":242,"line":322},11,[240,324,325],{"class":271},"    def",[240,327,329],{"class":328},"s2Zo4"," row",[240,331,332],{"class":275},"(",[240,334,336],{"class":335},"sHdIc","r",[240,338,339],{"class":275},": ",[240,341,342],{"class":282},"Row",[240,344,345],{"class":275},")",[240,347,279],{"class":271},[240,349,350],{"class":282}," Ast",[240,352,353],{"class":275},".",[240,355,356],{"class":282},"Li",[240,358,286],{"class":271},[240,360,362,365,368,371,375,378,381,384,386],{"class":242,"line":361},12,[240,363,364],{"class":275},"      li.id(",[240,366,367],{"class":271},"s",[240,369,370],{"class":271},"\"",[240,372,374],{"class":373},"sfazB","item-",[240,376,377],{"class":271},"${",[240,379,380],{"class":275},"r.item.id",[240,382,383],{"class":271},"}",[240,385,370],{"class":271},[240,387,388],{"class":275},")\n",[240,390,392],{"class":242,"line":391},13,[240,393,394],{"class":275},"        .style(\n",[240,396,398,401,405,408],{"class":242,"line":397},14,[240,399,400],{"class":275},"          (",[240,402,404],{"class":403},"s7zQu","if",[240,406,407],{"class":275}," r.selected ",[240,409,410],{"class":403},"then\n",[240,412,414,417,420,423,425,428,431,433,435,437],{"class":242,"line":413},15,[240,415,416],{"class":282},"               Style",[240,418,419],{"class":275},".bg(",[240,421,422],{"class":282},"Style",[240,424,353],{"class":275},[240,426,427],{"class":282},"Color",[240,429,430],{"class":275},".indigo).color(",[240,432,422],{"class":282},[240,434,353],{"class":275},[240,436,427],{"class":282},[240,438,439],{"class":275},".white)\n",[240,441,443,446,448,451,455],{"class":242,"line":442},16,[240,444,445],{"class":403},"           else",[240,447,283],{"class":282},[240,449,450],{"class":275},".empty).gap(",[240,452,454],{"class":453},"sbssI","1",[240,456,457],{"class":275},".px),\n",[240,459,461],{"class":242,"line":460},17,[240,462,463],{"class":275},"        )(\n",[240,465,467,470,473],{"class":242,"line":466},18,[240,468,469],{"class":275},"          checkbox.checked(r.item.done).style(_.flexShrink(",[240,471,472],{"class":453},"0",[240,474,475],{"class":275},")),\n",[240,477,479],{"class":242,"line":478},19,[240,480,481],{"class":275},"          span(r.item.text).style(\n",[240,483,485,488,491,494,497,499,501,503],{"class":242,"line":484},20,[240,486,487],{"class":403},"            if",[240,489,490],{"class":275}," r.item.done ",[240,492,493],{"class":403},"then",[240,495,496],{"class":275}," oneLine.strikethrough.color(",[240,498,422],{"class":282},[240,500,353],{"class":275},[240,502,427],{"class":282},[240,504,505],{"class":275},".gray)\n",[240,507,509,512],{"class":242,"line":508},21,[240,510,511],{"class":403},"            else",[240,513,514],{"class":275}," oneLine,\n",[240,516,518],{"class":242,"line":517},22,[240,519,520],{"class":275},"          ),\n",[240,522,524],{"class":242,"line":523},23,[240,525,526],{"class":275},"        )\n",[240,528,530],{"class":242,"line":529},24,[240,531,302],{"emptyLinePlaceholder":301},[240,533,535],{"class":242,"line":534},25,[240,536,537],{"class":246},"    \u002F** The list keeps the focus while the arrows move the selection:\n",[240,539,541],{"class":242,"line":540},26,[240,542,543],{"class":246},"      * `aria-activedescendant` names the selected row (`selected`, its id), so\n",[240,545,547],{"class":242,"line":546},27,[240,548,549],{"class":246},"      * the viewport around the list scrolls to it, and `preventScrollKeys`\n",[240,551,553],{"class":242,"line":552},28,[240,554,555],{"class":246},"      * keeps the arrows from scrolling it too. kyo-ui's `aria` takes a fixed\n",[240,557,559],{"class":242,"line":558},29,[240,560,561],{"class":246},"      * value, so the list is built again when `selected` changes; a toggle or\n",[240,563,565],{"class":242,"line":564},30,[240,566,567],{"class":246},"      * an add changes only its rows (the `foreachKeyed`).\n",[240,569,571],{"class":242,"line":570},31,[240,572,265],{"class":246},[240,574,576,578,581],{"class":242,"line":575},32,[240,577,325],{"class":271},[240,579,580],{"class":328}," list",[240,582,583],{"class":275},"(\n",[240,585,587,590,592,595,598,601],{"class":242,"line":586},33,[240,588,589],{"class":335},"        selected",[240,591,339],{"class":275},[240,593,594],{"class":282},"Signal",[240,596,597],{"class":275},"[",[240,599,600],{"class":282},"String",[240,602,603],{"class":275},"],\n",[240,605,607,610,612,614,616,619,621,623],{"class":242,"line":606},34,[240,608,609],{"class":335},"        rows",[240,611,339],{"class":275},[240,613,594],{"class":282},[240,615,597],{"class":275},[240,617,618],{"class":282},"Chunk",[240,620,597],{"class":275},[240,622,342],{"class":282},[240,624,625],{"class":275},"]],\n",[240,627,629,632,634,637,640,643,646,649],{"class":242,"line":628},35,[240,630,631],{"class":335},"        onKey",[240,633,339],{"class":275},[240,635,636],{"class":282},"KeyboardEvent",[240,638,639],{"class":271}," =>",[240,641,642],{"class":282}," Any",[240,644,645],{"class":271}," \u003C",[240,647,648],{"class":282}," Async",[240,650,651],{"class":275},",\n",[240,653,655,658,660,663],{"class":242,"line":654},36,[240,656,657],{"class":275},"    )",[240,659,279],{"class":271},[240,661,662],{"class":282}," UI",[240,664,286],{"class":271},[240,666,668,671],{"class":242,"line":667},37,[240,669,670],{"class":275},"      selected.map(id ",[240,672,673],{"class":271},"=>\n",[240,675,677,680,682,685,687],{"class":242,"line":676},38,[240,678,679],{"class":275},"        ul.id(",[240,681,370],{"class":271},[240,683,684],{"class":373},"list",[240,686,370],{"class":271},[240,688,388],{"class":275},[240,690,692,695,697],{"class":242,"line":691},39,[240,693,694],{"class":275},"          .tabIndex(",[240,696,472],{"class":453},[240,698,388],{"class":275},[240,700,702],{"class":242,"line":701},40,[240,703,704],{"class":275},"          .preventScrollKeys\n",[240,706,708,711,713,716,718],{"class":242,"line":707},41,[240,709,710],{"class":275},"          .aria(",[240,712,370],{"class":271},[240,714,715],{"class":373},"activedescendant",[240,717,370],{"class":271},[240,719,720],{"class":275},", id)\n",[240,722,724],{"class":242,"line":723},42,[240,725,726],{"class":275},"          .onKeyDown(onKey)\n",[240,728,730],{"class":242,"line":729},43,[240,731,732],{"class":275},"          .style(\n",[240,734,736,739,741,744,746,748,750],{"class":242,"line":735},44,[240,737,738],{"class":275},"            _.border(",[240,740,454],{"class":453},[240,742,743],{"class":275},".px, ",[240,745,422],{"class":282},[240,747,353],{"class":275},[240,749,427],{"class":282},[240,751,752],{"class":275},".slate)\n",[240,754,756,759,762],{"class":242,"line":755},45,[240,757,758],{"class":275},"              .minHeight(",[240,760,761],{"class":453},"4",[240,763,764],{"class":275},".px)\n",[240,766,768,771,773,775,777,779,781],{"class":242,"line":767},46,[240,769,770],{"class":275},"              .focus(_.border(",[240,772,454],{"class":453},[240,774,743],{"class":275},[240,776,422],{"class":282},[240,778,353],{"class":275},[240,780,427],{"class":282},[240,782,783],{"class":275},".blue)),\n",[240,785,787],{"class":242,"line":786},47,[240,788,789],{"class":275},"          )(\n",[240,791,793],{"class":242,"line":792},48,[240,794,795],{"class":275},"            rows.foreachKeyed(_.item.id.toString)(row),\n",[240,797,799,802,804,806],{"class":242,"line":798},49,[240,800,801],{"class":275},"          )",[240,803,279],{"class":271},[240,805,662],{"class":282},[240,807,651],{"class":275},[240,809,811],{"class":242,"line":810},50,[240,812,813],{"class":275},"      )\n",[240,815,817],{"class":242,"line":816},51,[240,818,302],{"emptyLinePlaceholder":301},[240,820,822],{"class":242,"line":821},52,[240,823,824],{"class":246},"    \u002F** The list and the input bar under it, in a viewport that takes the free\n",[240,826,828],{"class":242,"line":827},53,[240,829,830],{"class":246},"      * rows and scrolls (`overflowY: auto`). It is not a tab stop, because it\n",[240,832,834],{"class":242,"line":833},54,[240,835,836],{"class":246},"      * holds focusable elements (its list and its input).\n",[240,838,840],{"class":242,"line":839},55,[240,841,265],{"class":246},[240,843,845,847,850,852,854,856,859,862,865,867,869,871,873,875],{"class":242,"line":844},56,[240,846,325],{"class":271},[240,848,849],{"class":328}," body",[240,851,332],{"class":275},[240,853,684],{"class":335},[240,855,339],{"class":275},[240,857,858],{"class":282},"UI",[240,860,861],{"class":275},", ",[240,863,864],{"class":335},"input",[240,866,339],{"class":275},[240,868,858],{"class":282},[240,870,345],{"class":275},[240,872,279],{"class":271},[240,874,662],{"class":282},[240,876,286],{"class":271},[240,878,880,883,885],{"class":242,"line":879},57,[240,881,882],{"class":275},"      div.style(_.overflowY(_.auto).flexGrow(",[240,884,454],{"class":453},[240,886,887],{"class":275},"))(list, input)\n",[889,890],"cast",{"src":891},"\u002Fcasts\u002Ftodo.cast",[893,894,895,896,861,899,902,903,906,907,910,911,914,915,918,919,922],"p",{},"An element with ",[237,897,898],{},"overflow",[237,900,901],{},"overflowX"," or ",[237,904,905],{},"overflowY"," other than ",[237,908,909],{},"visible"," is a viewport. tui4s lays out its content at its natural size on that axis, clips it to the box, and shows the window at the scroll offset. ",[237,912,913],{},"hidden"," clips and does not scroll. ",[237,916,917],{},"scroll"," and ",[237,920,921],{},"auto"," also scroll.",[924,925,927],"h2",{"id":926},"the-scroll-keys","The scroll keys",[929,930,931,944],"table",{},[932,933,934],"thead",{},[935,936,937,941],"tr",{},[938,939,940],"th",{},"Key on the focused element (or on an element inside the viewport)",[938,942,943],{},"Scroll",[945,946,947,956,964,972],"tbody",{},[935,948,949,953],{},[950,951,952],"td",{},"ArrowUp, ArrowDown",[950,954,955],{},"One row.",[935,957,958,961],{},[950,959,960],{},"PageUp, PageDown",[950,962,963],{},"One viewport height.",[935,965,966,969],{},[950,967,968],{},"Home, End",[950,970,971],{},"To the top, to the bottom.",[935,973,974,977],{},[950,975,976],{},"ArrowLeft, ArrowRight",[950,978,979],{},"One column (a viewport that scrolls horizontally).",[893,981,982,983,986,987,990],{},"The innermost viewport that can move scrolls. A key does not scroll when the focused element uses it (a text input moves its caret, a select cycles, the arrows of a focus group move the focus). A key does not scroll when an element of the focus chain has kyo-ui's ",[237,984,985],{},"preventScrollKeys",". With no focus (",[237,988,989],{},"autoFocus = false"," before the first Tab), a key scrolls nothing.",[924,992,994],{"id":993},"the-focus-stays-in-view","The focus stays in view",[893,996,997,998,1001],{},"When the focus moves, each viewport around the focused element scrolls the least distance that shows it. A key or a paste on the focused element keeps it in view too. A list that keeps the focus and moves a selection names the selected element with ",[237,999,1000],{},"aria(\"activedescendant\", id)",". The viewport follows that element, as the Todo list shows.",[893,1003,1004,1005,1008,1009,1012],{},"A viewport is a tab stop when its content does not fit and it holds no focusable element. ",[237,1006,1007],{},"tabIndex(-1)"," takes it out. A focused viewport draws its track heavy. When the content is taller than the box and the box has 3 rows or more, a scroll indicator takes the right column. ",[237,1010,1011],{},"scrollbarWidth(_.none)"," hides it.",[924,1014,1016],{"id":1015},"text","Text",[929,1018,1019,1028],{},[932,1020,1021],{},[935,1022,1023,1025],{},[938,1024,422],{},[938,1026,1027],{},"What it does",[945,1029,1030,1040,1050,1060],{},[935,1031,1032,1037],{},[950,1033,1034],{},[237,1035,1036],{},"whiteSpace(_.noWrap)",[950,1038,1039],{},"Keeps one line.",[935,1041,1042,1047],{},[950,1043,1044],{},[237,1045,1046],{},"whiteSpace(_.pre)",[950,1048,1049],{},"Keeps the spaces and the line breaks, with no wrap.",[935,1051,1052,1057],{},[950,1053,1054],{},[237,1055,1056],{},"whiteSpace(_.preWrap)",[950,1058,1059],{},"Keeps the spaces and the line breaks, and wraps.",[935,1061,1062,1067],{},[950,1063,1064],{},[237,1065,1066],{},"textOverflow(_.ellipsis)",[950,1068,1069,1070,1073],{},"Puts \"…\" at the cut. It needs ",[237,1071,1072],{},"overflow(_.hidden)"," on the element that holds the text.",[893,1075,1076,1077,1080],{},"A text wraps in a column, and in a row box of a definite ",[237,1078,1079],{},"width",". Each measure counts terminal cells: a wide character (CJK, an emoji) takes two cells, and a cut never splits it.",[1082,1083,1084],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":235,"searchDepth":250,"depth":250,"links":1086},[1087,1088,1089],{"id":926,"depth":250,"text":927},{"id":993,"depth":250,"text":994},{"id":1015,"depth":250,"text":1016},"An element with overflow is a viewport that clips and scrolls; the text flow, the wrap and the ellipsis.","md",null,{},{"icon":46},{"title":43,"description":1090},"W1KUgGRvj0J6ZVHql4J4VzvsFTvY-46HpiyXL0A3WOA",[1098,1100],{"title":38,"path":39,"stem":40,"description":1099,"icon":41,"children":-1},"The native inputs of kyo-ui in the terminal, their bindings and their keys.",{"title":48,"path":49,"stem":50,"description":1101,"icon":51,"children":-1},"Positioned elements, modals with a focus trap, toasts, and the size of the terminal.",1792528754630]