From 4b7bafdb17cfec35ef4dd966dc7433c4e1e512ef Mon Sep 17 00:00:00 2001
From: Tao Xin <tao@vanjs.org>
Date: Mon, 2 Dec 2024 09:00:57 -0800
Subject: [PATCH] VanUI 0.11.5: Support `cyclicalNav` prop in `choose`

---
 components/README.md                          | 36 ++++++++++---------
 components/dist/van-ui.d.ts                   |  3 +-
 components/dist/van-ui.js                     |  6 ++--
 components/dist/van-ui.nomodule.js            |  6 ++--
 components/dist/van-ui.nomodule.min.js        |  2 +-
 components/examples/await/package-lock.json   |  9 ++---
 components/examples/await/package.json        |  2 +-
 components/examples/banner/package-lock.json  |  9 ++---
 components/examples/banner/package.json       |  2 +-
 components/examples/choose/package-lock.json  |  9 ++---
 components/examples/choose/package.json       |  2 +-
 components/examples/choose/src/main.ts        |  3 +-
 components/examples/message/package-lock.json |  9 ++---
 components/examples/message/package.json      |  2 +-
 components/examples/modal/package-lock.json   |  9 ++---
 components/examples/modal/package.json        |  2 +-
 .../examples/option-group/package-lock.json   |  9 ++---
 components/examples/option-group/package.json |  2 +-
 components/examples/tabs/package-lock.json    |  9 ++---
 components/examples/tabs/package.json         |  2 +-
 components/examples/toggle/package-lock.json  |  9 ++---
 components/examples/toggle/package.json       |  2 +-
 components/examples/tooltip/package-lock.json |  9 ++---
 components/examples/tooltip/package.json      |  2 +-
 components/examples/window/package-lock.json  | 15 ++++----
 components/examples/window/package.json       |  2 +-
 components/package-lock.json                  |  4 +--
 components/package.json                       |  2 +-
 components/van-ui.ts                          |  6 ++--
 29 files changed, 100 insertions(+), 84 deletions(-)

diff --git a/components/README.md b/components/README.md
index 6570e79..8b1a72c 100644
--- a/components/README.md
+++ b/components/README.md
@@ -52,10 +52,10 @@ import { <components you want to import> } from "vanjs-ui"
 Alternatively, you can import **VanUI** from CDN via a `<script type="text/javascript">` tag:
 
 ```html
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vanjs-ui@0.11.4/dist/van-ui.nomodule.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vanjs-ui@0.11.5/dist/van-ui.nomodule.min.js"></script>
 ```
 
-`https://cdn.jsdelivr.net/npm/vanjs-ui@0.11.4/dist/van-ui.nomodule.js` can be used for the non-minified version.
+`https://cdn.jsdelivr.net/npm/vanjs-ui@0.11.5/dist/van-ui.nomodule.js` can be used for the non-minified version.
 
 Note that: **VanJS** needs to be imported via a `<script type="text/javascript">` tag for **VanUI** to work properly.
 
@@ -795,21 +795,22 @@ choice && van.add(document.body, div("You chose: ", b(choice)))
 Example 2:
 
 ```ts
-const choice = await choose({
-  label: "Choose a South American country:",
-  options: [
-    "🇦🇷 Argentina", "🇧🇴 Bolivia", "🇧🇷 Brazil", "🇨🇱 Chile", "🇨🇴 Colombia", "🇪🇨 Ecuador",
-    "🇬🇾 Guyana", "🇵🇾 Paraguay", "🇵🇪 Peru", "🇸🇷 Suriname", "🇺🇾 Uruguay", "🇻🇪 Venezuela",
-  ],
-  showTextFilter: true,
-  customModalProps: {
-    blurBackground: true,
-    modalStyleOverrides: {height: "300px"},
-  },
-  selectedColor: "blue",
-  selectedStyleOverrides: {color: "white"},
-})
-choice && van.add(document.body, div("You chose: ", b(choice)))
+  const choice = await choose({
+    label: "Choose a South American country:",
+    options: [
+      "🇦🇷 Argentina", "🇧🇴 Bolivia", "🇧🇷 Brazil", "🇨🇱 Chile", "🇨🇴 Colombia", "🇪🇨 Ecuador",
+      "🇬🇾 Guyana", "🇵🇾 Paraguay", "🇵🇪 Peru", "🇸🇷 Suriname", "🇺🇾 Uruguay", "🇻🇪 Venezuela",
+    ],
+    showTextFilter: true,
+    selectedColor: "blue",
+    cyclicalNav: true,
+    customModalProps: {
+      blurBackground: true,
+      modalStyleOverrides: {height: "300px"},
+    },
+    selectedStyleOverrides: {color: "white"},
+  })
+  choice && van.add(document.body, div("You chose: ", b(choice)))
 ```
 
 #### Property Reference
@@ -818,6 +819,7 @@ choice && van.add(document.body, div("You chose: ", b(choice)))
 * `options`: Type `string[]`. Required. The options of the choice.
 * `showTextFilter`: Type `boolean`. Default `false`. Optional. Whether to show a text filter for the options.
 * `selectedColor`: Type `string`. Default `"#f5f5f5"`. Optional. The background color of the currently selected option.
+* `cyclicalNav`: Type `boolean`. Default `false`. Optional. Whether to navigate through the options via arrow keys in a cyclical manner. That is, if `cyclicalNav` is on, when you reach the end of the list, pressing the down arrow key will take you back to the beginning, and vice versa for going up the list with the up arrow key.
 * `customModalProps`: Type: property bags for the [`Modal`](#modal) component (except the `closed` field). Default `{}`. Optional. The custom properties for the `Modal` component you want to specify.
 * `textFilterClass`: Type `string`. Default `""`. Optional. The `class` attribute of the text filter. You can specify multiple CSS classes separated by `" "`.
 * `textFilterStyleOverrides`: Type `Record<string, string | number>`. Default `{}`. Optional. A [property bag](#property-bag-for-style-overrides) for the styles you want to override for the text filter.
diff --git a/components/dist/van-ui.d.ts b/components/dist/van-ui.d.ts
index a83b0a8..7f7239d 100644
--- a/components/dist/van-ui.d.ts
+++ b/components/dist/van-ui.d.ts
@@ -156,6 +156,7 @@ export interface ChooseProps {
     readonly options: readonly string[];
     readonly showTextFilter?: boolean;
     readonly selectedColor?: string;
+    readonly cyclicalNav?: boolean;
     readonly customModalProps?: Omit<ModalProps, "closed">;
     readonly textFilterClass?: string;
     readonly textFilterStyleOverrides?: CSSPropertyBag;
@@ -166,5 +167,5 @@ export interface ChooseProps {
     readonly selectedClass?: string;
     readonly selectedStyleOverrides?: CSSPropertyBag;
 }
-export declare const choose: ({ label, options, showTextFilter, selectedColor, customModalProps, textFilterClass, textFilterStyleOverrides, optionsContainerClass, optionsContainerStyleOverrides, optionClass, optionStyleOverrides, selectedClass, selectedStyleOverrides, }: ChooseProps) => Promise<string | null>;
+export declare const choose: ({ label, options, showTextFilter, selectedColor, cyclicalNav, customModalProps, textFilterClass, textFilterStyleOverrides, optionsContainerClass, optionsContainerStyleOverrides, optionClass, optionStyleOverrides, selectedClass, selectedStyleOverrides, }: ChooseProps) => Promise<string | null>;
 export {};
diff --git a/components/dist/van-ui.js b/components/dist/van-ui.js
index e3d3b04..94b2952 100644
--- a/components/dist/van-ui.js
+++ b/components/dist/van-ui.js
@@ -437,7 +437,7 @@ export const FloatingWindow = ({ title, closed = van.state(false), x = 100, y =
         style: toStyleStr(childrenContainerStyleOverrides)
     }, children));
 };
-export const choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
+export const choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", cyclicalNav = false, customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
     const closed = van.state(false);
     const { modalStyleOverrides, ...otherModalProps } = customModalProps;
     const modalProps = {
@@ -501,9 +501,9 @@ export const choose = ({ label, options, showTextFilter = false, selectedColor =
             closed.val = true;
         }
         else if (e.key === "ArrowDown")
-            index.val = index.val + 1 < filtered.val.length ? index.val + 1 : 0;
+            index.val = index.val + 1 < filtered.val.length ? index.val + 1 : (cyclicalNav ? 0 : index.val);
         else if (e.key === "ArrowUp")
-            index.val = index.val > 0 ? index.val - 1 : filtered.val.length - 1;
+            index.val = index.val > 0 ? index.val - 1 : (cyclicalNav ? filtered.val.length - 1 : index.val);
     };
     document.addEventListener("keydown", navByKey);
     van.derive(() => closed.val && document.removeEventListener("keydown", navByKey));
diff --git a/components/dist/van-ui.nomodule.js b/components/dist/van-ui.nomodule.js
index 7a1c4b2..5075667 100644
--- a/components/dist/van-ui.nomodule.js
+++ b/components/dist/van-ui.nomodule.js
@@ -437,7 +437,7 @@
           style: toStyleStr(childrenContainerStyleOverrides)
       }, children));
   };
-  window.choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
+  window.choose = ({ label, options, showTextFilter = false, selectedColor = "#f5f5f5", cyclicalNav = false, customModalProps = {}, textFilterClass = "", textFilterStyleOverrides = {}, optionsContainerClass = "", optionsContainerStyleOverrides = {}, optionClass = "", optionStyleOverrides = {}, selectedClass = "", selectedStyleOverrides = {}, }) => {
       const closed = van.state(false);
       const { modalStyleOverrides, ...otherModalProps } = customModalProps;
       const modalProps = {
@@ -501,9 +501,9 @@
               closed.val = true;
           }
           else if (e.key === "ArrowDown")
-              index.val = index.val + 1 < filtered.val.length ? index.val + 1 : 0;
+              index.val = index.val + 1 < filtered.val.length ? index.val + 1 : (cyclicalNav ? 0 : index.val);
           else if (e.key === "ArrowUp")
-              index.val = index.val > 0 ? index.val - 1 : filtered.val.length - 1;
+              index.val = index.val > 0 ? index.val - 1 : (cyclicalNav ? filtered.val.length - 1 : index.val);
       };
       document.addEventListener("keydown", navByKey);
       van.derive(() => closed.val && document.removeEventListener("keydown", navByKey));
diff --git a/components/dist/van-ui.nomodule.min.js b/components/dist/van-ui.nomodule.min.js
index 16db417..a5f5a21 100644
--- a/components/dist/van-ui.nomodule.min.js
+++ b/components/dist/van-ui.nomodule.min.js
@@ -1 +1 @@
-{const{button:o,div:e,header:t,input:n,label:s,span:r,style:i}=van.tags,l=o=>Object.entries(o).map(([o,e])=>`${o}: ${e};`).join(""),a=o=>Object.entries(o).map(([o,e])=>`${o} { ${l(e)} }`).join("\n"),d=Object.getPrototypeOf(van.state(null)),c=o=>Object.getPrototypeOf(o??0)===d?o:van.state(o);window.Await=({value:o,container:t=e,Loading:n,Error:s},r)=>{const i=van.state({status:"pending"});return o.then(o=>i.val={status:"fulfilled",value:o}).catch(o=>i.val={status:"rejected",value:o}),t(()=>"pending"===i.val.status?n?.()??"":"rejected"===i.val.status?s?.(i.val.value):r(i.val.value))},window.Modal=({closed:o,backgroundColor:t="rgba(0,0,0,.5)",blurBackground:n=!1,backgroundClass:s="",backgroundStyleOverrides:r={},modalClass:i="",modalStyleOverrides:a={}},...d)=>{const c={display:"flex","align-items":"center","justify-content":"center",left:0,right:0,top:0,bottom:0,position:"fixed","z-index":1e4,"background-color":t,"backdrop-filter":n?"blur(0.25rem)":"none",...r},u={"border-radius":"0.5rem",padding:"1rem",display:"block","background-color":"white",...a};return document.activeElement instanceof HTMLElement&&document.activeElement.blur(),()=>o.val?null:e({class:s,style:l(c)},e({class:i,style:l(u)},d))};let u=0;window.Tabs=({activeTab:t,resultClass:n="",style:s="",tabButtonRowColor:r="#f1f1f1",tabButtonBorderStyle:i="1px solid #000",tabButtonHoverColor:a="#ddd",tabButtonActiveColor:d="#ccc",transitionSec:c=.3,tabButtonRowClass:b="",tabButtonRowStyleOverrides:v={},tabButtonClass:p="",tabButtonStyleOverrides:w={},tabContentClass:m="",tabContentStyleOverrides:h={}},g)=>{const y=t??van.state(Object.keys(g)[0]),f=l({overflow:"hidden","background-color":r,...v}),x=l({float:"left",border:"none","border-right":i,outline:"none",cursor:"pointer",padding:"8px 16px",transition:`background-color ${c}s`,...w}),C=l({padding:"6px 12px","border-top":"none",...h}),k="vanui-tabs-"+ ++u;return document.head.appendChild(van.tags.style(`#${k} .vanui-tab-button { background-color: inherit }\n  #${k} .vanui-tab-button:hover { background-color: ${a} }\n  #${k} .vanui-tab-button.active { background-color: ${d} }`)),e({id:k,class:n,style:s},e({class:b,style:f},Object.keys(g).map(e=>o({class:()=>["vanui-tab-button"].concat(p||[],e===y.val?"active":[]).join(" "),style:x,onclick:()=>y.val=e},e))),Object.entries(g).map(([o,t])=>e({class:m,style:()=>`display: ${o===y.val?"block":"none"}; ${C}`},t)))},window.Toggle=({on:o=!1,size:e=1,cursor:t="pointer",offColor:i="#ccc",onColor:a="#2196F3",circleColor:d="white",toggleClass:u="",toggleStyleOverrides:b={},sliderClass:v="",sliderStyleOverrides:p={},circleClass:w="",circleStyleOverrides:m={},circleWhenOnStyleOverrides:h={}})=>{const g=c(o),y=l({position:"relative",display:"inline-block",width:1.76*e+"rem",height:e+"rem",cursor:t,...b}),f=l({opacity:0,width:0,height:0,position:"absolute","z-index":1e4}),x=l({position:"absolute",top:0,left:0,right:0,bottom:0,transition:".4s","border-radius":e+"rem",...p}),C=l({position:"absolute",height:.76*e+"rem",width:.76*e+"rem",left:.12*e+"rem",bottom:.12*e+"rem","background-color":d,transition:".4s","border-radius":"50%",...m}),k=l({transform:`translateX(${.76*e}rem)`,...h});return s({class:u,style:y},n({type:"checkbox",style:f,checked:g,oninput:o=>g.val=o.target.checked}),r({class:v,style:()=>`${x}; background-color: ${g.val?a:i};`},r({class:w,style:()=>C+(g.val?k:"")})))},window.MessageBoard=class{o;t;i;l;u;v;constructor({top:o="unset",bottom:t="unset",backgroundColor:n="#333D",fontColor:s="white",fadeOutSec:r=.3,boardClass:i="",boardStyleOverrides:a={},messageClass:d="",messageStyleOverrides:c={},closerClass:u="",closerStyleOverrides:b={}},v=document.body){const p=l({display:"flex","flex-direction":"column","align-items":"center",position:"fixed",top:o,bottom:t,left:"50%",transform:"translateX(-50%)","z-index":1e4,...a});this.o=r,this.t=d,this.i=l({display:"flex","background-color":n,color:s,padding:"15px","margin-bottom":"10px","border-radius":"5px",transition:`opacity ${r}s, transform ${r}s`,...c}),this.l=u,this.u=l({display:"flex","align-items":"center","margin-left":"10px",cursor:"pointer",...b}),v.appendChild(this.v=e({class:i,style:p}))}show({message:o,closer:t,durationSec:n,closed:s=van.state(!1)}){const r=van.state(!1);van.derive(()=>setTimeout(o=>r.val=o,1e3*this.o,s.val));const i=e({class:this.t,style:this.i},e(o),t?e({class:this.l,style:this.u,onclick:()=>s.val=!0},t):null);return van.derive(()=>s.val&&(i.style.opacity="0",i.style.transform="translateY(-20px)")),n&&setTimeout(()=>s.val=!0,1e3*n),van.add(this.v,()=>r.val?null:i),i}remove(){this.v.remove()}},window.Tooltip=({text:o,show:t,width:n="200px",backgroundColor:s="#333D",fontColor:i="white",fadeInSec:a=.3,tooltipClass:d="",tooltipStyleOverrides:c={},triangleClass:u="",triangleStyleOverrides:b={}})=>{const v=l({width:n,visibility:"hidden","background-color":s,color:i,"text-align":"center",padding:"5px","border-radius":"5px",position:"absolute","z-index":1,bottom:"125%",left:"50%",transform:"translateX(-50%)",opacity:0,transition:`opacity ${a}s`,...c}),p=l({width:0,height:0,"margin-left":"-5px","border-left":"5px solid transparent","border-right":"5px solid transparent","border-top":"5px solid #333",position:"absolute",bottom:"-5px",left:"50%",...b}),w=r({class:d,style:v},o,e({class:u,style:p}));return van.derive(()=>t.val?(w.style.opacity="1",w.style.visibility="visible"):(w.style.opacity="0",w.style.visibility="hidden")),w};let b=0;window.OptionGroup=({selected:t,normalColor:n="#e2eef7",hoverColor:s="#c1d4e9",selectedColor:r="#90b6d9",selectedHoverColor:i="#7fa5c8",fontColor:a="black",transitionSec:d=.3,optionGroupClass:c="",optionGroupStyleOverrides:u={},optionClass:v="",optionStyleOverrides:p={}},w)=>{const m=l({display:"flex",...u}),h=l({padding:"10px 20px",border:"none",color:a,cursor:"pointer",outline:"none",transition:`background-color ${d}s`,...p}),g="vanui-option-group-"+ ++b;return document.head.appendChild(van.tags.style(`#${g} .vanui-button { background-color: ${n} }\n  #${g} .vanui-button:hover { background-color: ${s} }\n  #${g} .vanui-button.selected { background-color: ${r} }\n  #${g} .vanui-button.selected:hover { background-color: ${i} }`)),e({id:g,class:c,style:m},w.map(e=>o({class:()=>["vanui-button"].concat(v||[],e===t.val?"selected":[]).join(" "),style:h,onclick:()=>t.val=e},e)))},window.Banner=({backgroundColor:o="#fff1a8",fontColor:e="currentcolor",sticky:n=!1,bannerClass:s="",bannerStyleOverrides:r={}},...i)=>{const a=l({"background-color":o,color:e,top:0,position:n?"sticky":"static","z-index":10,...r});return t({class:s,style:a},i)};let v=0;window.topMostZIndex=()=>++v,window.FloatingWindow=({title:o,closed:n=van.state(!1),x:s=100,y:d=100,width:u=300,height:b=200,closeCross:v="×",customStacking:p=!1,zIndex:w=1,disableMove:m=!1,disableResize:h=!1,headerColor:g="lightgray",windowClass:y="",windowStyleOverrides:f={},headerClass:x="",headerStyleOverrides:C={},childrenContainerClass:k="",childrenContainerStyleOverrides:O={},crossClass:S="",crossStyleOverrides:$={},crossHoverClass:z="",crossHoverStyleOverrides:j={}},...B)=>{const M=c(s),T=c(d),_=c(u),H=c(b),A=c(w);p||(A.val=topMostZIndex());const E=van.state(!1),F=van.state(null),I=van.state(0),R=van.state(0),D=van.state(0),X=van.state(0),G=z||Object.keys(j)?van.state(!1):null,L=o=>{0===o.button&&(E.val=!0,I.val=o.clientX,R.val=o.clientY,document.body.style.userSelect="none")},P=o=>e=>{F.val=o,I.val=e.clientX,R.val=e.clientY,D.val=_.val,X.val=H.val,document.body.style.userSelect="none"};document.addEventListener("mousemove",o=>{if(E.val)M.val+=o.clientX-I.val,T.val+=o.clientY-R.val,I.val=o.clientX,R.val=o.clientY;else if(F.val){const e=o.clientX-I.val,t=o.clientY-R.val;F.val.includes("right")&&(_.val=D.val+e),F.val.includes("bottom")&&(H.val=X.val+t)}}),document.addEventListener("mouseup",()=>{E.val=!1,F.val=null,document.body.style.userSelect=""});const Z="transparent";if(!document.getElementById("vanui-window-style")){const o=i({type:"text/css",id:"vanui-window-style"},a({".vanui-window":{position:"fixed","background-color":"white",border:"1px solid black","border-radius":"0.5rem",overflow:"hidden"},".vanui-window-dragarea":{cursor:"move",position:"absolute",left:"0",top:"0",width:"100%",height:"1rem"},".vanui-window-resize-right":{cursor:"e-resize",position:"absolute",right:"0",top:"0",width:"10px",height:"100%","background-color":Z},".vanui-window-resize-bottom":{cursor:"s-resize",position:"absolute",left:"0",bottom:"0",width:"100%",height:"10px","background-color":Z},".vanui-window-resize-rightbottom":{cursor:"se-resize",position:"absolute",right:"0",bottom:"0",width:"10px",height:"10px","background-color":Z},".vanui-window-header":{cursor:"move","user-select":"none",display:"flex","justify-content":"space-between","align-items":"center",padding:"0.5rem"},".vanui-window-cross":{cursor:"pointer","font-family":"Arial",transition:"background-color 0.3s, color 0.3s","border-radius":"50%",width:"24px",height:"24px",display:"flex","align-items":"center","justify-content":"center"},".vanui-window-cross:hover":{"background-color":"red",color:"white"},".vanui-window-children":{padding:"0.5rem"}}));document.head.appendChild(o)}return()=>n.val?null:e({class:["vanui-window"].concat(y||[]).join(" "),style:()=>l({left:`${M.val}px`,top:`${T.val}px`,width:`${_.val}px`,height:`${H.val}px`,"z-index":A.val,...f}),...p?{}:{onmousedown:()=>A.val=topMostZIndex()}},o?t({class:["vanui-window-header"].concat(x||[]).join(" "),style:l({"background-color":g,...m?{cursor:"auto"}:{},...C}),...m?{}:{onmousedown:L}},o,v?r({class:()=>["vanui-window-cross"].concat(S||[]).concat(z&&G.val?z:[]).join(" "),style:()=>l({...$,...Object.keys(j).length&&G.val?j:{}}),onclick:()=>n.val=!0,...G?{onmouseenter:()=>G.val=!0,onmouseleave:()=>G.val=!1}:{}},v):null):m?null:e({class:"vanui-window-dragarea",onmousedown:L}),h?[]:[e({class:"vanui-window-resize-right",onmousedown:P("right")}),e({class:"vanui-window-resize-bottom",onmousedown:P("bottom")}),e({class:"vanui-window-resize-rightbottom",onmousedown:P("rightbottom")})],e({class:["vanui-window-children"].concat(k||[]).join(" "),style:l(O)},B))},window.choose=({label:o,options:t,showTextFilter:s=!1,selectedColor:r="#f5f5f5",customModalProps:i={},textFilterClass:a="",textFilterStyleOverrides:d={},optionsContainerClass:c="",optionsContainerStyleOverrides:u={},optionClass:b="",optionStyleOverrides:v={},selectedClass:p="",selectedStyleOverrides:w={}})=>{const m=van.state(!1),{modalStyleOverrides:h,...g}=i,y={closed:m,modalStyleOverrides:{display:"flex","flex-direction":"column",...h},...g},f=van.state(""),x=van.derive(()=>t.filter(o=>o.toLocaleLowerCase().includes(f.val.toLocaleLowerCase()))),C=van.derive(()=>(f.val,0));let k;const O=new Promise(o=>k=o),S={width:"98%","margin-top":"0.5rem","margin-bottom":"0.5rem",...d},$={"overflow-y":"auto","flex-grow":1,...u},z=s?n({type:"text",class:a,style:l(S),oninput:o=>f.val=o.target.value}):null,j={padding:"0.5rem",...v},B={"background-color":r,...w};van.add(document.head,()=>m.val?null:van.tags.style(`.vanui-choose-selected, .vanui-choose-option:hover { ${l(B)} }`)),van.add(document.body,Modal(y,e(o),s?e(z):null,()=>e({class:c,style:l($)},x.val.map((o,t)=>e({class:()=>["vanui-choose-option"].concat(b||[],t===C.val?"vanui-choose-selected":[],t===C.val&&p?p:[]).join(" "),style:l(j),onclick:()=>(k(o),m.val=!0)},o))))),z?.focus(),van.derive(()=>{C.val,setTimeout(()=>document.querySelector(".vanui-choose-selected")?.scrollIntoView(!1),10)});const M=o=>{"Enter"===o.key&&C.val<x.val.length?(k(x.val[C.val]),m.val=!0):"Escape"===o.key?(k(null),m.val=!0):"ArrowDown"===o.key?C.val=C.val+1<x.val.length?C.val+1:0:"ArrowUp"===o.key&&(C.val=C.val>0?C.val-1:x.val.length-1)};return document.addEventListener("keydown",M),van.derive(()=>m.val&&document.removeEventListener("keydown",M)),O}}
\ No newline at end of file
+{const{button:o,div:e,header:t,input:n,label:s,span:r,style:i}=van.tags,l=o=>Object.entries(o).map(([o,e])=>`${o}: ${e};`).join(""),a=o=>Object.entries(o).map(([o,e])=>`${o} { ${l(e)} }`).join("\n"),c=Object.getPrototypeOf(van.state(null)),d=o=>Object.getPrototypeOf(o??0)===c?o:van.state(o);window.Await=({value:o,container:t=e,Loading:n,Error:s},r)=>{const i=van.state({status:"pending"});return o.then(o=>i.val={status:"fulfilled",value:o}).catch(o=>i.val={status:"rejected",value:o}),t(()=>"pending"===i.val.status?n?.()??"":"rejected"===i.val.status?s?.(i.val.value):r(i.val.value))},window.Modal=({closed:o,backgroundColor:t="rgba(0,0,0,.5)",blurBackground:n=!1,backgroundClass:s="",backgroundStyleOverrides:r={},modalClass:i="",modalStyleOverrides:a={}},...c)=>{const d={display:"flex","align-items":"center","justify-content":"center",left:0,right:0,top:0,bottom:0,position:"fixed","z-index":1e4,"background-color":t,"backdrop-filter":n?"blur(0.25rem)":"none",...r},u={"border-radius":"0.5rem",padding:"1rem",display:"block","background-color":"white",...a};return document.activeElement instanceof HTMLElement&&document.activeElement.blur(),()=>o.val?null:e({class:s,style:l(d)},e({class:i,style:l(u)},c))};let u=0;window.Tabs=({activeTab:t,resultClass:n="",style:s="",tabButtonRowColor:r="#f1f1f1",tabButtonBorderStyle:i="1px solid #000",tabButtonHoverColor:a="#ddd",tabButtonActiveColor:c="#ccc",transitionSec:d=.3,tabButtonRowClass:b="",tabButtonRowStyleOverrides:v={},tabButtonClass:p="",tabButtonStyleOverrides:w={},tabContentClass:m="",tabContentStyleOverrides:h={}},g)=>{const y=t??van.state(Object.keys(g)[0]),f=l({overflow:"hidden","background-color":r,...v}),x=l({float:"left",border:"none","border-right":i,outline:"none",cursor:"pointer",padding:"8px 16px",transition:`background-color ${d}s`,...w}),C=l({padding:"6px 12px","border-top":"none",...h}),k="vanui-tabs-"+ ++u;return document.head.appendChild(van.tags.style(`#${k} .vanui-tab-button { background-color: inherit }\n  #${k} .vanui-tab-button:hover { background-color: ${a} }\n  #${k} .vanui-tab-button.active { background-color: ${c} }`)),e({id:k,class:n,style:s},e({class:b,style:f},Object.keys(g).map(e=>o({class:()=>["vanui-tab-button"].concat(p||[],e===y.val?"active":[]).join(" "),style:x,onclick:()=>y.val=e},e))),Object.entries(g).map(([o,t])=>e({class:m,style:()=>`display: ${o===y.val?"block":"none"}; ${C}`},t)))},window.Toggle=({on:o=!1,size:e=1,cursor:t="pointer",offColor:i="#ccc",onColor:a="#2196F3",circleColor:c="white",toggleClass:u="",toggleStyleOverrides:b={},sliderClass:v="",sliderStyleOverrides:p={},circleClass:w="",circleStyleOverrides:m={},circleWhenOnStyleOverrides:h={}})=>{const g=d(o),y=l({position:"relative",display:"inline-block",width:1.76*e+"rem",height:e+"rem",cursor:t,...b}),f=l({opacity:0,width:0,height:0,position:"absolute","z-index":1e4}),x=l({position:"absolute",top:0,left:0,right:0,bottom:0,transition:".4s","border-radius":e+"rem",...p}),C=l({position:"absolute",height:.76*e+"rem",width:.76*e+"rem",left:.12*e+"rem",bottom:.12*e+"rem","background-color":c,transition:".4s","border-radius":"50%",...m}),k=l({transform:`translateX(${.76*e}rem)`,...h});return s({class:u,style:y},n({type:"checkbox",style:f,checked:g,oninput:o=>g.val=o.target.checked}),r({class:v,style:()=>`${x}; background-color: ${g.val?a:i};`},r({class:w,style:()=>C+(g.val?k:"")})))},window.MessageBoard=class{o;t;i;l;u;v;constructor({top:o="unset",bottom:t="unset",backgroundColor:n="#333D",fontColor:s="white",fadeOutSec:r=.3,boardClass:i="",boardStyleOverrides:a={},messageClass:c="",messageStyleOverrides:d={},closerClass:u="",closerStyleOverrides:b={}},v=document.body){const p=l({display:"flex","flex-direction":"column","align-items":"center",position:"fixed",top:o,bottom:t,left:"50%",transform:"translateX(-50%)","z-index":1e4,...a});this.o=r,this.t=c,this.i=l({display:"flex","background-color":n,color:s,padding:"15px","margin-bottom":"10px","border-radius":"5px",transition:`opacity ${r}s, transform ${r}s`,...d}),this.l=u,this.u=l({display:"flex","align-items":"center","margin-left":"10px",cursor:"pointer",...b}),v.appendChild(this.v=e({class:i,style:p}))}show({message:o,closer:t,durationSec:n,closed:s=van.state(!1)}){const r=van.state(!1);van.derive(()=>setTimeout(o=>r.val=o,1e3*this.o,s.val));const i=e({class:this.t,style:this.i},e(o),t?e({class:this.l,style:this.u,onclick:()=>s.val=!0},t):null);return van.derive(()=>s.val&&(i.style.opacity="0",i.style.transform="translateY(-20px)")),n&&setTimeout(()=>s.val=!0,1e3*n),van.add(this.v,()=>r.val?null:i),i}remove(){this.v.remove()}},window.Tooltip=({text:o,show:t,width:n="200px",backgroundColor:s="#333D",fontColor:i="white",fadeInSec:a=.3,tooltipClass:c="",tooltipStyleOverrides:d={},triangleClass:u="",triangleStyleOverrides:b={}})=>{const v=l({width:n,visibility:"hidden","background-color":s,color:i,"text-align":"center",padding:"5px","border-radius":"5px",position:"absolute","z-index":1,bottom:"125%",left:"50%",transform:"translateX(-50%)",opacity:0,transition:`opacity ${a}s`,...d}),p=l({width:0,height:0,"margin-left":"-5px","border-left":"5px solid transparent","border-right":"5px solid transparent","border-top":"5px solid #333",position:"absolute",bottom:"-5px",left:"50%",...b}),w=r({class:c,style:v},o,e({class:u,style:p}));return van.derive(()=>t.val?(w.style.opacity="1",w.style.visibility="visible"):(w.style.opacity="0",w.style.visibility="hidden")),w};let b=0;window.OptionGroup=({selected:t,normalColor:n="#e2eef7",hoverColor:s="#c1d4e9",selectedColor:r="#90b6d9",selectedHoverColor:i="#7fa5c8",fontColor:a="black",transitionSec:c=.3,optionGroupClass:d="",optionGroupStyleOverrides:u={},optionClass:v="",optionStyleOverrides:p={}},w)=>{const m=l({display:"flex",...u}),h=l({padding:"10px 20px",border:"none",color:a,cursor:"pointer",outline:"none",transition:`background-color ${c}s`,...p}),g="vanui-option-group-"+ ++b;return document.head.appendChild(van.tags.style(`#${g} .vanui-button { background-color: ${n} }\n  #${g} .vanui-button:hover { background-color: ${s} }\n  #${g} .vanui-button.selected { background-color: ${r} }\n  #${g} .vanui-button.selected:hover { background-color: ${i} }`)),e({id:g,class:d,style:m},w.map(e=>o({class:()=>["vanui-button"].concat(v||[],e===t.val?"selected":[]).join(" "),style:h,onclick:()=>t.val=e},e)))},window.Banner=({backgroundColor:o="#fff1a8",fontColor:e="currentcolor",sticky:n=!1,bannerClass:s="",bannerStyleOverrides:r={}},...i)=>{const a=l({"background-color":o,color:e,top:0,position:n?"sticky":"static","z-index":10,...r});return t({class:s,style:a},i)};let v=0;window.topMostZIndex=()=>++v,window.FloatingWindow=({title:o,closed:n=van.state(!1),x:s=100,y:c=100,width:u=300,height:b=200,closeCross:v="×",customStacking:p=!1,zIndex:w=1,disableMove:m=!1,disableResize:h=!1,headerColor:g="lightgray",windowClass:y="",windowStyleOverrides:f={},headerClass:x="",headerStyleOverrides:C={},childrenContainerClass:k="",childrenContainerStyleOverrides:O={},crossClass:S="",crossStyleOverrides:$={},crossHoverClass:z="",crossHoverStyleOverrides:j={}},...B)=>{const M=d(s),T=d(c),_=d(u),H=d(b),A=d(w);p||(A.val=topMostZIndex());const E=van.state(!1),F=van.state(null),I=van.state(0),R=van.state(0),D=van.state(0),X=van.state(0),G=z||Object.keys(j)?van.state(!1):null,L=o=>{0===o.button&&(E.val=!0,I.val=o.clientX,R.val=o.clientY,document.body.style.userSelect="none")},P=o=>e=>{F.val=o,I.val=e.clientX,R.val=e.clientY,D.val=_.val,X.val=H.val,document.body.style.userSelect="none"};document.addEventListener("mousemove",o=>{if(E.val)M.val+=o.clientX-I.val,T.val+=o.clientY-R.val,I.val=o.clientX,R.val=o.clientY;else if(F.val){const e=o.clientX-I.val,t=o.clientY-R.val;F.val.includes("right")&&(_.val=D.val+e),F.val.includes("bottom")&&(H.val=X.val+t)}}),document.addEventListener("mouseup",()=>{E.val=!1,F.val=null,document.body.style.userSelect=""});const Z="transparent";if(!document.getElementById("vanui-window-style")){const o=i({type:"text/css",id:"vanui-window-style"},a({".vanui-window":{position:"fixed","background-color":"white",border:"1px solid black","border-radius":"0.5rem",overflow:"hidden"},".vanui-window-dragarea":{cursor:"move",position:"absolute",left:"0",top:"0",width:"100%",height:"1rem"},".vanui-window-resize-right":{cursor:"e-resize",position:"absolute",right:"0",top:"0",width:"10px",height:"100%","background-color":Z},".vanui-window-resize-bottom":{cursor:"s-resize",position:"absolute",left:"0",bottom:"0",width:"100%",height:"10px","background-color":Z},".vanui-window-resize-rightbottom":{cursor:"se-resize",position:"absolute",right:"0",bottom:"0",width:"10px",height:"10px","background-color":Z},".vanui-window-header":{cursor:"move","user-select":"none",display:"flex","justify-content":"space-between","align-items":"center",padding:"0.5rem"},".vanui-window-cross":{cursor:"pointer","font-family":"Arial",transition:"background-color 0.3s, color 0.3s","border-radius":"50%",width:"24px",height:"24px",display:"flex","align-items":"center","justify-content":"center"},".vanui-window-cross:hover":{"background-color":"red",color:"white"},".vanui-window-children":{padding:"0.5rem"}}));document.head.appendChild(o)}return()=>n.val?null:e({class:["vanui-window"].concat(y||[]).join(" "),style:()=>l({left:`${M.val}px`,top:`${T.val}px`,width:`${_.val}px`,height:`${H.val}px`,"z-index":A.val,...f}),...p?{}:{onmousedown:()=>A.val=topMostZIndex()}},o?t({class:["vanui-window-header"].concat(x||[]).join(" "),style:l({"background-color":g,...m?{cursor:"auto"}:{},...C}),...m?{}:{onmousedown:L}},o,v?r({class:()=>["vanui-window-cross"].concat(S||[]).concat(z&&G.val?z:[]).join(" "),style:()=>l({...$,...Object.keys(j).length&&G.val?j:{}}),onclick:()=>n.val=!0,...G?{onmouseenter:()=>G.val=!0,onmouseleave:()=>G.val=!1}:{}},v):null):m?null:e({class:"vanui-window-dragarea",onmousedown:L}),h?[]:[e({class:"vanui-window-resize-right",onmousedown:P("right")}),e({class:"vanui-window-resize-bottom",onmousedown:P("bottom")}),e({class:"vanui-window-resize-rightbottom",onmousedown:P("rightbottom")})],e({class:["vanui-window-children"].concat(k||[]).join(" "),style:l(O)},B))},window.choose=({label:o,options:t,showTextFilter:s=!1,selectedColor:r="#f5f5f5",cyclicalNav:i=!1,customModalProps:a={},textFilterClass:c="",textFilterStyleOverrides:d={},optionsContainerClass:u="",optionsContainerStyleOverrides:b={},optionClass:v="",optionStyleOverrides:p={},selectedClass:w="",selectedStyleOverrides:m={}})=>{const h=van.state(!1),{modalStyleOverrides:g,...y}=a,f={closed:h,modalStyleOverrides:{display:"flex","flex-direction":"column",...g},...y},x=van.state(""),C=van.derive(()=>t.filter(o=>o.toLocaleLowerCase().includes(x.val.toLocaleLowerCase()))),k=van.derive(()=>(x.val,0));let O;const S=new Promise(o=>O=o),$={width:"98%","margin-top":"0.5rem","margin-bottom":"0.5rem",...d},z={"overflow-y":"auto","flex-grow":1,...b},j=s?n({type:"text",class:c,style:l($),oninput:o=>x.val=o.target.value}):null,B={padding:"0.5rem",...p},M={"background-color":r,...m};van.add(document.head,()=>h.val?null:van.tags.style(`.vanui-choose-selected, .vanui-choose-option:hover { ${l(M)} }`)),van.add(document.body,Modal(f,e(o),s?e(j):null,()=>e({class:u,style:l(z)},C.val.map((o,t)=>e({class:()=>["vanui-choose-option"].concat(v||[],t===k.val?"vanui-choose-selected":[],t===k.val&&w?w:[]).join(" "),style:l(B),onclick:()=>(O(o),h.val=!0)},o))))),j?.focus(),van.derive(()=>{k.val,setTimeout(()=>document.querySelector(".vanui-choose-selected")?.scrollIntoView(!1),10)});const T=o=>{"Enter"===o.key&&k.val<C.val.length?(O(C.val[k.val]),h.val=!0):"Escape"===o.key?(O(null),h.val=!0):"ArrowDown"===o.key?k.val=k.val+1<C.val.length?k.val+1:i?0:k.val:"ArrowUp"===o.key&&(k.val=k.val>0?k.val-1:i?C.val.length-1:k.val)};return document.addEventListener("keydown",T),van.derive(()=>h.val&&document.removeEventListener("keydown",T)),S}}
\ No newline at end of file
diff --git a/components/examples/await/package-lock.json b/components/examples/await/package-lock.json
index 01fe67f..5d62d98 100644
--- a/components/examples/await/package-lock.json
+++ b/components/examples/await/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "vanjs-core": "^1.5.2",
-        "vanjs-ui": "^0.11.4"
+        "vanjs-ui": "^0.11.5"
       },
       "devDependencies": {
         "terser": "^5.19.2",
@@ -635,9 +635,10 @@
       "integrity": "sha512-z9MHAzxYbNFJ6MYP+4j9l9KMxDU3ryI65JjIfUbGQwF1paLfiuqtIiq9Ve1UGKLd774Z7mtdWzd+/FR785dKjQ=="
     },
     "node_modules/vanjs-ui": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.4.tgz",
-      "integrity": "sha512-JoZfgvQ5PSO+8yU/mF9OyJfal8oOZ9h0K9aonUcsYBdHUw/BtIc0979wRIstBznK7rgTfrzCW+HjA2cTYJZBVQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.5.tgz",
+      "integrity": "sha512-yDFXi0hBZPG2VSQuTumUXSvGBU8gF6i08/yILCNtLDjo8I7QE1b7s1VyrF6nDy1F4IChypXKN7nV+9R+ZG7hVQ==",
+      "license": "MIT",
       "dependencies": {
         "vanjs-core": "^1.5.2"
       }
diff --git a/components/examples/await/package.json b/components/examples/await/package.json
index 8761dae..93d3c2e 100644
--- a/components/examples/await/package.json
+++ b/components/examples/await/package.json
@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }
diff --git a/components/examples/banner/package-lock.json b/components/examples/banner/package-lock.json
index 867c5bd..a0e72d3 100644
--- a/components/examples/banner/package-lock.json
+++ b/components/examples/banner/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "vanjs-core": "^1.5.2",
-        "vanjs-ui": "^0.11.4"
+        "vanjs-ui": "^0.11.5"
       },
       "devDependencies": {
         "terser": "^5.19.2",
@@ -635,9 +635,10 @@
       "integrity": "sha512-z9MHAzxYbNFJ6MYP+4j9l9KMxDU3ryI65JjIfUbGQwF1paLfiuqtIiq9Ve1UGKLd774Z7mtdWzd+/FR785dKjQ=="
     },
     "node_modules/vanjs-ui": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.4.tgz",
-      "integrity": "sha512-JoZfgvQ5PSO+8yU/mF9OyJfal8oOZ9h0K9aonUcsYBdHUw/BtIc0979wRIstBznK7rgTfrzCW+HjA2cTYJZBVQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.5.tgz",
+      "integrity": "sha512-yDFXi0hBZPG2VSQuTumUXSvGBU8gF6i08/yILCNtLDjo8I7QE1b7s1VyrF6nDy1F4IChypXKN7nV+9R+ZG7hVQ==",
+      "license": "MIT",
       "dependencies": {
         "vanjs-core": "^1.5.2"
       }
diff --git a/components/examples/banner/package.json b/components/examples/banner/package.json
index 570b15b..58a35c7 100644
--- a/components/examples/banner/package.json
+++ b/components/examples/banner/package.json
@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }
diff --git a/components/examples/choose/package-lock.json b/components/examples/choose/package-lock.json
index 43ad3e0..2ef1822 100644
--- a/components/examples/choose/package-lock.json
+++ b/components/examples/choose/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "vanjs-core": "^1.5.2",
-        "vanjs-ui": "^0.11.4"
+        "vanjs-ui": "^0.11.5"
       },
       "devDependencies": {
         "terser": "^5.19.2",
@@ -678,9 +678,10 @@
       "license": "MIT"
     },
     "node_modules/vanjs-ui": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.4.tgz",
-      "integrity": "sha512-JoZfgvQ5PSO+8yU/mF9OyJfal8oOZ9h0K9aonUcsYBdHUw/BtIc0979wRIstBznK7rgTfrzCW+HjA2cTYJZBVQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.5.tgz",
+      "integrity": "sha512-yDFXi0hBZPG2VSQuTumUXSvGBU8gF6i08/yILCNtLDjo8I7QE1b7s1VyrF6nDy1F4IChypXKN7nV+9R+ZG7hVQ==",
+      "license": "MIT",
       "dependencies": {
         "vanjs-core": "^1.5.2"
       }
diff --git a/components/examples/choose/package.json b/components/examples/choose/package.json
index c5d4a03..3436c74 100644
--- a/components/examples/choose/package.json
+++ b/components/examples/choose/package.json
@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }
diff --git a/components/examples/choose/src/main.ts b/components/examples/choose/src/main.ts
index 76fffe7..8e4f273 100644
--- a/components/examples/choose/src/main.ts
+++ b/components/examples/choose/src/main.ts
@@ -19,11 +19,12 @@ const example2 = async () => {
       "🇬🇾 Guyana", "🇵🇾 Paraguay", "🇵🇪 Peru", "🇸🇷 Suriname", "🇺🇾 Uruguay", "🇻🇪 Venezuela",
     ],
     showTextFilter: true,
+    selectedColor: "blue",
+    cyclicalNav: true,
     customModalProps: {
       blurBackground: true,
       modalStyleOverrides: {height: "300px"},
     },
-    selectedColor: "blue",
     selectedStyleOverrides: {color: "white"},
   })
   choice && van.add(document.body, div("You chose: ", b(choice)))
diff --git a/components/examples/message/package-lock.json b/components/examples/message/package-lock.json
index 435cd69..7b6fcfe 100644
--- a/components/examples/message/package-lock.json
+++ b/components/examples/message/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "vanjs-core": "^1.5.2",
-        "vanjs-ui": "^0.11.4"
+        "vanjs-ui": "^0.11.5"
       },
       "devDependencies": {
         "terser": "^5.19.2",
@@ -635,9 +635,10 @@
       "integrity": "sha512-z9MHAzxYbNFJ6MYP+4j9l9KMxDU3ryI65JjIfUbGQwF1paLfiuqtIiq9Ve1UGKLd774Z7mtdWzd+/FR785dKjQ=="
     },
     "node_modules/vanjs-ui": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.4.tgz",
-      "integrity": "sha512-JoZfgvQ5PSO+8yU/mF9OyJfal8oOZ9h0K9aonUcsYBdHUw/BtIc0979wRIstBznK7rgTfrzCW+HjA2cTYJZBVQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.5.tgz",
+      "integrity": "sha512-yDFXi0hBZPG2VSQuTumUXSvGBU8gF6i08/yILCNtLDjo8I7QE1b7s1VyrF6nDy1F4IChypXKN7nV+9R+ZG7hVQ==",
+      "license": "MIT",
       "dependencies": {
         "vanjs-core": "^1.5.2"
       }
diff --git a/components/examples/message/package.json b/components/examples/message/package.json
index 59b6596..cc49180 100644
--- a/components/examples/message/package.json
+++ b/components/examples/message/package.json
@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }
diff --git a/components/examples/modal/package-lock.json b/components/examples/modal/package-lock.json
index 5cd866c..64c2dd5 100644
--- a/components/examples/modal/package-lock.json
+++ b/components/examples/modal/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "vanjs-core": "^1.5.2",
-        "vanjs-ui": "^0.11.4"
+        "vanjs-ui": "^0.11.5"
       },
       "devDependencies": {
         "terser": "^5.19.2",
@@ -635,9 +635,10 @@
       "integrity": "sha512-z9MHAzxYbNFJ6MYP+4j9l9KMxDU3ryI65JjIfUbGQwF1paLfiuqtIiq9Ve1UGKLd774Z7mtdWzd+/FR785dKjQ=="
     },
     "node_modules/vanjs-ui": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.4.tgz",
-      "integrity": "sha512-JoZfgvQ5PSO+8yU/mF9OyJfal8oOZ9h0K9aonUcsYBdHUw/BtIc0979wRIstBznK7rgTfrzCW+HjA2cTYJZBVQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.5.tgz",
+      "integrity": "sha512-yDFXi0hBZPG2VSQuTumUXSvGBU8gF6i08/yILCNtLDjo8I7QE1b7s1VyrF6nDy1F4IChypXKN7nV+9R+ZG7hVQ==",
+      "license": "MIT",
       "dependencies": {
         "vanjs-core": "^1.5.2"
       }
diff --git a/components/examples/modal/package.json b/components/examples/modal/package.json
index 29d16f3..4c59a57 100644
--- a/components/examples/modal/package.json
+++ b/components/examples/modal/package.json
@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }
diff --git a/components/examples/option-group/package-lock.json b/components/examples/option-group/package-lock.json
index 87d5981..64b78c0 100644
--- a/components/examples/option-group/package-lock.json
+++ b/components/examples/option-group/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "vanjs-core": "^1.5.2",
-        "vanjs-ui": "^0.11.4"
+        "vanjs-ui": "^0.11.5"
       },
       "devDependencies": {
         "terser": "^5.19.2",
@@ -635,9 +635,10 @@
       "integrity": "sha512-z9MHAzxYbNFJ6MYP+4j9l9KMxDU3ryI65JjIfUbGQwF1paLfiuqtIiq9Ve1UGKLd774Z7mtdWzd+/FR785dKjQ=="
     },
     "node_modules/vanjs-ui": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.4.tgz",
-      "integrity": "sha512-JoZfgvQ5PSO+8yU/mF9OyJfal8oOZ9h0K9aonUcsYBdHUw/BtIc0979wRIstBznK7rgTfrzCW+HjA2cTYJZBVQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.5.tgz",
+      "integrity": "sha512-yDFXi0hBZPG2VSQuTumUXSvGBU8gF6i08/yILCNtLDjo8I7QE1b7s1VyrF6nDy1F4IChypXKN7nV+9R+ZG7hVQ==",
+      "license": "MIT",
       "dependencies": {
         "vanjs-core": "^1.5.2"
       }
diff --git a/components/examples/option-group/package.json b/components/examples/option-group/package.json
index 9e7c055..9540b10 100644
--- a/components/examples/option-group/package.json
+++ b/components/examples/option-group/package.json
@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }
diff --git a/components/examples/tabs/package-lock.json b/components/examples/tabs/package-lock.json
index ec94d94..86aad74 100644
--- a/components/examples/tabs/package-lock.json
+++ b/components/examples/tabs/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "vanjs-core": "^1.5.2",
-        "vanjs-ui": "^0.11.4"
+        "vanjs-ui": "^0.11.5"
       },
       "devDependencies": {
         "terser": "^5.19.2",
@@ -635,9 +635,10 @@
       "integrity": "sha512-z9MHAzxYbNFJ6MYP+4j9l9KMxDU3ryI65JjIfUbGQwF1paLfiuqtIiq9Ve1UGKLd774Z7mtdWzd+/FR785dKjQ=="
     },
     "node_modules/vanjs-ui": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.4.tgz",
-      "integrity": "sha512-JoZfgvQ5PSO+8yU/mF9OyJfal8oOZ9h0K9aonUcsYBdHUw/BtIc0979wRIstBznK7rgTfrzCW+HjA2cTYJZBVQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.5.tgz",
+      "integrity": "sha512-yDFXi0hBZPG2VSQuTumUXSvGBU8gF6i08/yILCNtLDjo8I7QE1b7s1VyrF6nDy1F4IChypXKN7nV+9R+ZG7hVQ==",
+      "license": "MIT",
       "dependencies": {
         "vanjs-core": "^1.5.2"
       }
diff --git a/components/examples/tabs/package.json b/components/examples/tabs/package.json
index ed5ed33..c82b91a 100644
--- a/components/examples/tabs/package.json
+++ b/components/examples/tabs/package.json
@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }
diff --git a/components/examples/toggle/package-lock.json b/components/examples/toggle/package-lock.json
index 39ee0e0..5519446 100644
--- a/components/examples/toggle/package-lock.json
+++ b/components/examples/toggle/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "vanjs-core": "^1.5.2",
-        "vanjs-ui": "^0.11.4"
+        "vanjs-ui": "^0.11.5"
       },
       "devDependencies": {
         "terser": "^5.19.2",
@@ -635,9 +635,10 @@
       "integrity": "sha512-z9MHAzxYbNFJ6MYP+4j9l9KMxDU3ryI65JjIfUbGQwF1paLfiuqtIiq9Ve1UGKLd774Z7mtdWzd+/FR785dKjQ=="
     },
     "node_modules/vanjs-ui": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.4.tgz",
-      "integrity": "sha512-JoZfgvQ5PSO+8yU/mF9OyJfal8oOZ9h0K9aonUcsYBdHUw/BtIc0979wRIstBznK7rgTfrzCW+HjA2cTYJZBVQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.5.tgz",
+      "integrity": "sha512-yDFXi0hBZPG2VSQuTumUXSvGBU8gF6i08/yILCNtLDjo8I7QE1b7s1VyrF6nDy1F4IChypXKN7nV+9R+ZG7hVQ==",
+      "license": "MIT",
       "dependencies": {
         "vanjs-core": "^1.5.2"
       }
diff --git a/components/examples/toggle/package.json b/components/examples/toggle/package.json
index 7bf212f..b3dc545 100644
--- a/components/examples/toggle/package.json
+++ b/components/examples/toggle/package.json
@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }
diff --git a/components/examples/tooltip/package-lock.json b/components/examples/tooltip/package-lock.json
index 7afe25d..9124f46 100644
--- a/components/examples/tooltip/package-lock.json
+++ b/components/examples/tooltip/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "vanjs-core": "^1.5.2",
-        "vanjs-ui": "^0.11.4"
+        "vanjs-ui": "^0.11.5"
       },
       "devDependencies": {
         "terser": "^5.19.2",
@@ -635,9 +635,10 @@
       "integrity": "sha512-z9MHAzxYbNFJ6MYP+4j9l9KMxDU3ryI65JjIfUbGQwF1paLfiuqtIiq9Ve1UGKLd774Z7mtdWzd+/FR785dKjQ=="
     },
     "node_modules/vanjs-ui": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.4.tgz",
-      "integrity": "sha512-JoZfgvQ5PSO+8yU/mF9OyJfal8oOZ9h0K9aonUcsYBdHUw/BtIc0979wRIstBznK7rgTfrzCW+HjA2cTYJZBVQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.5.tgz",
+      "integrity": "sha512-yDFXi0hBZPG2VSQuTumUXSvGBU8gF6i08/yILCNtLDjo8I7QE1b7s1VyrF6nDy1F4IChypXKN7nV+9R+ZG7hVQ==",
+      "license": "MIT",
       "dependencies": {
         "vanjs-core": "^1.5.2"
       }
diff --git a/components/examples/tooltip/package.json b/components/examples/tooltip/package.json
index 83def3c..e3689a8 100644
--- a/components/examples/tooltip/package.json
+++ b/components/examples/tooltip/package.json
@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }
diff --git a/components/examples/window/package-lock.json b/components/examples/window/package-lock.json
index 04b6281..0711d9d 100644
--- a/components/examples/window/package-lock.json
+++ b/components/examples/window/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "vanjs-core": "^1.5.2",
-        "vanjs-ui": "^0.11.4"
+        "vanjs-ui": "^0.11.5"
       },
       "devDependencies": {
         "terser": "^5.19.2",
@@ -635,9 +635,10 @@
       "integrity": "sha512-z9MHAzxYbNFJ6MYP+4j9l9KMxDU3ryI65JjIfUbGQwF1paLfiuqtIiq9Ve1UGKLd774Z7mtdWzd+/FR785dKjQ=="
     },
     "node_modules/vanjs-ui": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.4.tgz",
-      "integrity": "sha512-JoZfgvQ5PSO+8yU/mF9OyJfal8oOZ9h0K9aonUcsYBdHUw/BtIc0979wRIstBznK7rgTfrzCW+HjA2cTYJZBVQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.5.tgz",
+      "integrity": "sha512-yDFXi0hBZPG2VSQuTumUXSvGBU8gF6i08/yILCNtLDjo8I7QE1b7s1VyrF6nDy1F4IChypXKN7nV+9R+ZG7hVQ==",
+      "license": "MIT",
       "dependencies": {
         "vanjs-core": "^1.5.2"
       }
@@ -1035,9 +1036,9 @@
       "integrity": "sha512-z9MHAzxYbNFJ6MYP+4j9l9KMxDU3ryI65JjIfUbGQwF1paLfiuqtIiq9Ve1UGKLd774Z7mtdWzd+/FR785dKjQ=="
     },
     "vanjs-ui": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.4.tgz",
-      "integrity": "sha512-JoZfgvQ5PSO+8yU/mF9OyJfal8oOZ9h0K9aonUcsYBdHUw/BtIc0979wRIstBznK7rgTfrzCW+HjA2cTYJZBVQ==",
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/vanjs-ui/-/vanjs-ui-0.11.5.tgz",
+      "integrity": "sha512-yDFXi0hBZPG2VSQuTumUXSvGBU8gF6i08/yILCNtLDjo8I7QE1b7s1VyrF6nDy1F4IChypXKN7nV+9R+ZG7hVQ==",
       "requires": {
         "vanjs-core": "^1.5.2"
       }
diff --git a/components/examples/window/package.json b/components/examples/window/package.json
index f3b2e2f..f24802e 100644
--- a/components/examples/window/package.json
+++ b/components/examples/window/package.json
@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "vanjs-core": "^1.5.2",
-    "vanjs-ui": "^0.11.4"
+    "vanjs-ui": "^0.11.5"
   }
 }
diff --git a/components/package-lock.json b/components/package-lock.json
index 514d770..882ed51 100644
--- a/components/package-lock.json
+++ b/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vanjs-ui",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vanjs-ui",
-      "version": "0.11.4",
+      "version": "0.11.5",
       "license": "MIT",
       "dependencies": {
         "vanjs-core": "^1.5.2"
diff --git a/components/package.json b/components/package.json
index 2a42aa2..516307b 100644
--- a/components/package.json
+++ b/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanjs-ui",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "description": "A collection of grab-n-go reusable UI components for VanJS",
   "files": [
     "dist/van-ui.js",
diff --git a/components/van-ui.ts b/components/van-ui.ts
index a0d346f..ccbc7c8 100644
--- a/components/van-ui.ts
+++ b/components/van-ui.ts
@@ -797,6 +797,7 @@ export interface ChooseProps {
   readonly options: readonly string[]
   readonly showTextFilter?: boolean
   readonly selectedColor?: string
+  readonly cyclicalNav?: boolean
 
   readonly customModalProps?: Omit<ModalProps, "closed">
   readonly textFilterClass?: string
@@ -815,6 +816,7 @@ export const choose = (
     options,
     showTextFilter = false,
     selectedColor = "#f5f5f5",
+    cyclicalNav = false,
     customModalProps = {},
     textFilterClass = "",
     textFilterStyleOverrides = {},
@@ -910,9 +912,9 @@ export const choose = (
       resolve(null)
       closed.val = true
     } else if (e.key === "ArrowDown")
-      index.val = index.val + 1 < filtered.val.length ? index.val + 1 : 0;
+      index.val = index.val + 1 < filtered.val.length ? index.val + 1 : (cyclicalNav ? 0 : index.val)
     else if (e.key === "ArrowUp")
-      index.val = index.val > 0 ? index.val - 1 : filtered.val.length - 1;
+      index.val = index.val > 0 ? index.val - 1 : (cyclicalNav ? filtered.val.length - 1 : index.val)
   }
   document.addEventListener("keydown", navByKey)
   van.derive(() => closed.val && document.removeEventListener("keydown", navByKey))