@a-type/ui 5.0.6 → 5.0.8

package/dist/css/main.css

@@ -6,7 +6,7 @@
  @font-face { font-family: "Inter"; src: url("https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype-variations"); font-weight: 1 999; font-style: oblique 0deg 5deg; font-display: block; } 
  @property --l-corner-scale { syntax: "*"; inherits: false; } @property --t-shadow-y-mult { syntax: "*"; inherits: false; } 
  @layer preflightBase { :root { --u-saturation: 0.5; --u-corner-scale: 1; --u-spacing-scale: 1; --u-border-scale: 1; --u-shadow-spread: 1; --u-c-primary-hue: 90.8; --u-c-accent-hue: 165.88; --u-c-lemon-hue: 90.8; --u-c-lemon-accent-hue: 165.88; --u-c-leek-hue: 165.88; --u-c-leek-accent-hue: 90.8; --u-c-tomato-hue: 10.51; --u-c-tomato-accent-hue: 165.88; --u-c-blueberry-hue: 248.14; --u-c-blueberry-accent-hue: 165.88; --u-c-eggplant-hue: 280.21; --u-c-eggplant-accent-hue: 165.88; --u-c-attention-hue: 30; --u-c-attention-accent-hue: 165.88; --u-c-success-hue: 140; --u-c-success-accent-hue: 165.88; } body, :host { font-size: 16px; } } 
- body { margin-bottom: env(virtual-keyboard-inset-bottom, 0px); } 
+ #root,#main { transform: translateY(calc(-1 * env(keyboard-inset-height,0px))); } 
 .outline-off{outline:none;}.unset{all:unset;}.container{width:100%;}.hidden-input{pointer-events:none;position:absolute;z-index:-1;opacity:0;}.bottom-keyboard{bottom:var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px));}.center{left:50%;top:50%;--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-translate-y:-50%;}.center-x{left:50%;--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.center-y{top:50%;--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.hidden-input::webkit-file-upload-button{display:none;}.body{min-height:100vh;color:var(--v-c,var(--v-c-i));--v-c-i:var(--p-high-contrast-shade-ink);--v-c-op:100%;background-color:var(--v-bg,var(--v-bg-l));--v-bg-l:var(--p-gray-shade-wash);--v-bg-op:100%;}.flex-0-0-auto{flex-shrink:0;flex-grow:0;flex-basis:auto;}.flex-1-0-0{flex-shrink:0;flex-grow:1;flex-basis:0px;}.border{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;}.border-default{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;--v-bd-c-i:var(--p-high-contrast-shade-ink);--v-bd-c-op:100%;}.border-light{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;--v-bd-c-i:var(--p-gray-shade-mid);--v-bd-c-op:100%;--v-bd-c:oklch(from var(--v-bd-c-i,currentColor) calc(l * (1 + 3 / 30 * -1 * var(--m-mult, 1))) calc(c * (1 - (3 * 0.1 * -1 * (1 + (1 - var(--u-saturation, 0)))))) h);}:where(.border-default),:where(.border-light){--v-bd-r-c-i:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-right-color:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-l-c-i:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-left-color:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-t-c-i:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-top-color:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-b-c-i:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-bottom-color:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));}@layer components{.layer-components\:\[\&\[data-focus\=true\]\]\:outline-off[data-focus=true]{outline:none;}.layer-components\:unset{all:unset;}.layer-components\:focus\:outline-off:focus{outline:none;}.layer-components\:focus-visible\:outline-off:focus-visible{outline:none;}.col{display:flex;flex-direction:column;align-items:center;gap:calc(0.5rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.row{display:flex;flex-direction:row;align-items:center;gap:calc(0.5rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.layer-components\:border{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;}.layer-components\:border-default,.layer-components\:data-\[pressed\]\:border-default[data-pressed]{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;--v-bd-c-i:var(--p-high-contrast-shade-ink);--v-bd-c-op:100%;}.layer-components\:data-\[pressed\]\:hover\:border-default:hover[data-pressed]{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;--v-bd-c-i:var(--p-high-contrast-shade-ink);--v-bd-c-op:100%;}.layer-components\:focus-visible\:border:focus-visible{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;}:where(.layer-components\:border-default),:where(.layer-components\:data-\[pressed\]\:border-default)[data-pressed]{--v-bd-r-c-i:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-right-color:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-l-c-i:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-left-color:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-t-c-i:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-top-color:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-b-c-i:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-bottom-color:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));}:where(.layer-components\:data-\[pressed\]\:hover\:border-default):hover[data-pressed]{--v-bd-r-c-i:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-right-color:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-l-c-i:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-left-color:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-t-c-i:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-top-color:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-b-c-i:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-bottom-color:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));}}@layer composed{.layer-composed\:border{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;}.layer-composed\:border-light{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;--v-bd-c-i:var(--p-gray-shade-mid);--v-bd-c-op:100%;--v-bd-c:oklch(from var(--v-bd-c-i,currentColor) calc(l * (1 + 3 / 30 * -1 * var(--m-mult, 1))) calc(c * (1 - (3 * 0.1 * -1 * (1 + (1 - var(--u-saturation, 0)))))) h);}:where(.layer-composed\:border-light){--v-bd-r-c-i:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-right-color:var(--v-bd-r-c,var(--v-bd-r-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-l-c-i:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-left-color:var(--v-bd-l-c,var(--v-bd-l-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-t-c-i:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-top-color:var(--v-bd-t-c,var(--v-bd-t-c-i,var(--v-bd-c,var(--v-bd-c-i))));--v-bd-b-c-i:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));border-bottom-color:var(--v-bd-b-c,var(--v-bd-b-c-i,var(--v-bd-c,var(--v-bd-c-i))));}}@layer primitives{.layer-primitives\:border{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;}}@layer variants{.layer-variants\:border{border-width:calc(1px * var(--u-border-scale,1));border-style:solid;}}@media (min-width: 640px){.container{max-width:640px;}}@media (min-width: 768px){.container{max-width:768px;}}@media (min-width: 1024px){.container{max-width:1024px;}}@media (min-width: 1280px){.container{max-width:1280px;}}@media (min-width: 1536px){.container{max-width:1536px;}}.\[--gap\:0\.75rem\]{--gap:0.75rem;}.\[--height\:var\(--toast-frontmost-height\,var\(--toast-height\)\)\]{--height:var(--toast-frontmost-height,var(--toast-height));}.\[--offset-y\:calc\(var\(--toast-offset-y\)\+calc\(var\(--toast-index\)\*var\(--gap\)\)\+var\(--toast-swipe-movement-y\)\)\]{--offset-y:calc(var(--toast-offset-y) + calc(var(--toast-index) * var(--gap)) + var(--toast-swipe-movement-y));}.\[--peek\:0\.75rem\]{--peek:0.75rem;}.\[--scale\:calc\(max\(0\,1-\(var\(--toast-index\)\*0\.1\)\)\)\]{--scale:calc(max(0,1 - (var(--toast-index) * 0.1)));}.\[--shrink\:calc\(1-var\(--scale\)\)\]{--shrink:calc(1 - var(--scale));}.\[all\:unset\]{all:unset;}.\[background-size\:400\%_400\%\]{background-size:400% 400%;}.\[grid-area\:content\]{grid-area:content;}.\[grid-area\:leftGrid\]{grid-area:leftGrid;}.\[grid-area\:leftMonth\]{grid-area:leftMonth;}.\[grid-area\:nextMonth\]{grid-area:nextMonth;}.\[grid-area\:prevMonth\]{grid-area:prevMonth;}.\[grid-area\:rightGrid\]{grid-area:rightGrid;}.\[grid-area\:rightMonth\]{grid-area:rightMonth;}.\[justify-self\:anchor-center\]{justify-self:anchor-center;}.\[outline\:none\]{outline:none;}.\[stroke-dasharray\:80_200\]{stroke-dasharray:80 200;}.\[stroke-dashoffset\:0\]{stroke-dashoffset:0;}.\[transition-duration\:250ms\]{transition-duration:250ms;}.\[transition\:transform_0\.5s_cubic-bezier\(0\.22\,1\,0\.36\,1\)\,opacity_0\.5s\,height_0\.15s\]{transition:transform 0.5s cubic-bezier(0.22,1,0.36,1),opacity 0.5s,height 0.15s;}.contain-strict{contain:strict;}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}.pointer-events-auto{pointer-events:auto;}.\!pointer-events-none{pointer-events:none !important;}.\[\&\[data-behind\]\:not\(\[data-expanded\]\)\]\:pointer-events-none[data-behind]:not([data-expanded]),.pointer-events-none{pointer-events:none;}.\!visible{visibility:visible !important;}.visible{visibility:visible;}[data-behind]:not([data-expanded]) .\[\[data-behind\]\:not\(\[data-expanded\]\)_\&\]\:invisible{visibility:hidden;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.sticky{position:sticky;}.after\:absolute::after{position:absolute;}.static{position:static;}.inset-0{inset:0px;}.after\:inset-0::after{inset:0px;}.bottom-\[anchor\(bottom\)\]{bottom:anchor(bottom);}.bottom-\[var\(--mock-virtual-keyboard-height\,env\(keyboard-inset-height\,0px\)\)\]{bottom:var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px));}.bottom-0{bottom:0px;}.bottom-0px{bottom:0;}.bottom-2{bottom:0.5rem;}.bottom-3{bottom:0.75rem;}.left-\[anchor\(left\)\]{left:anchor(left);}.left-\[anchor\(right\)\]{left:anchor(right);}.left-0{left:0px;}.left-1\/2{left:50%;}.left-2{left:0.5rem;}.left-auto{left:auto;}.right-\[anchor\(right\)\]{right:anchor(right);}.right-0{right:0px;}.right-2{right:0.5rem;}.right-md{right:calc(1rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.right-sm{right:calc(0.5rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.top-\[anchor\(bottom\)\]{top:anchor(bottom);}.top-0{top:0px;}.top-1\/2{top:50%;}.top-1px{top:1px;}.top-2{top:0.5rem;}.top-2px{top:2px;}.top-auto{top:auto;}.top-md{top:calc(1rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.top-sm{top:calc(0.5rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.top-xs{top:calc(0.25rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.after\:left-0::after{left:0px;}.after\:top-auto::after{top:auto;}.after\:top-full::after{top:100%;}.isolate{isolation:isolate;}.z--1{z-index:-1;}.z-\[1000000\]{z-index:1000000;}.z-\[calc\(100000-var\(--toast-index\)\)\]{z-index:calc(100000 - var(--toast-index));}.z-1{z-index:1;}.z-1000{z-index:1000;}.z-10000{z-index:10000;}.z-10001{z-index:10001;}.z-101{z-index:101;}.grid{display:grid;}.col-span-2,.grid-col-span-2{grid-column:span 2/span 2;}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr));}.m-0{margin:0px;}.m-1{margin:0.25rem;}.m-auto{margin:auto;}.m5\.87{margin:1.4675rem;}.my-4{margin-top:1rem;margin-bottom:1rem;}.my-auto{margin-top:auto;margin-bottom:auto;}.mb-1{margin-bottom:0.25rem;}.mb-auto{margin-bottom:auto;}.mb-sm{margin-bottom:calc(0.5rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.me{margin-inline-end:1rem;}.ml-auto{margin-left:auto;}.ml-md{margin-left:calc(1rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.ml-sm{margin-left:calc(0.5rem * var(--l-spacing-scale,1) * var(--u-spacing-scale,1));}.mr-0{margin-right:0px;}.mr-1{margin-right:0.25rem;}.mr-auto{margin-right:auto;}.mt-200px{margin-top:200px;}.mt-auto{margin-top:auto;}.inline{display:inline;}.block{display:block;}.inline-block{display:inline-block;}.\!hidden{display:none !important;}.\[\&\:\:webkit-file-upload-button\]\:hidden::webkit-file-upload-button,.hidden,[data-has-icon=true] .\[\[data-has-icon\=true\]_\&\]\:hidden{display:none;}.aspect-\[9\/16\]{aspect-ratio:9/16;}.aspect-1{aspect-ratio:1;}.\[\&\[data-state\=closed\]\]\:max-h-\[var\(--peek-height\,120px\)\][data-state=closed]{max-height:var(--peek-height,120px);}.data-\[both\]\:h-\[--collapsible-panel-height\][data-both],.data-\[vertical\]\:h-\[--collapsible-panel-height\][data-vertical]{height:var(--collapsible-panel-height);}.data-\[both\]\:w-\[--collapsible-panel-width\][data-both],.data-\[horizontal\]\:w-\[--collapsible-panel-width\][data-horizontal]{width:var(--collapsible-panel-width);}.data-\[expanded\]\:h-\[--toast-height\][data-expanded]{height:var(--toast-height);}.h-\[--height\]{height:var(--height);}.h-\[100vh\],.h-screen{height:100vh;}.h-\[12px\]{height:12px;}.h-\[var\(--mock-virtual-keyboard-height\,0\)\]{height:var(--mock-virtual-keyboard-height,0);}.h-100px{height:100px;}.h-16{height:4rem;}.h-16px{height:16px;}.h-1em{height:1em;}.h-1px{height:1px;}.h-200px{height:200px;}.h-240px{height:240px;}.h-24px{height:24px;}.h-300px{height:300px;}.h-32{height:8rem;}.h-600px{height:600px;}.h-64{height:16rem;}.h-80px{height:80px;}.h-full{height:100%;}.h-touch{height:30px;}.h1{height:0.25rem;}.h2{height:0.5rem;}.h3{height:0.75rem;}.h4{height:1rem;}.h5{height:1.25rem;}.max-h-200px{max-height:200px;}.max-h-20vh{max-height:20vh;}.max-h-full{max-height:100%;}.max-w-300px{max-width:300px;}.max-w-full{max-width:100%;}.max-w-sm{max-width:24rem;}.min-h-0{min-height:0;}.min-h-18px{min-height:18px;}.min-h-200px{min-height:200px;}.min-h-20vh{min-height:20vh;}.min-h-32px{min-height:32px;}.min-h-80px{min-height:80px;}.min-h-80vh{min-height:80vh;}.min-h-screen{min-height:100vh;}.min-w-0{min-width:0;}.min-w-32px{min-width:32px;}.min-w-80px{min-width:80px;}.start-end\:data-\[both\]\:h-0[data-both][data-starting-style], .start-end\:data-\[both\]\:h-0[data-both][data-ending-style],.start-end\:data-\[vertical\]\:h-0[data-vertical][data-starting-style], .start-end\:data-\[vertical\]\:h-0[data-vertical][data-ending-style]{height:0;}.start-end\:data-\[both\]\:w-0[data-both][data-starting-style], .start-end\:data-\[both\]\:w-0[data-both][data-ending-style],.start-end\:data-\[horizontal\]\:w-0[data-horizontal][data-starting-style], .start-end\:data-\[horizontal\]\:w-0[data-horizontal][data-ending-style],.w-0{width:0;}.w-\[12px\]{width:12px;}.w-\[200px\]{width:200px;}.w-10000px{width:10000px;}.w-16{width:4rem;}.w-16px{width:16px;}.w-1em{width:1em;}.w-24px{width:24px;}.w-300px{width:300px;}.w-400px{width:400px;}.w-64{width:16rem;}.w-800px{width:800px;}.w-80px{width:80px;}.w-95vw{width:95vw;}.w-full{width:100%;}.w-max-content{width:max-content;}.w-touch{width:30px;}[data-behind]:not([data-expanded]) .\[\[data-behind\]\:not\(\[data-expanded\]\)_\&\]\:max-h-\[--height\]{max-height:var(--height);}.after\:h-\[calc\(var\(--gap\)\+1px\)\]::after{height:calc(var(--gap) + 1px);}.after\:h-80px::after{height:80px;}.after\:w-full::after{width:100%;}.flex{display:flex;}.after\:flex::after{display:flex;}.inline-flex{display:inline-flex;}.flex-1{flex:1 1 0%;}.flex-shrink-0,.shrink-0{flex-shrink:0;}.flex-grow,.flex-grow-1,.grow{flex-grow:1;}.flex-grow-0{flex-grow:0;}.flex-basis-0{flex-basis:0px;}.flex-basis-auto{flex-basis:auto;}.flex-row{flex-direction:row;}.flex-col{flex-direction:column;}.after\:flex-col::after{flex-direction:column;}.flex-wrap{flex-wrap:wrap;}.table{display:table;}.origin-top{transform-origin:top;}.transform-origin-\[--transform-origin\]{transform-origin:var(--transform-origin);}.transform-origin-\[50\%_50\%\]{transform-origin:50% 50%;}.-translate-x-1\/2,.translate-x--1\/2{--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.\[\&\[data-ending-style\]\:not\(\[data-limited\]\)\:not\(\[data-swipe-direction\]\)\]\:-translate-y-150\%[data-ending-style]:not([data-limited]):not([data-swipe-direction]),.data-\[starting-style\]\:-translate-y-150\%[data-starting-style]{--un-translate-y:-150%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[ending-style\]\:data-\[swipe-direction\=down\]\:translate-y-\[calc\(var\(--toast-swipe-movement-y\)\+150\%\)\][data-swipe-direction=down][data-ending-style],.data-\[expanded\]\:data-\[ending-style\]\:data-\[swipe-direction\=down\]\:translate-y-\[calc\(var\(--toast-swipe-movement-y\)\+150\%\)\][data-swipe-direction=down][data-ending-style][data-expanded]{--un-translate-y:calc(var(--toast-swipe-movement-y) + 150%);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[ending-style\]\:data-\[swipe-direction\=left\]\:translate-x-\[calc\(var\(--toast-swipe-movement-x\)-150\%\)\][data-swipe-direction=left][data-ending-style],.data-\[expanded\]\:data-\[ending-style\]\:data-\[swipe-direction\=left\]\:translate-x-\[calc\(var\(--toast-swipe-movement-x\)-150\%\)\][data-swipe-direction=left][data-ending-style][data-expanded]{--un-translate-x:calc(var(--toast-swipe-movement-x) - 150%);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[ending-style\]\:data-\[swipe-direction\=left\]\:translate-y-\[var\(--offset-y\)\][data-swipe-direction=left][data-ending-style],.data-\[ending-style\]\:data-\[swipe-direction\=right\]\:translate-y-\[var\(--offset-y\)\][data-swipe-direction=right][data-ending-style],.data-\[expanded\]\:data-\[ending-style\]\:data-\[swipe-direction\=left\]\:translate-y-\[var\(--offset-y\)\][data-swipe-direction=left][data-ending-style][data-expanded],.data-\[expanded\]\:data-\[ending-style\]\:data-\[swipe-direction\=right\]\:translate-y-\[var\(--offset-y\)\][data-swipe-direction=right][data-ending-style][data-expanded],.data-\[expanded\]\:translate-y-\[--offset-y\][data-expanded]{--un-translate-y:var(--offset-y);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[ending-style\]\:data-\[swipe-direction\=right\]\:translate-x-\[calc\(var\(--toast-swipe-movement-x\)\+150\%\)\][data-swipe-direction=right][data-ending-style],.data-\[expanded\]\:data-\[ending-style\]\:data-\[swipe-direction\=right\]\:translate-x-\[calc\(var\(--toast-swipe-movement-x\)\+150\%\)\][data-swipe-direction=right][data-ending-style][data-expanded]{--un-translate-x:calc(var(--toast-swipe-movement-x) + 150%);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[ending-style\]\:data-\[swipe-direction\=up\]\:translate-y-\[calc\(var\(--toast-swipe-movement-y\)-150\%\)\][data-swipe-direction=up][data-ending-style],.data-\[expanded\]\:data-\[ending-style\]\:data-\[swipe-direction\=up\]\:translate-y-\[calc\(var\(--toast-swipe-movement-y\)-150\%\)\][data-swipe-direction=up][data-ending-style][data-expanded]{--un-translate-y:calc(var(--toast-swipe-movement-y) - 150%);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[expanded\]\:translate-x-\[--toast-swipe-movement-x\][data-expanded],.translate-x-\[--toast-swipe-movement-x\]{--un-translate-x:var(--toast-swipe-movement-x);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.translate-y--1\/2{--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.translate-y-\[calc\(var\(--toast-swipe-movement-y\)\+\(var\(--toast-index\)\*var\(--peek\)\)\+\(var\(--shrink\)\*var\(--height\)\)\)\]{--un-translate-y:calc(var(--toast-swipe-movement-y) + (var(--toast-index) * var(--peek)) + (var(--shrink) * var(--height)));transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.rotate-90{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:90deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.\[\&\[data-ending-style\]\:not\(\[data-limited\]\)\:not\(\[data-swipe-direction\]\)\]\:scale-90[data-ending-style]:not([data-limited]):not([data-swipe-direction]){--un-scale-x:0.9;--un-scale-y:0.9;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.data-\[expanded\]\:scale-100[data-expanded]{--un-scale-x:1;--un-scale-y:1;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.scale-\[var\(--scale\)\]{--un-scale-x:var(--scale);--un-scale-y:var(--scale);transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.transform-gpu{transform:translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}@keyframes peek-close{
 						from { height: calc(var(--collapsible-height) + 80px); max-height: none; }
 						to { height: min(var(--peek-height, 120px), var(--collapsible-height)); max-height: var(--peek-height, 120px); }

package/dist/esm/components/provider/Provider.js

@@ -1,7 +1,7 @@
 // @unocss-include
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
-import { useThemedTitleBar, useVisualViewportOffset } from '../../hooks.js';
+import { useThemedTitleBar, useVirtualKeyboardFocusBehavior, useVisualViewportOffset, } from '../../hooks.js';
 import { useVirtualKeyboardBehavior } from '../../hooks/useVirtualKeyboardBehavior.js';
 import { IconSpritesheet } from '../icon/index.js';
 import { ParticleLayer } from '../particles/index.js';
@@ -13,6 +13,7 @@ import { TooltipProvider } from '../tooltip/index.js';
  */
 export function Provider({ children, disableParticles, disableViewportOffset, virtualKeyboardBehavior = 'displace', disableTitleBarColor, manifestPath, }) {
     useVisualViewportOffset(disableViewportOffset);
+    useVirtualKeyboardFocusBehavior();
     const supportedVirtualKeyboardBehavior = typeof navigator !== 'undefined' && 'virtualKeyboard' in navigator
         ? virtualKeyboardBehavior
         : 'displace';

package/dist/esm/components/provider/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAWtD;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,EACpC,oBAAoB,EACpB,YAAY,GACG;IACf,uBAAuB,CAAC,qBAAqB,CAAC,CAAC;IAC/C,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,0BAA0B,CAAC,gCAAgC,CAAC,CAAC;IAC7D,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,CAClB,8BACC,KAAC,eAAe,KAAG,EACnB,KAAC,OAAO,KAAG,EACX,KAAC,UAAU,IAAC,YAAY,EAAE,YAAY,GAAI,IACxC,CACH,CAAC;IAEF,IAAI,gBAAgB;QACnB,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,MAAC,eAAe,eACd,QAAQ,EACR,UAAU,IACM,GACI,GACC,CACzB,CAAC;IAEH,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,KAAC,eAAe,cACf,MAAC,aAAa,eACZ,QAAQ,EACR,UAAU,IACI,GACC,GACI,GACC,CACzB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAEvC;IACF,uBAAuB,EAAE,UAAU;CACnC,CAAC,CAAC;AAEH,MAAM,UAAU,SAAS;IACxB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AAClC,CAAC"}
+{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EACN,iBAAiB,EACjB,+BAA+B,EAC/B,uBAAuB,GACvB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAWtD;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,EACpC,oBAAoB,EACpB,YAAY,GACG;IACf,uBAAuB,CAAC,qBAAqB,CAAC,CAAC;IAC/C,+BAA+B,EAAE,CAAC;IAClC,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,0BAA0B,CAAC,gCAAgC,CAAC,CAAC;IAC7D,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,CAClB,8BACC,KAAC,eAAe,KAAG,EACnB,KAAC,OAAO,KAAG,EACX,KAAC,UAAU,IAAC,YAAY,EAAE,YAAY,GAAI,IACxC,CACH,CAAC;IAEF,IAAI,gBAAgB;QACnB,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,MAAC,eAAe,eACd,QAAQ,EACR,UAAU,IACM,GACI,GACC,CACzB,CAAC;IAEH,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,KAAC,eAAe,cACf,MAAC,aAAa,eACZ,QAAQ,EACR,UAAU,IACI,GACC,GACI,GACC,CACzB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAEvC;IACF,uBAAuB,EAAE,UAAU;CACnC,CAAC,CAAC;AAEH,MAAM,UAAU,SAAS;IACxB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AAClC,CAAC"}

package/dist/esm/hooks/useVisualViewportOffset.js

@@ -149,11 +149,17 @@ export function useVirtualKeyboardFocusBehavior({ focusElementTypes = ['input',
         const virtualKeyboard = navigator.virtualKeyboard;
         const matchElements = stableFocusElementTypes.split(',');
         function update() {
-            // const open = virtualKeyboard.boundingRect.height > 0;
+            const open = virtualKeyboard.boundingRect.height > 0;
+            if (open) {
+                console.log('keyboard opened');
+            }
             const activeElement = document.activeElement;
             if (activeElement &&
                 matchElements.includes(activeElement.tagName.toLowerCase())) {
-                activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                setTimeout(() => {
+                    console.log('scroll focused element');
+                    activeElement.scrollIntoView(true);
+                }, 10);
             }
         }
         virtualKeyboard.addEventListener('geometrychange', update);

package/dist/esm/hooks/useVisualViewportOffset.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVisualViewportOffset.js","sourceRoot":"","sources":["../../../src/hooks/useVisualViewportOffset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D;;GAEG;AACH,MAAM,UAAU,uBAAuB,CAAC,OAAiB;IACxD,yBAAyB,CACxB,CAAC,QAAQ,EAAE,EAAE;QACZ,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,0BAA0B,EAC1B,GAAG,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,SAAS,IAAI,CAChE,CAAC;QACF,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,mBAAmB,EACnB,GAAG,QAAQ,CAAC,MAAM,IAAI,CACtB,CAAC;QACF,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,kBAAkB,EAClB,GAAG,QAAQ,CAAC,KAAK,IAAI,CACrB,CAAC;QACF,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,uBAAuB,EACvB,GAAG,QAAQ,CAAC,SAAS,IAAI,CACzB,CAAC;QACF,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,wBAAwB,EACxB,GAAG,QAAQ,CAAC,UAAU,IAAI,CAC1B,CAAC;QACF,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACzC,iBAAiB,EACjB,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAChD,CAAC;IACH,CAAC,EACD,OAAO,IAAI,OAAO,MAAM,KAAK,WAAW,CACxC,CAAC;AACH,CAAC;AAED,MAAM,UAAU,iBAAiB;IAChC,MAAM,EAAE,uBAAuB,EAAE,GAAG,SAAS,EAAE,CAAC;IAEhD,qBAAqB;IACrB,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1E,yBAAyB,CAAC,CAAC,QAAQ,EAAE,EAAE;QACtC,yEAAyE;QACzE,wBAAwB,CACvB,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,GAAG,CACpD,CAAC;IACH,CAAC,EAAE,uBAAuB,KAAK,UAAU,CAAC,CAAC;IAE3C,qBAAqB;IACrB,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAE9D,SAAS,CAAC,CAAC;IACb,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YACnC,OAAO;QACR,CAAC;QACD,SAAS,UAAU;YAClB,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC;QACD,MAAM,CAAC,gBAAgB,CAAC,wBAAwB,EAAE,UAAU,CAAC,CAAC;QAC9D,SAAS,WAAW;YACnB,uBAAuB,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;QACD,MAAM,CAAC,gBAAgB,CAAC,yBAAyB,EAAE,WAAW,CAAC,CAAC;QAChE,OAAO,GAAG,EAAE;YACX,MAAM,CAAC,mBAAmB,CAAC,wBAAwB,EAAE,UAAU,CAAC,CAAC;YACjE,MAAM,CAAC,mBAAmB,CAAC,yBAAyB,EAAE,WAAW,CAAC,CAAC;QACpE,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uBAAuB;IACvB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,OAAO,SAAS,KAAK,WAAW,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YACvE,OAAO;QACR,CAAC;QACD,IAAI,CAAC,CAAC,iBAAiB,IAAI,SAAS,CAAC,EAAE,CAAC;YACvC,aAAa;YACb,OAAO,CAAC,IAAI,CACX,uGAAuG,CACvG,CAAC;YACF,OAAO;QACR,CAAC;QACD,MAAM,eAAe,GAAG,SAAS,CAAC,eAAsB,CAAC;QACzD,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,iBAAiB,CAAC,eAAe,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC5D,CAAC,CAAC;QACF,MAAM,EAAE,CAAC;QACT,eAAe,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACX,eAAe,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QAC/D,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,oBAAoB,KAAK,SAAS,EAAE,CAAC;QACxC,OAAO,oBAAoB,CAAC;IAC7B,CAAC;IAED,IAAI,uBAAuB,KAAK,UAAU,EAAE,CAAC;QAC5C,OAAO,qBAAqB,CAAC;IAC9B,CAAC;IAED,OAAO,cAAc,CAAC;AACvB,CAAC;AAED,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,MAAc,CAAC,oBAAoB,GAAG,GAAG,EAAE;QAC3C,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC;IAC3D,CAAC,CAAC;IAED,MAAc,CAAC,qBAAqB,GAAG,GAAG,EAAE;QAC5C,MAAM,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC;IAC5D,CAAC,CAAC;AACH,CAAC;AAED,SAAS,yBAAyB,CACjC,EAAsC,EACtC,OAAiB;IAEjB,MAAM,QAAQ,GAAG,iBAAiB,CAAC,EAAE,CAAC,CAAC;IACvC,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,OAAO;YAAE,OAAO;QACpB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YACnC,OAAO;QACR,CAAC;QAED,MAAM,QAAQ,GAAG,MAAM,CAAC,cAAc,CAAC;QACvC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACf,OAAO;QACR,CAAC;QAED,MAAM,MAAM,GAAG,GAAG,EAAE;YACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACpB,CAAC,CAAC;QAEF,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,IAAI,SAA6B,CAAC;QAClC,IAAI,UAAU,GAAG,CAAC,CAAC;QAEnB,wBAAwB;QACxB,MAAM,EAAE,CAAC;QACT,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAExB,MAAM,eAAe,GAAG,GAAG,EAAE;YAC5B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACvB,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC;YAE5C,IAAI,SAAS,IAAI,CAAC,EAAE,CAAC;gBACpB,IAAI,SAAS,EAAE,CAAC;oBACf,YAAY,CAAC,SAAS,CAAC,CAAC;oBACxB,SAAS,GAAG,SAAS,CAAC;gBACvB,CAAC;gBACD,UAAU,GAAG,GAAG,CAAC;gBACjB,MAAM,EAAE,CAAC;YACV,CAAC;iBAAM,IAAI,CAAC,SAAS,EAAE,CAAC;gBACvB,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBAClC,SAAS,GAAG,SAAS,CAAC;oBACtB,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;oBACxB,MAAM,EAAE,CAAC;gBACV,CAAC,EAAE,SAAS,CAAC,CAAC;YACf,CAAC;QACF,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACtE,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC5C,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAExE,OAAO,GAAG,EAAE;YACX,IAAI,SAAS,EAAE,CAAC;gBACf,YAAY,CAAC,SAAS,CAAC,CAAC;gBACxB,SAAS,GAAG,SAAS,CAAC;YACvB,CAAC;YACD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;YACtD,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAC/C,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;QACzD,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AACzB,CAAC;AAKD,MAAM,UAAU,+BAA+B,CAAC,EAC/C,iBAAiB,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,MACnB,EAAE;IAClC,MAAM,uBAAuB,GAAG,iBAAiB;SAC/C,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;SACjC,IAAI,CAAC,GAAG,CAAC,CAAC;IACZ,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,OAAO,SAAS,KAAK,WAAW,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YACvE,OAAO;QACR,CAAC;QAED,IAAI,CAAC,CAAC,iBAAiB,IAAI,SAAS,CAAC,EAAE,CAAC;YACvC,aAAa;YACb,OAAO,CAAC,IAAI,CACX,uGAAuG,CACvG,CAAC;YACF,OAAO;QACR,CAAC;QAED,MAAM,eAAe,GAAG,SAAS,CAAC,eAAsB,CAAC;QAEzD,MAAM,aAAa,GAAG,uBAAuB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEzD,SAAS,MAAM;YACd,wDAAwD;YACxD,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC;YAC7C,IACC,aAAa;gBACb,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,EAC1D,CAAC;gBACF,aAAa,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;YACvE,CAAC;QACF,CAAC;QAED,eAAe,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACX,eAAe,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QAC/D,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;AAC/B,CAAC"}
+{"version":3,"file":"useVisualViewportOffset.js","sourceRoot":"","sources":["../../../src/hooks/useVisualViewportOffset.ts"],"names":[],"mappings":"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"}

package/dist/esm/keyboard.stories.js

@@ -1,6 +1,6 @@
 // @unocss-include
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Input, TextArea } from './components/index.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, PageContent, PageNowPlaying, PageRoot, TextArea, } from './components/index.js';
 import { useVirtualKeyboardBehavior } from './hooks/useVirtualKeyboardBehavior.js';
 const meta = {
     title: 'Virtual Keyboard Test',
@@ -14,7 +14,7 @@ export default meta;
 export const Default = {
     render(args) {
         useVirtualKeyboardBehavior('overlay');
-        return (_jsx(_Fragment, { children: _jsxs("div", { className: "h-screen flex flex-col", children: [_jsx("div", { className: "flex flex-grow flex-col items-center justify-center p-lg", children: "Focus the inputs below to see how the virtual keyboard behavior works." }), _jsx(Input, { className: "w-full" }), _jsx(TextArea, { className: "w-full" })] }) }));
+        return (_jsx(PageRoot, { id: "root", children: _jsxs(PageContent, { children: [_jsxs("div", { className: "h-screen flex flex-col", children: [_jsx("div", { className: "flex flex-grow flex-col items-center justify-center p-lg", children: "Focus the inputs below to see how the virtual keyboard behavior works." }), _jsx(Input, { className: "w-full" }), _jsx(TextArea, { className: "w-full" })] }), _jsx(PageNowPlaying, { keepAboveKeyboard: true, children: _jsx(Input, { placeholder: "now playing" }) })] }) }));
     },
 };
 //# sourceMappingURL=keyboard.stories.js.map

package/dist/esm/keyboard.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.stories.js","sourceRoot":"","sources":["../../src/keyboard.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC;AAEnF,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC7B,MAAM,EAAE,YAAY;KACpB;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,0BAA0B,CAAC,SAAS,CAAC,CAAC;QACtC,OAAO,CACN,4BACC,eAAK,SAAS,EAAC,wBAAwB,aACtC,cAAK,SAAS,EAAC,0DAA0D,uFAGnE,EACN,KAAC,KAAK,IAAC,SAAS,EAAC,QAAQ,GAAG,EAC5B,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,IAC1B,GACJ,CACH,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"keyboard.stories.js","sourceRoot":"","sources":["../../src/keyboard.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACN,KAAK,EACL,WAAW,EACX,cAAc,EACd,QAAQ,EACR,QAAQ,GACR,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,uCAAuC,CAAC;AAEnF,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC7B,MAAM,EAAE,YAAY;KACpB;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,0BAA0B,CAAC,SAAS,CAAC,CAAC;QACtC,OAAO,CACN,KAAC,QAAQ,IAAC,EAAE,EAAC,MAAM,YAClB,MAAC,WAAW,eACX,eAAK,SAAS,EAAC,wBAAwB,aACtC,cAAK,SAAS,EAAC,0DAA0D,uFAGnE,EACN,KAAC,KAAK,IAAC,SAAS,EAAC,QAAQ,GAAG,EAC5B,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,IAC1B,EACN,KAAC,cAAc,IAAC,iBAAiB,kBAChC,KAAC,KAAK,IAAC,WAAW,EAAC,aAAa,GAAG,GACnB,IACJ,GACJ,CACX,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/esm/uno/preflights/index.d.ts

@@ -2,6 +2,7 @@ import { Preflight } from 'unocss';
 import { ColorPreflightOptions } from './colors.js';
 import { FontsPreflightOptions } from './fonts.js';
 import { GlobalsPreflightConfig } from './globals.js';
+import { KeyboardPreflightOptions } from './keyboard.js';
 import { UserPreflightOptions } from './user.js';
-export type PreflightConfig = FontsPreflightOptions & GlobalsPreflightConfig & UserPreflightOptions & ColorPreflightOptions;
+export type PreflightConfig = FontsPreflightOptions & GlobalsPreflightConfig & UserPreflightOptions & ColorPreflightOptions & KeyboardPreflightOptions;
 export declare const preflights: (config: PreflightConfig) => Preflight<any>[];

package/dist/esm/uno/preflights/index.js

@@ -17,6 +17,6 @@ export const preflights = (config) => [
     fontsPreflight(config),
     propertiesPreflight,
     userPreflight(config),
-    keyboardPreflight,
+    keyboardPreflight(config),
 ];
 //# sourceMappingURL=index.js.map

package/dist/esm/uno/preflights/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/uno/preflights/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAyB,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,cAAc,EAAyB,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,eAAe,EAA0B,MAAM,cAAc,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAwB,MAAM,WAAW,CAAC;AAOhE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAuB,EAAoB,EAAE,CAAC;IACxE,cAAc;IACd,aAAa;IACb,eAAe,CAAC,MAAM,CAAC;IACvB,cAAc,CAAC,MAAM,CAAC;IACtB,aAAa,CAAC,MAAM,CAAC;IACrB,cAAc,CAAC,MAAM,CAAC;IACtB,mBAAmB;IACnB,aAAa,CAAC,MAAM,CAAC;IACrB,iBAAiB;CACjB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/uno/preflights/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAyB,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,cAAc,EAAyB,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,eAAe,EAA0B,MAAM,cAAc,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAA4B,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAwB,MAAM,WAAW,CAAC;AAQhE,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAuB,EAAoB,EAAE,CAAC;IACxE,cAAc;IACd,aAAa;IACb,eAAe,CAAC,MAAM,CAAC;IACvB,cAAc,CAAC,MAAM,CAAC;IACtB,aAAa,CAAC,MAAM,CAAC;IACrB,cAAc,CAAC,MAAM,CAAC;IACtB,mBAAmB;IACnB,aAAa,CAAC,MAAM,CAAC;IACrB,iBAAiB,CAAC,MAAM,CAAC;CACzB,CAAC"}

package/dist/esm/uno/preflights/keyboard.d.ts

@@ -1 +1,4 @@
-export declare const keyboardPreflight: import("unocss").Preflight<object>;
+export interface KeyboardPreflightOptions {
+    rootSelector?: string;
+}
+export declare const keyboardPreflight: ({ rootSelector, }: KeyboardPreflightOptions) => import("unocss").Preflight<object>;

package/dist/esm/uno/preflights/keyboard.js

@@ -1,12 +1,12 @@
 // @unocss-include
 import { preflight } from './_util.js';
-export const keyboardPreflight = preflight({
+export const keyboardPreflight = ({ rootSelector = '#root,#main', }) => preflight({
     getCSS: () => 
     // add space to bottom of body equal to virtual keyboard inset so that
     // content is not hidden behind the keyboard
     `
-	body {
-		margin-bottom: env(virtual-keyboard-inset-bottom, 0px);
+	${rootSelector} {
+		transform: translateY(calc(-1 * env(keyboard-inset-height,0px)));
 	}
 `,
 });

package/dist/esm/uno/preflights/keyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.js","sourceRoot":"","sources":["../../../../src/uno/preflights/keyboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC;IAC1C,MAAM,EAAE,GAAG,EAAE;IACZ,sEAAsE;IACtE,4CAA4C;IAC5C;;;;CAID;CACA,CAAC,CAAC"}
+{"version":3,"file":"keyboard.js","sourceRoot":"","sources":["../../../../src/uno/preflights/keyboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAMvC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EACjC,YAAY,GAAG,aAAa,GACF,EAAE,EAAE,CAC9B,SAAS,CAAC;IACT,MAAM,EAAE,GAAG,EAAE;IACZ,sEAAsE;IACtE,4CAA4C;IAC5C;GACA,YAAY;;;CAGd;CACC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "5.0.6",
+  "version": "5.0.8",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/components/provider/Provider.tsx

@@ -1,5 +1,9 @@
 import { createContext, ReactNode, useContext } from 'react';
-import { useThemedTitleBar, useVisualViewportOffset } from '../../hooks.js';
+import {
+	useThemedTitleBar,
+	useVirtualKeyboardFocusBehavior,
+	useVisualViewportOffset,
+} from '../../hooks.js';
 import { useVirtualKeyboardBehavior } from '../../hooks/useVirtualKeyboardBehavior.js';
 import { IconSpritesheet } from '../icon/index.js';
 import { ParticleLayer } from '../particles/index.js';
@@ -28,6 +32,7 @@ export function Provider({
 	manifestPath,
 }: ProviderProps) {
 	useVisualViewportOffset(disableViewportOffset);
+	useVirtualKeyboardFocusBehavior();
 	const supportedVirtualKeyboardBehavior =
 		typeof navigator !== 'undefined' && 'virtualKeyboard' in navigator
 			? virtualKeyboardBehavior

package/src/hooks/useVisualViewportOffset.ts

@@ -207,13 +207,19 @@ export function useVirtualKeyboardFocusBehavior({
 		const matchElements = stableFocusElementTypes.split(',');
 
 		function update() {
-			// const open = virtualKeyboard.boundingRect.height > 0;
+			const open = virtualKeyboard.boundingRect.height > 0;
+			if (open) {
+				console.log('keyboard opened');
+			}
 			const activeElement = document.activeElement;
 			if (
 				activeElement &&
 				matchElements.includes(activeElement.tagName.toLowerCase())
 			) {
-				activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+				setTimeout(() => {
+					console.log('scroll focused element');
+					activeElement.scrollIntoView(true);
+				}, 10);
 			}
 		}
 

package/src/keyboard.stories.tsx

@@ -1,5 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Input, TextArea } from './components/index.js';
+import {
+	Input,
+	PageContent,
+	PageNowPlaying,
+	PageRoot,
+	TextArea,
+} from './components/index.js';
 import { useVirtualKeyboardBehavior } from './hooks/useVirtualKeyboardBehavior.js';
 
 const meta = {
@@ -19,16 +25,21 @@ export const Default: Story = {
 	render(args) {
 		useVirtualKeyboardBehavior('overlay');
 		return (
-			<>
-				<div className="h-screen flex flex-col">
-					<div className="flex flex-grow flex-col items-center justify-center p-lg">
-						Focus the inputs below to see how the virtual keyboard behavior
-						works.
+			<PageRoot id="root">
+				<PageContent>
+					<div className="h-screen flex flex-col">
+						<div className="flex flex-grow flex-col items-center justify-center p-lg">
+							Focus the inputs below to see how the virtual keyboard behavior
+							works.
+						</div>
+						<Input className="w-full" />
+						<TextArea className="w-full" />
 					</div>
-					<Input className="w-full" />
-					<TextArea className="w-full" />
-				</div>
-			</>
+					<PageNowPlaying keepAboveKeyboard>
+						<Input placeholder="now playing" />
+					</PageNowPlaying>
+				</PageContent>
+			</PageRoot>
 		);
 	},
 };

package/src/uno/preflights/index.ts

@@ -3,7 +3,7 @@ import { basePreflight } from './base.js';
 import { colorPreflight, ColorPreflightOptions } from './colors.js';
 import { fontsPreflight, FontsPreflightOptions } from './fonts.js';
 import { globalPreflight, GlobalsPreflightConfig } from './globals.js';
-import { keyboardPreflight } from './keyboard.js';
+import { keyboardPreflight, KeyboardPreflightOptions } from './keyboard.js';
 import { layerPreflight } from './layers.js';
 import { modePreflight } from './mode.js';
 import { propertiesPreflight } from './properties.js';
@@ -12,7 +12,8 @@ import { userPreflight, UserPreflightOptions } from './user.js';
 export type PreflightConfig = FontsPreflightOptions &
 	GlobalsPreflightConfig &
 	UserPreflightOptions &
-	ColorPreflightOptions;
+	ColorPreflightOptions &
+	KeyboardPreflightOptions;
 
 export const preflights = (config: PreflightConfig): Preflight<any>[] => [
 	layerPreflight,
@@ -23,5 +24,5 @@ export const preflights = (config: PreflightConfig): Preflight<any>[] => [
 	fontsPreflight(config),
 	propertiesPreflight,
 	userPreflight(config),
-	keyboardPreflight,
+	keyboardPreflight(config),
 ];

package/src/uno/preflights/keyboard.ts

@@ -1,12 +1,19 @@
 import { preflight } from './_util.js';
 
-export const keyboardPreflight = preflight({
-	getCSS: () =>
-		// add space to bottom of body equal to virtual keyboard inset so that
-		// content is not hidden behind the keyboard
-		`
-	body {
-		margin-bottom: env(virtual-keyboard-inset-bottom, 0px);
+export interface KeyboardPreflightOptions {
+	rootSelector?: string;
+}
+
+export const keyboardPreflight = ({
+	rootSelector = '#root,#main',
+}: KeyboardPreflightOptions) =>
+	preflight({
+		getCSS: () =>
+			// add space to bottom of body equal to virtual keyboard inset so that
+			// content is not hidden behind the keyboard
+			`
+	${rootSelector} {
+		transform: translateY(calc(-1 * env(keyboard-inset-height,0px)));
 	}
 `,
-});
+	});