Reposted by Mastro.{js,ts}
Mastro.{js,ts}
@mastrojs.bsky.social
479 followers 378 following 2.6K posts
No dependencies, #nobuild step. Just a simple web framework and site generator for people who care about their users and web standards. Implemented in ~800 lines of TypeScript. 🧑🍳 mastrojs.github.io Account run by Mauro Bieg @mb21.bsky.social
![{/* Native customizable <select> (Chrome 133+, Safari >=27) instead of Radix: the
<selectedcontent> mirrors whichever <option> is selected directly off
the DOM, so an auto-picked value (see the effect above) displays
correctly without ever having to open the dropdown first — which the
Radix Select couldn't do. Browsers that don't yet implement
this part of the spec, fall back to a plain mostly unstyled <select> */}
<select
value={value ?? ""}
onChange={(e) => onChange(e.target.value || null)}
className={cn(
"border-input focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 flex h-8 w-full items-center rounded-lg border bg-transparent px-2.5 py-1 text-sm transition-colors outline-none focus-visible:ring-[3px]",
// @tailwindcss/forms puts its own arrow on every <select> via
// background-image — clear it so it doesn't double up with the
// browser's own ::picker-icon arrow for the customizable select.
"bg-none",
"[appearance:base-select]",
"[&::picker(select)]:border-border [&::picker(select)]:bg-popover [&::picker(select)]:text-popover-foreground [&::picker(select)]:mt-1 [&::picker(select)]:[appearance:base-select] [&::picker(select)]:rounded-[var(--radius)] [&::picker(select)]:border [&::picker(select)]:p-1 [&::picker(select)]:shadow-[0_4px_12px_oklch(0_0_0/10%)]",
"[&_option]:rounded-[calc(var(--radius)-4px)] [&_option]:px-1.5 [&_option]:py-2",
"[&_option:hover]:bg-accent [&_option:hover]:text-accent-foreground [&_option:focus-visible]:bg-accent [&_option:focus-visible]:text-accent-foreground",
"[&_option:disabled]:pointer-events-none [&_option:disabled]:opacity-50",](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:slxmn2ejggkwwbzlej2axmx6/bafkreibxzsjkykgxbf46w54pejkvgrp5pwnhqwm7mk4gktgpveic2ildgq)
