starlight-theme-nova 0.7.4 → 0.8.1

package/lib/styles.gen.css

@@ -100,47 +100,57 @@
 /* layer: shortcuts */
 .nova-code-copy-button-icon-check{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;display:block;width:100%;height:100%;}
 .nova-code-copy-button-icon-clipboard{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;display:block;width:100%;height:100%;}
-.nova-link-button-icon{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7l7 7l-7 7'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;width:1.25rem;height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.nova-link-button-icon-left{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m12 19l-7-7l7-7m7 7H5'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;width:1.25rem;height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.nova-link-button-icon-right{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7l7 7l-7 7'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;width:1.25rem;height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .nova-link-card-icon{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14m-7-7l7 7l-7 7'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;margin-left:0.5rem;width:1.25rem;height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.nova-mobile-menu-toggle-icon{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 12h16M4 18h16M4 6h16'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+body[data-mobile-menu-expanded] .nova-mobile-menu-toggle-icon{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;--nova-rotate-x:0;--nova-rotate-y:0;--nova-rotate-z:0;--nova-rotate:90deg;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
 .nova-pagination-link-icon-left{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m15 18l-6-6l6-6'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}
 .nova-pagination-link-icon-right{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m9 18l6-6l-6-6'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}
+.nova-search-button-icon{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m21 21l-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}
 .nova-theme-select-icon-dark{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 1.992a10 10 0 1 0 9.236 13.838c.341-.82-.476-1.644-1.298-1.31a6.5 6.5 0 0 1-6.864-10.787l.077-.08c.551-.63.113-1.653-.758-1.653h-.266l-.068-.006z'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}
 .nova-theme-select-icon-light{--nova-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 19a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1m-4.95-2.05a1 1 0 0 1 0 1.414l-1.414 1.414a1 1 0 1 1-1.414-1.414l1.414-1.414a1 1 0 0 1 1.414 0m11.314 0l1.414 1.414a1 1 0 0 1-1.414 1.414l-1.414-1.414a1 1 0 0 1 1.414-1.414m-5.049-9.836a5 5 0 1 1-2.532 9.674a5 5 0 0 1 2.532-9.674M4 11a1 1 0 0 1 0 2H2a1 1 0 0 1 0-2zm18 0a1 1 0 0 1 0 2h-2a1 1 0 0 1 0-2zM5.636 4.222L7.05 5.636A1 1 0 0 1 5.636 7.05L4.222 5.636a1 1 0 0 1 1.414-1.414m14.142 0a1 1 0 0 1 0 1.414L18.364 7.05a1 1 0 0 1-1.414-1.414l1.414-1.414a1 1 0 0 1 1.414 0M12 1a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V2a1 1 0 0 1 1-1'/%3E%3C/svg%3E");-webkit-mask:var(--nova-icon) no-repeat;mask:var(--nova-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em;}
+.nova-page-frame-sidebar-pane{visibility:visible;visibility:hidden;border-width:0px;border-color:var(--sl-color-hairline);border-style:solid;}
 .nova-code-container{position:relative;overflow:hidden;border-width:1px;border-color:var(--sl-color-gray-5);border-radius:0.375rem;border-style:solid;}
 .nova-code-container pre{position:relative;}
 .nova-code-copy-button{position:absolute;right:0.5rem;top:0.5rem;margin:0;width:1.5rem;height:1.5rem;border-width:1px;border-color:var(--sl-color-gray-5);border-radius:0.25rem;border-style:solid;background-color:rgb(243 244 246 / 0.3) /* #f3f4f6 */;padding:0.25rem;--nova-text-opacity:1;color:rgb(0 0 0 / var(--nova-text-opacity)) /* #000 */;--nova-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .nova-link-card{position:relative;display:flex;flex-direction:column;gap:0.5rem;border-width:1px;border-color:var(--sl-color-gray-5);border-radius:0.75rem;border-style:solid;--nova-bg-opacity:1;background-color:rgb(255 255 255 / var(--nova-bg-opacity)) /* #fff */;padding-left:1.25rem;padding-right:1.25rem;padding-top:1rem;padding-bottom:1rem;--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;--nova-shadow:var(--nova-shadow-inset) 0 1px 2px 0 var(--nova-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .nova-page-frame-header{position:fixed;inset:0;z-index:var(--sl-z-index-navbar);box-sizing:border-box;width:100%;height:var(--sl-nav-height);border-width:0px;border-bottom-width:1px;border-color:var(--sl-color-hairline);border-style:solid;background-color:var(--sl-color-bg-nav) /* var(--sl-color-bg-nav) */;padding-top:var(--sl-nav-pad-y);padding-bottom:var(--sl-nav-pad-y);padding-left:var(--sl-nav-pad-x);padding-right:var(--sl-nav-pad-x);--nova-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);}
 .nova-link-card-link::before{position:absolute;inset:0;content:'';}
-.nova-header-title{margin:-0.25rem;min-width:0;display:flex;overflow:clip;padding:0.25rem;}
+.nova-header-nav-link{margin:-0.375rem;border-radius:0.375rem;padding:0.375rem;color:var(--sl-color-gray-3) /* var(--sl-color-gray-3) */;text-decoration:none;}
+.nova-header-title{margin:-0.75rem;min-width:0;display:flex;overflow:clip;padding:0.75rem;}
+.nova-nav-link,
+.nova-site-title a{margin:-0.375rem;border-radius:0.375rem;padding:0.375rem;}
 .nova-pagination-link{margin:0;display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;border-radius:0.75rem;padding:0.5rem;color:var(--sl-color-gray-2) /* var(--sl-color-gray-2) */;font-weight:500;text-decoration:none;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .nova-link-button{margin-inline-end:0.5rem;margin-top:0.5rem;margin-bottom:0.5rem;display:inline-flex;align-items:center;justify-content:space-between;gap:0.5rem;border-width:1px;border-color:transparent;border-radius:0.75rem;border-style:solid;padding-left:1.5rem;padding-right:1.5rem;padding-top:0.75rem;padding-bottom:0.75rem;font-weight:500;text-decoration:none;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .nova-header{box-sizing:border-box;height:100%;display:flex;align-items:center;gap:0.5rem;}
 div[data-nova-code-container][data-nova-code-title] .nova-code-title{display:block;}
 .nova-pagination-link-icon{display:block;min-width:1.25rem;min-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .nova-code-title{display:none;border-bottom-width:1px;border-bottom-color:var(--sl-color-gray-5);border-bottom-style:solid;background-color:var(--sl-color-bg) /* var(--sl-color-bg) */;padding-left:1rem;padding-right:1rem;padding-top:0.5rem;padding-bottom:0.5rem;font-size:0.875rem;line-height:1.25rem;color:var(--sl-color-gray-3) /* var(--sl-color-gray-3) */;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
-.nova-header-actions{display:none;align-items:center;gap:0.5rem;}
-.nova-social-icons-link{width:2rem;height:2rem;display:flex;border-radius:0.375rem;padding:0.5rem;color:var(--sl-color-text) /* var(--sl-color-text) */;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
-.nova-theme-select{width:2rem;height:2rem;border-radius:0.375rem;padding:0.5rem;color:var(--sl-color-text) /* var(--sl-color-text) */;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.nova-header-actions-lg{display:none;align-items:center;gap:0.5rem;}
+.nova-icon-button{width:2rem;height:2rem;display:flex;border-radius:0.375rem;padding:0.5rem;color:var(--sl-color-text) /* var(--sl-color-text) */;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.nova-theme-select{width:2rem;height:2rem;overflow:visible;}
 .nova-page-frame{min-height:100vh;display:flex;flex-direction:column;}
 .nova-pagination{min-width:100%;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;gap:0.5rem;padding-left:0.25rem;padding-right:0.25rem;padding-top:0;padding-bottom:1.5rem;}
-.nova-header-nav{display:flex;flex:1 1 0%;flex-direction:row;gap:1rem;overflow-x:auto;padding-left:1rem;padding-right:1rem;font-size:0.875rem;line-height:1.25rem;font-weight:500;}
+.nova-search-button-large{width:100%;max-width:22rem;height:2.25rem;display:flex;border-width:1px;border-color:var(--sl-color-gray-5);border-radius:0.375rem;border-style:solid;padding:0.5rem;color:var(--sl-color-text) /* var(--sl-color-text) */;transition-property:color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.nova-header-actions-sm{display:flex;align-items:center;gap:0.5rem;}
+.nova-header-nav{display:flex;flex:1 1 0%;flex-direction:row;gap:1rem;overflow-x:auto;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;font-size:0.875rem;line-height:1.25rem;font-weight:500;}
 .nova-header-search{display:flex;}
+.nova-mobile-menu-footer{display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;padding-top:1rem;padding-bottom:1rem;}
 .nova-link-card-link{display:inline-flex;align-items:center;justify-content:space-between;font-size:1.125rem;line-height:1.75rem;--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;font-weight:600;text-decoration:none;}
 .nova-pagination-divider{flex:1 1 0%;}
 .nova-pagination-link[rel="next"]{flex-direction:row;}
 .nova-pagination-link[rel="prev"]{flex-direction:row-reverse;}
-.nova-link-button:hover .nova-link-button-icon,
+.nova-link-button:hover .nova-link-button-icon-left,
+.nova-pagination-link:hover .nova-pagination-link-icon-left{--nova-translate-x:-0.25rem;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
+.nova-link-button:hover .nova-link-button-icon-right,
 .nova-link-card:hover .nova-link-card-icon,
 .nova-pagination-link:hover .nova-pagination-link-icon-right{--nova-translate-x:0.25rem;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
-.nova-pagination-link:hover .nova-pagination-link-icon-left{--nova-translate-x:-0.25rem;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
 .nova-code-copy-button:active{--nova-scale-x:0.9;--nova-scale-y:0.9;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
+.nova-icon-button:active{--nova-scale-x:0.9;--nova-scale-y:0.9;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
 .nova-link-button:active{--nova-scale-x:0.97;--nova-scale-y:0.97;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
 .nova-link-card:active{--nova-scale-x:0.99;--nova-scale-y:0.99;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
-.nova-social-icons-link:active{--nova-scale-x:0.9;--nova-scale-y:0.9;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
-.nova-theme-select:active{--nova-scale-x:0.9;--nova-scale-y:0.9;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
 .sl-markdown-content .nova-code-container pre.astro-code{border-width:0px;border-color:transparent;border-radius:0;}
-.nova-page-frame-sidebar-pane{border-width:0px;border-color:var(--sl-color-hairline);border-style:solid;}
 .nova-link-button-secondary{border-color:var(--sl-color-gray-5);--nova-bg-opacity:1;background-color:rgb(255 255 255 / var(--nova-bg-opacity)) /* #fff */;--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;--nova-shadow:var(--nova-shadow-inset) 0 1px 2px 0 var(--nova-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);}
 .nova-mobile-table-of-contents summary{border-bottom-color:var(--sl-color-hairline);}
 .dark .nova-code-copy-button{background-color:rgb(75 85 99 / 0.3) /* #4b5563 */;--nova-text-opacity:1;color:rgb(255 255 255 / var(--nova-text-opacity)) /* #fff */;}
@@ -150,16 +160,15 @@ div[data-nova-code-container][data-nova-code-title] .nova-code-title{display:blo
 .dark .nova-link-card{--nova-bg-opacity:1;background-color:rgb(31 41 55 / var(--nova-bg-opacity)) /* #1f2937 */;--nova-text-opacity:1;color:rgb(229 231 235 / var(--nova-text-opacity)) /* #e5e7eb */;}
 .dark .nova-code-copy-button:hover{background-color:rgb(107 114 128 / 0.5) /* #6b7280 */;}
 .nova-code-copy-button:hover{background-color:rgb(229 231 235 / 0.5) /* #e5e7eb */;}
+.nova-icon-button:hover{background-color:rgb(156 163 175 / 0.3) /* #9ca3af */;}
 .dark .nova-link-button-primary:hover{--nova-bg-opacity:1;background-color:rgb(209 213 219 / var(--nova-bg-opacity)) /* #d1d5db */;}
 .nova-link-button-primary:hover{--nova-bg-opacity:1;background-color:rgb(31 41 55 / var(--nova-bg-opacity)) /* #1f2937 */;--nova-shadow:var(--nova-shadow-inset) 0 4px 6px -1px var(--nova-shadow-color, rgb(0 0 0 / 0.1)),var(--nova-shadow-inset) 0 2px 4px -2px var(--nova-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);}
 .dark .nova-link-button-secondary:hover{--nova-bg-opacity:1;background-color:rgb(55 65 81 / var(--nova-bg-opacity)) /* #374151 */;}
 .nova-link-button-secondary:hover{--nova-bg-opacity:1;background-color:rgb(249 250 251 / var(--nova-bg-opacity)) /* #f9fafb */;--nova-shadow:var(--nova-shadow-inset) 0 4px 6px -1px var(--nova-shadow-color, rgb(0 0 0 / 0.1)),var(--nova-shadow-inset) 0 2px 4px -2px var(--nova-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);}
 .dark .nova-link-card:hover{--nova-bg-opacity:1;background-color:rgb(55 65 81 / var(--nova-bg-opacity)) /* #374151 */;}
 .nova-link-card:hover{--nova-bg-opacity:1;background-color:rgb(249 250 251 / var(--nova-bg-opacity)) /* #f9fafb */;--nova-shadow:var(--nova-shadow-inset) 0 4px 6px -1px var(--nova-shadow-color, rgb(0 0 0 / 0.1)),var(--nova-shadow-inset) 0 2px 4px -2px var(--nova-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--nova-ring-offset-shadow), var(--nova-ring-shadow), var(--nova-shadow);}
-.nova-social-icons-link:hover{background-color:rgb(156 163 175 / 0.3) /* #9ca3af */;}
-.nova-theme-select:hover{background-color:rgb(156 163 175 / 0.3) /* #9ca3af */;}
+.nova-search-button-large:hover{background-color:rgb(156 163 175 / 0.1) /* #9ca3af */;}
 .nova-site-title *{font-size:1.125rem;line-height:1.75rem;color:var(--sl-color-text) /* var(--sl-color-text) */;font-weight:600;}
-.nova-header-nav-link{color:var(--sl-color-gray-3) /* var(--sl-color-gray-3) */;text-decoration:none;}
 .dark .nova-link-button-minimal,
 .dark .nova-link-card-link{--nova-text-opacity:1;color:rgb(229 231 235 / var(--nova-text-opacity)) /* #e5e7eb */;}
 .nova-link-button-minimal{--nova-text-opacity:1;color:rgb(55 65 81 / var(--nova-text-opacity)) /* #374151 */;}
@@ -167,19 +176,33 @@ div[data-nova-code-container][data-nova-code-title] .nova-code-title{display:blo
 .nova-pagination-link:hover{color:var(--sl-color-white) /* var(--sl-color-white) */;}
 .nova-code-container .nova-code-copy-button{opacity:0;}
 .nova-code-container:hover .nova-code-copy-button{opacity:1;}
+.nova-header-nav-link:focus-visible{outline-offset:0px;}
+.nova-icon-button:focus-visible{outline-offset:1px;}
+.nova-nav-link:focus-visible{outline-offset:0px;}
+.nova-site-title:focus-visible a{outline-offset:0px;}
 .nova-mobile-table-of-contents nav{--nova-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);backdrop-filter:var(--nova-backdrop-blur) var(--nova-backdrop-brightness) var(--nova-backdrop-contrast) var(--nova-backdrop-grayscale) var(--nova-backdrop-hue-rotate) var(--nova-backdrop-invert) var(--nova-backdrop-opacity) var(--nova-backdrop-saturate) var(--nova-backdrop-sepia);}
 @media print{
-.nova-header-actions,
-.nova-header-search{display:none;}
+.nova-header-actions-lg,
+.nova-header-actions-sm,
+.nova-header-search,
+.nova-mobile-menu-footer{display:none;}
 }
 @media (max-width: calc(50rem - 0.1px)){
+body[data-mobile-menu-expanded] .nova-page-frame-sidebar-pane{visibility:visible;}
 .nova-header-nav *{display:none;}
-[data-has-sidebar] .nova-page-frame-header{padding-inline-end:calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));}
+.nova-search-button{width:2rem;height:2rem;display:flex;border-radius:0.375rem;padding:0.5rem;color:var(--sl-color-text) /* var(--sl-color-text) */;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.nova-page-frame-sidebar-pane{width:100%;}
+.nova-search-button:active{--nova-scale-x:0.9;--nova-scale-y:0.9;transform:translateX(var(--nova-translate-x)) translateY(var(--nova-translate-y)) translateZ(var(--nova-translate-z)) rotate(var(--nova-rotate)) rotateX(var(--nova-rotate-x)) rotateY(var(--nova-rotate-y)) rotateZ(var(--nova-rotate-z)) skewX(var(--nova-skew-x)) skewY(var(--nova-skew-y)) scaleX(var(--nova-scale-x)) scaleY(var(--nova-scale-y)) scaleZ(var(--nova-scale-z));}
+.nova-search-button:hover{background-color:rgb(156 163 175 / 0.3) /* #9ca3af */;}
+.nova-search-button:focus-visible{outline-offset:1px;}
 }
 @media (min-width: 50rem){
+.nova-page-frame-sidebar-pane{visibility:visible;width:var(--sl-sidebar-width);border-right-width:1px;}
+.nova-header-actions-sm{display:none;}
 .nova-header-search{max-width:15rem;flex:1 1 0%;}
-.nova-header-actions{display:flex;}
-.nova-page-frame-sidebar-pane{border-right-width:1px;}
+.nova-search-button{width:100%;max-width:22rem;height:2.25rem;display:flex;border-width:1px;border-color:var(--sl-color-gray-5);border-radius:0.375rem;border-style:solid;padding:0.5rem;color:var(--sl-color-text) /* var(--sl-color-text) */;transition-property:color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.nova-header-actions-lg{display:flex;}
+.nova-search-button:hover{background-color:rgb(156 163 175 / 0.1) /* #9ca3af */;}
 .nova-pagination-link{font-size:1.125rem;line-height:1.75rem;}
 }
 @media (min-width: 90rem){

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "starlight-theme-nova",
   "type": "module",
-  "version": "0.7.4",
+  "version": "0.8.1",
   "description": "",
   "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",
@@ -26,11 +26,13 @@
     "src"
   ],
   "dependencies": {
+    "@aria-ui/core": "^0.0.21",
+    "@pagefind/default-ui": "^1.3.0",
     "@shikijs/transformers": "^3.5.0",
     "@shikijs/twoslash": "^3.5.0",
     "@shikijs/types": "^3.5.0",
     "@types/hast": "^3.0.4",
-    "astro-theme-toggle": "^0.6.0",
+    "astro-theme-toggle": "^0.6.1",
     "hast-util-is-element": "^3.0.0",
     "rehype": "^13.0.2",
     "shiki-twoslash-renderer": "0.0.4"

package/src/components/Header.astro

@@ -1,11 +1,15 @@
 ---
-import LanguageSelect from '@astrojs/starlight/components/LanguageSelect.astro'
+const { hasSidebar } = Astro.locals.starlightRoute
+
+import LanguageSelect from 'virtual:starlight/components/LanguageSelect'
 import Search from 'virtual:starlight/components/Search'
 import SiteTitle from 'virtual:starlight/components/SiteTitle'
 import SocialIcons from 'virtual:starlight/components/SocialIcons'
 import ThemeSelect from 'virtual:starlight/components/ThemeSelect'
 
 import options from 'virtual:starlight-theme-nova/user-config'
+import MobileMenuToggle from './MobileMenuToggle.astro'
+
 const nav = options.nav ?? []
 ---
 
@@ -25,9 +29,16 @@ const nav = options.nav ?? []
   <div class="nova-header-search">
     <Search />
   </div>
-  <div class="nova-header-actions">
+  <div class="nova-header-actions-lg">
     <SocialIcons />
     <LanguageSelect />
     <ThemeSelect />
   </div>
+  {
+    hasSidebar && (
+      <div class="nova-header-actions-sm">
+        <MobileMenuToggle />
+      </div>
+    )
+  }
 </div>

package/src/components/Hero.astro

@@ -2,8 +2,10 @@
 import { Image } from 'astro:assets'
 import { PAGE_TITLE_ID } from '../constants'
 import LinkButton from './LinkButton.astro'
+import type { StarlightRouteEntryData } from '../content'
+
+const data = Astro.locals.starlightRoute.entry.data as StarlightRouteEntryData
 
-const { data } = Astro.locals.starlightRoute.entry
 const { title = data.title, tagline, image, actions = [] } = data.hero || {}
 
 const imageAttrs = {

package/src/components/LanguageSelect.astro

@@ -0,0 +1,5 @@
+---
+import Default from '@astrojs/starlight/components/LanguageSelect.astro'
+---
+
+<Default />

package/src/components/LinkButton.astro

@@ -1,12 +1,22 @@
 ---
+import type { StarlightIcon } from '@astrojs/starlight/types'
 import type { HTMLAttributes } from 'astro/types'
+import LinkButtonIcon from './LinkButtonIcon.astro'
 
 interface Props extends Omit<HTMLAttributes<'a'>, 'href'> {
   href: string | URL
+  icon?: StarlightIcon | undefined
+  iconPlacement?: 'start' | 'end' | undefined
   variant?: 'primary' | 'secondary' | 'minimal'
 }
 
-const { class: className, variant = 'primary', ...attrs } = Astro.props
+const {
+  class: className,
+  icon,
+  iconPlacement = 'end',
+  variant = 'primary',
+  ...attrs
+} = Astro.props
 ---
 
 <span class="not-content">
@@ -22,7 +32,8 @@ const { class: className, variant = 'primary', ...attrs } = Astro.props
     ]}
     {...attrs}
   >
-    <span><slot /></span>
-    <div class="nova-link-button-icon"></div>
+    {icon && iconPlacement === 'start' && <LinkButtonIcon icon={icon} />}
+    <slot />
+    {icon && iconPlacement === 'end' && <LinkButtonIcon icon={icon} />}
   </a>
 </span>

package/src/components/LinkButtonIcon.astro

@@ -0,0 +1,20 @@
+---
+import { Icon } from '@astrojs/starlight/components'
+import type { StarlightIcon } from '@astrojs/starlight/types'
+
+interface Props {
+  icon: StarlightIcon
+}
+
+const { icon } = Astro.props
+
+let className = ''
+
+if (icon === 'right-arrow') {
+  className = 'nova-link-button-icon-right'
+} else if (icon === 'left-arrow') {
+  className = 'nova-link-button-icon-left'
+}
+---
+
+{className ? <div class={className} /> : <Icon name={icon} size="1.25rem" />}

package/src/components/MobileMenuFooter.astro

@@ -0,0 +1,11 @@
+---
+import LanguageSelect from 'virtual:starlight/components/LanguageSelect'
+import SocialIcons from 'virtual:starlight/components/SocialIcons'
+import ThemeSelect from 'virtual:starlight/components/ThemeSelect'
+---
+
+<div class="nova-mobile-menu-footer">
+  <SocialIcons />
+  <LanguageSelect />
+  <ThemeSelect />
+</div>

package/src/components/MobileMenuToggle.astro

@@ -1,5 +1,13 @@
----
-import Default from '@astrojs/starlight/components/MobileMenuToggle.astro'
----
+<nova-mobile-menu-toggle
+  class="print:hidden nova-icon-button"
+  aria-label={Astro.locals.t('menuButton.accessibleLabel')}
+  aria-controls="starlight__sidebar"
+>
+  <div class="nova-mobile-menu-toggle-icon"></div>
+</nova-mobile-menu-toggle>
 
-<Default />
+<script>
+  import { register } from './mobile-menu-toggle'
+
+  register()
+</script>

package/src/components/PageFrame.astro

@@ -1,6 +1,4 @@
 ---
-import MobileMenuToggle from './MobileMenuToggle.astro'
-
 const { hasSidebar } = Astro.locals.starlightRoute
 ---
 
@@ -13,8 +11,8 @@ const { hasSidebar } = Astro.locals.starlightRoute
       <nav
         class="sidebar print:hidden"
         aria-label={Astro.locals.t('sidebarNav.accessibleLabel')}
+        id="nova-sidebar-nav"
       >
-        <MobileMenuToggle />
         <div
           id="starlight__sidebar"
           class:list={['sidebar-pane', 'nova-page-frame-sidebar-pane']}
@@ -32,20 +30,14 @@ const { hasSidebar } = Astro.locals.starlightRoute
 <style>
   @layer nova {
     .sidebar-pane {
-      visibility: var(--sl-sidebar-visibility, hidden);
       position: fixed;
       z-index: var(--sl-z-index-menu);
       inset-block: var(--sl-nav-height) 0;
       inset-inline-start: 0;
-      width: 100%;
       background-color: var(--sl-color-black);
       overflow-y: auto;
     }
 
-    :global([aria-expanded='true']) ~ .sidebar-pane {
-      --sl-sidebar-visibility: visible;
-    }
-
     .sidebar-content {
       height: 100%;
       min-height: max-content;
@@ -54,23 +46,9 @@ const { hasSidebar } = Astro.locals.starlightRoute
       gap: 1rem;
     }
 
-    @media (min-width: 50rem) {
-      .sidebar-content::after {
-        content: '';
-        padding-bottom: 1px;
-      }
-    }
-
     .main-frame {
       padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
       padding-inline-start: var(--sl-content-inline-start);
     }
-
-    @media (min-width: 50rem) {
-      .sidebar-pane {
-        --sl-sidebar-visibility: visible;
-        width: var(--sl-sidebar-width);
-      }
-    }
   }
 </style>

package/src/components/Search.astro

@@ -1,8 +1,531 @@
 ---
-import Default from '@astrojs/starlight/components/Search.astro'
+import project from 'virtual:starlight/project-context'
+
+const pagefindTranslations = {
+  placeholder: Astro.locals.t('search.label'),
+  ...Object.fromEntries(
+    Object.entries(Astro.locals.t.all())
+      .filter(([key]) => key.startsWith('pagefind.'))
+      .map(([key, value]) => [key.replace('pagefind.', ''), value]),
+  ),
+}
+
+const dataAttributes: DOMStringMap = {
+  'data-translations': JSON.stringify(pagefindTranslations),
+}
+if (project.trailingSlash === 'never')
+  dataAttributes['data-strip-trailing-slash'] = ''
 ---
 
-<Default />
+<site-search class={Astro.props.class} {...dataAttributes}>
+  <button
+    class="nova-search-button"
+    data-open-modal
+    disabled
+    aria-label={Astro.locals.t('search.label')}
+    aria-keyshortcuts="Control+K"
+  >
+    <span class="nova-search-button-icon"></span>
+    <span class="sl-hidden md:sl-block" aria-hidden="true"
+      >{Astro.locals.t('search.label')}</span
+    >
+    <kbd class="sl-hidden md:sl-flex" style="display: none;">
+      <kbd>{Astro.locals.t('search.ctrlKey')}</kbd><kbd>K</kbd>
+    </kbd>
+  </button>
+
+  <dialog style="padding:0" aria-label={Astro.locals.t('search.label')}>
+    <div class="dialog-frame sl-flex">
+      {
+        /* TODO: Make the layout of this button flexible to accommodate different word lengths. Currently hard-coded for English: “Cancel” */
+      }
+      <button data-close-modal class="sl-flex md:sl-hidden">
+        {Astro.locals.t('search.cancelLabel')}
+      </button>
+      {
+        import.meta.env.DEV ? (
+          <div
+            style="margin: auto; text-align: center; white-space: pre-line;"
+            dir="ltr"
+          >
+            <p>{Astro.locals.t('search.devWarning')}</p>
+          </div>
+        ) : (
+          <div class="search-container">
+            <div id="starlight__search" />
+          </div>
+        )
+      }
+    </div>
+  </dialog>
+</site-search>
+
+{
+  /**
+   * This is intentionally inlined to avoid briefly showing an invalid shortcut.
+   * Purposely using the deprecated `navigator.platform` property to detect Apple devices, as the
+   * user agent is spoofed by some browsers when opening the devtools.
+   */
+}
+<script is:inline>
+  ;(() => {
+    const openBtn = document.querySelector('button[data-open-modal]')
+    const shortcut = openBtn?.querySelector('kbd')
+    if (!openBtn || !(shortcut instanceof HTMLElement)) return
+    const platformKey = shortcut.querySelector('kbd')
+    if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
+      platformKey.textContent = '⌘'
+      openBtn.setAttribute('aria-keyshortcuts', 'Meta+K')
+    }
+    shortcut.style.display = ''
+  })()
+</script>
+
+<script>
+  import { pagefindUserConfig } from 'virtual:starlight/pagefind-config'
+
+  class SiteSearch extends HTMLElement {
+    constructor() {
+      super()
+      const openBtn = this.querySelector<HTMLButtonElement>(
+        'button[data-open-modal]',
+      )!
+      const closeBtn = this.querySelector<HTMLButtonElement>(
+        'button[data-close-modal]',
+      )!
+      const dialog = this.querySelector('dialog')!
+      const dialogFrame = this.querySelector('.dialog-frame')!
+
+      /** Close the modal if a user clicks on a link or outside of the modal. */
+      const onClick = (event: MouseEvent) => {
+        const isLink = 'href' in (event.target || {})
+        if (
+          isLink ||
+          (document.body.contains(event.target as Node) &&
+            !dialogFrame.contains(event.target as Node))
+        ) {
+          closeModal()
+        }
+      }
+
+      const openModal = (event?: MouseEvent) => {
+        dialog.showModal()
+        document.body.toggleAttribute('data-search-modal-open', true)
+        this.querySelector('input')?.focus()
+        event?.stopPropagation()
+        window.addEventListener('click', onClick)
+      }
+
+      const closeModal = () => dialog.close()
+
+      openBtn.addEventListener('click', openModal)
+      openBtn.disabled = false
+      closeBtn.addEventListener('click', closeModal)
+
+      dialog.addEventListener('close', () => {
+        document.body.toggleAttribute('data-search-modal-open', false)
+        window.removeEventListener('click', onClick)
+      })
+
+      // Listen for `ctrl + k` and `cmd + k` keyboard shortcuts.
+      window.addEventListener('keydown', (e) => {
+        if ((e.metaKey === true || e.ctrlKey === true) && e.key === 'k') {
+          dialog.open ? closeModal() : openModal()
+          e.preventDefault()
+        }
+      })
+
+      let translations = {}
+      try {
+        translations = JSON.parse(this.dataset.translations || '{}')
+      } catch {}
+
+      const shouldStrip = this.dataset.stripTrailingSlash !== undefined
+      const stripTrailingSlash = (path: string) =>
+        path.replace(/(.)\/(#.*)?$/, '$1$2')
+      const formatURL = shouldStrip
+        ? stripTrailingSlash
+        : (path: string) => path
+
+      window.addEventListener('DOMContentLoaded', () => {
+        if (import.meta.env.DEV) return
+        const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1))
+        onIdle(async () => {
+          // @ts-expect-error — Missing types for @pagefind/default-ui package.
+          const { PagefindUI } = await import('@pagefind/default-ui')
+          new PagefindUI({
+            ...pagefindUserConfig,
+            element: '#starlight__search',
+            baseUrl: import.meta.env.BASE_URL,
+            bundlePath:
+              import.meta.env.BASE_URL.replace(/\/$/, '') + '/pagefind/',
+            showImages: false,
+            translations,
+            showSubResults: true,
+            processResult: (result: {
+              url: string
+              sub_results: Array<{ url: string }>
+            }) => {
+              result.url = formatURL(result.url)
+              result.sub_results = result.sub_results.map((sub_result) => {
+                sub_result.url = formatURL(sub_result.url)
+                return sub_result
+              })
+            },
+          })
+        })
+      })
+    }
+  }
+  customElements.define('site-search', SiteSearch)
+</script>
+
+<style>
+  @layer starlight.core {
+    site-search {
+      display: contents;
+    }
+    button[data-open-modal] {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      border: 0;
+      background-color: transparent;
+      color: var(--sl-color-gray-1);
+      cursor: pointer;
+      height: 2.5rem;
+      font-size: var(--sl-text-xl);
+    }
+
+    @media (min-width: 50rem) {
+      button[data-open-modal] {
+        padding-inline-start: 0.75rem;
+        padding-inline-end: 0.5rem;
+        background-color: var(--sl-color-black);
+        color: var(--sl-color-gray-2);
+        font-size: var(--sl-text-sm);
+      }
+
+      button[data-open-modal] > :last-child {
+        margin-inline-start: auto;
+      }
+    }
+
+    button > kbd {
+      border-radius: 0.25rem;
+      font-size: var(--sl-text-2xs);
+      gap: 0.25em;
+      padding-inline: 0.375rem;
+      background-color: var(--sl-color-gray-6);
+    }
+
+    kbd {
+      font-family: var(--__sl-font);
+    }
+
+    dialog {
+      margin: 0;
+      background-color: var(--sl-color-gray-6);
+      border: 1px solid var(--sl-color-gray-5);
+      width: 100%;
+      max-width: 100%;
+      height: 100%;
+      max-height: 100%;
+      box-shadow: var(--sl-shadow-lg);
+    }
+    dialog[open] {
+      display: flex;
+    }
+
+    dialog::backdrop {
+      background-color: var(--sl-color-backdrop-overlay);
+      -webkit-backdrop-filter: blur(0.25rem);
+      backdrop-filter: blur(0.25rem);
+    }
+
+    .dialog-frame {
+      position: relative;
+      overflow: auto;
+      flex-direction: column;
+      flex-grow: 1;
+      gap: 1rem;
+      padding: 1rem;
+    }
+
+    button[data-close-modal] {
+      position: absolute;
+      z-index: 1;
+      align-items: center;
+      align-self: flex-end;
+      height: calc(64px * var(--pagefind-ui-scale));
+      padding: 0.25rem;
+      border: 0;
+      background: transparent;
+      cursor: pointer;
+      color: var(--sl-color-text-accent);
+    }
+
+    #starlight__search {
+      --pagefind-ui-primary: var(--sl-color-text);
+      --pagefind-ui-text: var(--sl-color-gray-2);
+      --pagefind-ui-font: var(--__sl-font);
+      --pagefind-ui-background: var(--sl-color-black);
+      --pagefind-ui-border: var(--sl-color-gray-5);
+      --pagefind-ui-border-width: 1px;
+      --pagefind-ui-tag: var(--sl-color-gray-5);
+      --sl-search-cancel-space: 5rem;
+    }
+
+    :root[data-theme='light'] #starlight__search {
+      --pagefind-ui-tag: var(--sl-color-gray-6);
+    }
+
+    @media (min-width: 50rem) {
+      #starlight__search {
+        --sl-search-cancel-space: 0px;
+      }
+
+      dialog {
+        margin: 4rem auto auto;
+        border-radius: 0.5rem;
+        width: 90%;
+        max-width: 40rem;
+        height: max-content;
+        min-height: 15rem;
+        max-height: calc(100% - 8rem);
+      }
+
+      .dialog-frame {
+        padding: 1.5rem;
+      }
+    }
+  }
+</style>
+
+<style is:global>
+  @import url('@pagefind/default-ui/css/ui.css') layer(starlight.core);
+
+  @layer starlight.core {
+    [data-search-modal-open] {
+      overflow: hidden;
+    }
+
+    #starlight__search {
+      --sl-search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale));
+      --sl-search-result-pad-inline-start: calc(
+        3.75rem * var(--pagefind-ui-scale)
+      );
+      --sl-search-result-pad-inline-end: calc(
+        1.25rem * var(--pagefind-ui-scale)
+      );
+      --sl-search-result-pad-block: calc(0.9375rem * var(--pagefind-ui-scale));
+      --sl-search-result-nested-pad-block: calc(
+        0.625rem * var(--pagefind-ui-scale)
+      );
+      --sl-search-corners: calc(0.3125rem * var(--pagefind-ui-scale));
+      --sl-search-page-icon-size: calc(1.875rem * var(--pagefind-ui-scale));
+      --sl-search-page-icon-inline-start: calc(
+        (
+            var(--sl-search-result-pad-inline-start) -
+              var(--sl-search-page-icon-size)
+          ) /
+          2
+      );
+      --sl-search-tree-diagram-size: calc(2.5rem * var(--pagefind-ui-scale));
+      --sl-search-tree-diagram-inline-start: calc(
+        (
+            var(--sl-search-result-pad-inline-start) -
+              var(--sl-search-tree-diagram-size)
+          ) /
+          2
+      );
+    }
+
+    #starlight__search .pagefind-ui__form::before {
+      --pagefind-ui-text: var(--sl-color-gray-1);
+      opacity: 1;
+    }
+
+    #starlight__search .pagefind-ui__search-input {
+      color: var(--sl-color-white);
+      font-weight: 400;
+      width: calc(100% - var(--sl-search-cancel-space));
+    }
+
+    #starlight__search input:focus {
+      --pagefind-ui-border: var(--sl-color-accent);
+    }
+
+    #starlight__search .pagefind-ui__search-clear {
+      inset-inline-end: var(--sl-search-cancel-space);
+      width: calc(60px * var(--pagefind-ui-scale));
+      padding: 0;
+      background-color: transparent;
+      overflow: hidden;
+    }
+    #starlight__search .pagefind-ui__search-clear:focus {
+      outline: 1px solid var(--sl-color-accent);
+    }
+    #starlight__search .pagefind-ui__search-clear::before {
+      content: '';
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
+        center / 50% no-repeat;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E")
+        center / 50% no-repeat;
+      background-color: var(--sl-color-text-accent);
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    #starlight__search .pagefind-ui__results > * + * {
+      margin-top: var(--sl-search-result-spacing);
+    }
+    #starlight__search .pagefind-ui__result {
+      border: 0;
+      padding: 0;
+    }
+
+    #starlight__search .pagefind-ui__result-nested {
+      position: relative;
+      padding: var(--sl-search-result-nested-pad-block)
+        var(--sl-search-result-pad-inline-end);
+      padding-inline-start: var(--sl-search-result-pad-inline-start);
+    }
+
+    #starlight__search
+      .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
+    #starlight__search .pagefind-ui__result-nested {
+      position: relative;
+      background-color: var(--sl-color-black);
+    }
+
+    #starlight__search
+      .pagefind-ui__result-title:not(
+        :where(.pagefind-ui__result-nested *)
+      ):hover,
+    #starlight__search
+      .pagefind-ui__result-title:not(
+        :where(.pagefind-ui__result-nested *)
+      ):focus-within,
+    #starlight__search .pagefind-ui__result-nested:hover,
+    #starlight__search .pagefind-ui__result-nested:focus-within {
+      outline: 1px solid var(--sl-color-accent-high);
+    }
+
+    #starlight__search
+      .pagefind-ui__result-title:not(
+        :where(.pagefind-ui__result-nested *)
+      ):focus-within,
+    #starlight__search .pagefind-ui__result-nested:focus-within {
+      background-color: var(--sl-color-accent-low);
+    }
+
+    #starlight__search .pagefind-ui__result-thumb,
+    #starlight__search .pagefind-ui__result-inner {
+      margin-top: 0;
+    }
+
+    #starlight__search .pagefind-ui__result-inner > :first-child {
+      border-radius: var(--sl-search-corners) var(--sl-search-corners) 0 0;
+    }
+    #starlight__search .pagefind-ui__result-inner > :last-child {
+      border-radius: 0 0 var(--sl-search-corners) var(--sl-search-corners);
+    }
+
+    #starlight__search .pagefind-ui__result-inner > .pagefind-ui__result-title {
+      padding: var(--sl-search-result-pad-block)
+        var(--sl-search-result-pad-inline-end);
+      padding-inline-start: var(--sl-search-result-pad-inline-start);
+    }
+    #starlight__search
+      .pagefind-ui__result-inner
+      > .pagefind-ui__result-title::before {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: var(--sl-search-page-icon-inline-start);
+      width: var(--sl-search-page-icon-size);
+      background: var(--sl-color-gray-3);
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
+        center no-repeat;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E")
+        center no-repeat;
+    }
+
+    #starlight__search .pagefind-ui__result-inner {
+      align-items: stretch;
+      gap: 1px;
+    }
+
+    #starlight__search .pagefind-ui__result-link {
+      position: unset;
+      --pagefind-ui-text: var(--sl-color-white);
+      font-weight: 600;
+    }
+
+    #starlight__search .pagefind-ui__result-link:hover {
+      text-decoration: none;
+    }
+
+    #starlight__search
+      .pagefind-ui__result-nested
+      .pagefind-ui__result-link::before {
+      content: unset;
+    }
+
+    #starlight__search .pagefind-ui__result-nested::before {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: var(--sl-search-tree-diagram-inline-start);
+      width: var(--sl-search-tree-diagram-size);
+      background: var(--sl-color-gray-4);
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
+        0% 0% / 100% no-repeat;
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E")
+        0% 0% / 100% no-repeat;
+    }
+    #starlight__search .pagefind-ui__result-nested:last-of-type::before {
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E");
+    }
+
+    /* Flip page and tree icons around the vertical axis when in an RTL layout. */
+    [dir='rtl'] .pagefind-ui__result-title::before,
+    [dir='rtl'] .pagefind-ui__result-nested::before {
+      transform: matrix(-1, 0, 0, 1, 0, 0);
+    }
+
+    #starlight__search .pagefind-ui__result-link::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+
+    #starlight__search .pagefind-ui__result-excerpt {
+      font-size: calc(1rem * var(--pagefind-ui-scale));
+      overflow-wrap: anywhere;
+    }
+
+    #starlight__search mark {
+      color: var(--sl-color-gray-2);
+      background-color: transparent;
+      font-weight: 600;
+    }
+
+    #starlight__search .pagefind-ui__filter-value::before {
+      border-color: var(--sl-color-text-invert);
+    }
+
+    #starlight__search .pagefind-ui__result-tags {
+      background-color: var(--sl-color-black);
+      margin-top: 0;
+      padding: var(--sl-search-result-nested-pad-block)
+        var(--sl-search-result-pad-inline-end);
+    }
+  }
+</style>
 
 <style is:global>
   @layer nova {

package/src/components/SocialIcons.astro

@@ -17,7 +17,7 @@ if (!Array.isArray(links)) {
   links.length > 0 && (
     <>
       {links.map(({ label, href, icon }) => (
-        <a href={href} rel="me" class="nova-social-icons-link">
+        <a href={href} rel="me" class="nova-icon-button">
           <span class="sr-only">{label}</span>
           <Icon name={icon} size="1rem" color="currentColor" />
         </a>

package/src/components/ThemeSelect.astro

@@ -2,11 +2,13 @@
 import { Toggle } from 'astro-theme-toggle'
 ---
 
-<Toggle class="nova-theme-select">
-  <Fragment slot="icon-light">
-    <div class="nova-theme-select-icon-light"></div>
-  </Fragment>
-  <Fragment slot="icon-dark">
-    <div class="nova-theme-select-icon-dark"></div>
-  </Fragment>
-</Toggle>
+<div class="nova-theme-select">
+  <Toggle class="nova-icon-button">
+    <Fragment slot="icon-light">
+      <div class="nova-theme-select-icon-light"></div>
+    </Fragment>
+    <Fragment slot="icon-dark">
+      <div class="nova-theme-select-icon-dark"></div>
+    </Fragment>
+  </Toggle>
+</div>

package/src/components/mobile-menu-toggle.ts

@@ -0,0 +1,65 @@
+import type { BaseElement } from '@aria-ui/core'
+import {
+  createSignal,
+  defineCustomElement,
+  useAriaAttribute,
+  useEffect,
+  useEventListener,
+} from '@aria-ui/core'
+
+function setupMobileMenuToggle(host: BaseElement) {
+  const expanded = createSignal(false)
+
+  function toggleExpanded() {
+    expanded.set(!expanded.get())
+  }
+
+  useAriaAttribute(host, 'aria-expanded', () => {
+    return expanded.get() ? 'true' : 'false'
+  })
+
+  useEffect(host, () => {
+    document.body.toggleAttribute(
+      'data-mobile-menu-expanded',
+      expanded.get() || false,
+    )
+  })
+
+  useEventListener(host, 'click', toggleExpanded)
+  useEventListener(host, 'keydown', (event) => {
+    if (!event.isComposing && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault()
+      toggleExpanded()
+    }
+  })
+
+  useEffect(host, () => {
+    const sidebarNav = document.getElementById('nova-sidebar-nav')
+    if (!sidebarNav) return
+    const handleKeyup = (event: KeyboardEvent) => {
+      if (event.code === 'Escape') {
+        expanded.set(false)
+        host.focus()
+      }
+    }
+    sidebarNav.addEventListener('keyup', handleKeyup)
+    return () => sidebarNav.removeEventListener('keyup', handleKeyup)
+  })
+
+  useEffect(host, () => {
+    host.setAttribute('role', 'button')
+    host.setAttribute('tabindex', '0')
+  })
+}
+
+const MobileMenuToggle = defineCustomElement({
+  props: {},
+  events: {},
+  setup: setupMobileMenuToggle,
+})
+
+function register() {
+  customElements.define('nova-mobile-menu-toggle', MobileMenuToggle)
+}
+
+export { register }

package/src/content.config.ts

@@ -0,0 +1,7 @@
+import { docsLoader } from '@astrojs/starlight/loaders'
+import { docsSchema } from '@astrojs/starlight/schema'
+import { defineCollection } from 'astro:content'
+
+export const collections = {
+  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+}

package/src/content.d.ts

@@ -0,0 +1,22 @@
+/**
+ * This file contains some types by simplifying and modifying the generated
+ * files `.astro/content.d.ts`.
+ *
+ * Normally, Astro will generate a `.astro/content.d.ts` file for an Astro app
+ * project. However, since starlight-theme-nova is a library instead of an app,
+ * we don't have those auto-generated files.
+ */
+
+declare module 'astro:content' {
+  export interface RenderResult {
+    Content: import('astro/runtime/server/index.js').AstroComponentFactory
+  }
+}
+
+type ContentConfig = typeof import('./content.config.js')
+
+type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T
+
+export type StarlightRouteEntryData = import('astro/zod').infer<
+  ReturnTypeOrOriginal<Required<ContentConfig['collections']['docs']>['schema']>
+>

package/src/index.ts

@@ -22,6 +22,8 @@ const components = {
   Hero: 'starlight-theme-nova/components/Hero.astro',
   MobileTableOfContents:
     'starlight-theme-nova/components/MobileTableOfContents.astro',
+  MobileMenuFooter: 'starlight-theme-nova/components/MobileMenuFooter.astro',
+  LanguageSelect: 'starlight-theme-nova/components/LanguageSelect.astro',
 } as const
 
 export type { ThemeNovaOptions }

package/src/types.d.ts

@@ -1,11 +1,2 @@
 import 'astro/client'
 import '@astrojs/starlight'
-
-// This is a workaround to avoid type checking errors.
-declare module 'astro:content' {
-  export interface RenderResult {
-    Content: {
-      isAstroComponentFactory?: boolean
-    }
-  }
-}

package/src/virtual-internal.d.ts

@@ -1,3 +1,12 @@
+// Copied from https://github.com/withastro/starlight/blob/9d3ba179c5d524c1c61d771ceb1a7b4e754bee16/packages/starlight/virtual-internal.d.ts#L25
+declare module 'virtual:starlight/pagefind-config' {
+  import type { StarlightConfig } from '@astrojs/starlight/types'
+
+  export const pagefindUserConfig: Partial<
+    Extract<StarlightConfig['pagefind'], object>
+  >
+}
+
 declare module 'virtual:starlight-theme-nova/user-config' {
   const config: import('./user-options').ConfigSerialized
   export default config
@@ -18,3 +27,11 @@ declare module 'virtual:starlight/components/ThemeSelect' {
   const ThemeSelect: typeof import('./components/ThemeSelect.astro').default
   export default ThemeSelect
 }
+declare module 'virtual:starlight/components/LanguageSelect' {
+  const LanguageSelect: typeof import('./components/LanguageSelect.astro').default
+  export default LanguageSelect
+}
+declare module 'virtual:starlight/components/MobileMenuFooter' {
+  const MobileMenuFooter: typeof import('./components/MobileMenuFooter.astro').default
+  export default MobileMenuFooter
+}