feat: publish changed packages independently

bun.lock

@@ -253,7 +253,7 @@
     },
     "packages/captcha": {
       "name": "@wrnexus/captcha",
-      "version": "0.8.8",
+      "version": "0.8.9",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
         "@wrnexus/plugin": "workspace:*",
@@ -268,7 +268,7 @@
     },
     "packages/cli": {
       "name": "@wrnexus/cli",
-      "version": "0.8.8",
+      "version": "0.8.9",
       "bin": {
         "wrnexus": "src/index.ts",
       },
@@ -617,7 +617,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.8",
+      "version": "0.8.9",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },

docs/ui-visual-contract-0.8.json

@@ -2,56 +2,56 @@
   "schemaVersion": 1,
   "releaseLine": "0.8",
   "artifacts": {
-    "packages/ui/components/Accordion.wrn": "285df0aa50733618afb1b82aa125a67030d3af4bd8b9de52bc2e6366cea871de",
+    "packages/ui/components/Accordion.wrn": "6532417153592cf60ab437a3b4e500176b14394dd66756d47df087d8c4f863ef",
-    "packages/ui/components/AdvancedSelect.wrn": "e8666638204f9eb044ee6f163d6af432b119bf7f39d9df20243cfae471d20bcd",
+    "packages/ui/components/AdvancedSelect.wrn": "c3779c89ce309de8c1e2fbc02a39472fffd6fb10c2b83db0104c6d1135b87082",
     "packages/ui/components/AnnouncementBar.wrn": "903bfd9421a7350c923ace3315cedc5763fe3e6b7b54b660a0f26281d46a8754",
-    "packages/ui/components/AuthForm.wrn": "ec8796a67320afa2fb2070edba194382d1ab0a00cbd574f936a502da819d00fa",
+    "packages/ui/components/AuthForm.wrn": "bb5ac1ac8d981d490652eba5d4edf3612980470aa8b94bf4995cec1aa2db4bfc",
-    "packages/ui/components/AuthSplitLayout.wrn": "675c6ac9b07e0e9c5d6572f30028dda2391f9c6599b45945eb626df056a5b987",
+    "packages/ui/components/AuthSplitLayout.wrn": "2a04cabb8bf2bda8739e2aba6dcfd29713efa7b51777f99b03dad1645b6ddae1",
-    "packages/ui/components/AvatarGroup.wrn": "85dd6c64f8064d0980bf4157963bf366410c2ba391fd65df86a54b1a336f43a4",
+    "packages/ui/components/AvatarGroup.wrn": "737cd929e3bcd9f9b2fe1b602ae17c1fbf584bd8a1949ce36b65427931e27abc",
     "packages/ui/components/BackToTop.wrn": "b12c56ec8b7aabad68cbdc47f4b3237e2c21a61398f0aa51f9add6229b7357cd",
-    "packages/ui/components/Blockquote.wrn": "6f91cee9538c11858aaeb98ef1a098a814a6e319e3777e59cecd2de078b3beaf",
+    "packages/ui/components/Blockquote.wrn": "70bb7f0da2743a44d38d38daebe09637c2653ccb8454d78a226c034cfece31d6",
     "packages/ui/components/Breadcrumb.wrn": "5ab85d273ce72e4d5b87907975bb33f0249a34f2f87f01dc0812e827f775eed9",
-    "packages/ui/components/ButtonGroup.wrn": "0bb23d927e03926cc303498bc4ac1ab098343782082ac1fceeb2402702945842",
+    "packages/ui/components/ButtonGroup.wrn": "be6675ae06b9f3285187e04d8d3312cf14cf4d24fe9bc0f78b2f796b6819ff69",
     "packages/ui/components/CTASection.wrn": "2d2241d4f1018cfd2f8ea1ddd5fa8c8fcb8d1bbb2d4e4498cb9f39ff47a3801c",
-    "packages/ui/components/Card.wrn": "ba1b577ae4ffa9bd93c1e6a650ce90745df3f78cd6ff9ee85530e32dab56860a",
+    "packages/ui/components/Card.wrn": "db5f313be0d057dac8c2d693574d15a146296c0aec6e41ec58b96966e45186d5",
-    "packages/ui/components/Carousel.wrn": "0d39e17a623fb623022f48e79ea1ab9f268e2eb359c491609c137f711a1a3ffc",
+    "packages/ui/components/Carousel.wrn": "72e216882e3d1d744edd0d7697ce5810353a7cc0c386022452546bd959ff351d",
     "packages/ui/components/Chart.wrn": "d2cedd0e02818d0908708c2d07a495c629fad13fa021a2e035d5023dc5c367de",
-    "packages/ui/components/ChatBubble.wrn": "c46b9aef38f54e6243663046fe1b18ba6f9223cbe9b479d9335f96f217d401cc",
+    "packages/ui/components/ChatBubble.wrn": "c7c0ffcf732161330cc7fba79775ac829264b16731c980d3ec0820fc3ac8f9a7",
     "packages/ui/components/Clipboard.wrn": "03fcfb9786008fd7fb0a7719c3279711253afc5bbb9b0262b805dd553c44da8a",
-    "packages/ui/components/Collapse.wrn": "8869ff4a39541b7e0d538e2b63b9a3dcdcfcd4055fa362519c7e73f164f1be9d",
+    "packages/ui/components/Collapse.wrn": "90220ce36529d2b44bc45b1b265373462b5871a4e492be127f52743fa0619b0b",
-    "packages/ui/components/ColorPicker.wrn": "02f5744c3eb984de4b24de26fbfd3f69021633d4b0b33aceeba84df32f6a7284",
+    "packages/ui/components/ColorPicker.wrn": "602752f2ad7f6b092987ccae9c35a0a413a6261d63d6e88f279ee939d0ec4049",
     "packages/ui/components/Columns.wrn": "e01496aa53025444cc51671efcce40d6d24d86775b2cbb1ee0def1862bb6315d",
-    "packages/ui/components/Combobox.wrn": "140b038735a5902eb901386281a5a01e16fd1c345560a48ff2b143ebaebe1f3d",
+    "packages/ui/components/Combobox.wrn": "78c97205f42f015d22dd58018641bbd6b0d9cba55b1138af5c9d1da8d1095202",
     "packages/ui/components/Confetti.wrn": "b9aece64735c721c24356122e52ca84602d9f646c7d8be1e0b80d9de3163a501",
     "packages/ui/components/Container.wrn": "4a0acbb896f4c11714e3925d912b10ef9aeedfa904b4ad8561aa2cbd9a0fdca0",
     "packages/ui/components/ContextMenu.wrn": "33fb0f60268b12411d66e3031dc0557cb231149e7a8d83340b4b453a6e37cb09",
     "packages/ui/components/CustomScrollbar.wrn": "fedb2ab06cc2cf9499c130590945ca6971a3edfb60407b6658ef7756e4be9823",
-    "packages/ui/components/DataMap.wrn": "6058f92be7fb95e9eedcc714cad1ad43fa70e40c9dd50fd8bba5aae9935953a7",
+    "packages/ui/components/DataMap.wrn": "553677298a28cced00c419fe35dff3d989a8b6d829cadad6e563d4a63a02581e",
-    "packages/ui/components/DataTable.wrn": "edb935b091750ee3d1aff354007eabd4998fc7e5584d50a6c726c6657765d800",
+    "packages/ui/components/DataTable.wrn": "cfc3bb9110ccd1aa38b85fd74995180b6b82c177d0bbd6dcce99d56c99cc6e5b",
-    "packages/ui/components/DatePicker.wrn": "2c46f92612528cf60aa0b7e8aaae9826094acb5518d3982c2db65aca6d01e103",
+    "packages/ui/components/DatePicker.wrn": "0c63bc72951961105529c4ebdc1064c22f44d0ce5fc8b813df7554280c7b1ad0",
-    "packages/ui/components/DeviceFrame.wrn": "d918d213e6e0b74d690911ab3b3f440e9b62fa019fd9e8140c5a56c5c0a0843d",
+    "packages/ui/components/DeviceFrame.wrn": "b76a0c820278ac7df5c07702b5d95e764ce0ebfcf7d4f89a8b629df8ecafee11",
     "packages/ui/components/Divider.wrn": "f5cc449611022b3d3eedf982ae48f6b1a289db7855cc9b6ea0248dcda807ffb3",
-    "packages/ui/components/DragAndDrop.wrn": "31ffe9d41fc655a38257c841a520c947d3ce2338e174b5e89e32fe9ccf23b9b3",
+    "packages/ui/components/DragAndDrop.wrn": "4c01e56b5f7734b50dbff57157e0fbf163667b8e8a8fc50e1907e77a87f69c51",
     "packages/ui/components/Drawer.wrn": "e6e2778e515361a3475439ab91b6efec3895efab2a4dfdcfb535713f656cc7ed",
     "packages/ui/components/Dropdown.wrn": "627319de0f555f0f07f80e19a59f9fd52e7f74af7cf2cf9ff09e114678ad9eb8",
     "packages/ui/components/FeatureCard.wrn": "2a1bfb01cec8a9892d3ff066e48c276fa7c548cb59c15bcd9b4bbf85450a07a2",
-    "packages/ui/components/FeatureGrid.wrn": "9bd3e9becb5d7359841ed21d607131c58da20f2e8e87e25a9fb48f6b1a2b17e5",
+    "packages/ui/components/FeatureGrid.wrn": "3b4539ad3a5f93deb1ff29a98118dd8fa53cce1dd8433f7662d907019c04df37",
     "packages/ui/components/FeatureIconCard.wrn": "620f66a36ca5c8ad8f2ea09e94dc4471e4146189c42149e9d31db58501281639",
-    "packages/ui/components/FileInput.wrn": "cc4b8f95f11d91ead9a5796e202b2264eeea24aa1c3b1718327a6ea1dd28d785",
+    "packages/ui/components/FileInput.wrn": "2cc422b2dc9d28b1c7ec8d83aa76ba8ddc2a83eb1d57f940fe320f6c4581c4b8",
-    "packages/ui/components/FileUploadProgress.wrn": "c4b4174025a1de75c35a3497e0afd0b8acc645ad5f85c3ed7296ea295bb05749",
+    "packages/ui/components/FileUploadProgress.wrn": "185715b5c9cf6a285cdae2c17b54d4136faf7779c7841ad89e346397f61dad73",
     "packages/ui/components/Footer.wrn": "71790c99e4b15a62fdaf4b7a65d7016ca427408b62a2b1c7695ef1b39ba29440",
     "packages/ui/components/Grid.wrn": "d089d8657298b4d33993ba4bf7b581f816c65db513d8e48cf1fdd18da19e05a8",
     "packages/ui/components/Hero.wrn": "e4e39dcd59c273192c7e4136f6583279e20b0956bcba4cfbc3f6e01a1fade152",
     "packages/ui/components/HeroActions.wrn": "77f69085db73b946c00aa684d50fb5ae474684e440e81edbccfd8ef5dc357e33",
     "packages/ui/components/Image.wrn": "8113441bf90ab0d1d8618d477125ad339021f39e853db89d656c72c492e7a20b",
-    "packages/ui/components/InputGroup.wrn": "95333e7cb883c52958e3d6112899f337b00825e7678a2323baed1724983a7238",
+    "packages/ui/components/InputGroup.wrn": "dc8d9bf4ed4fa7eb1b81c2d7dc443fc4a2cef1f7cd4acceee06618c8d1faa61b",
     "packages/ui/components/InputNumber.wrn": "0ec020084f3e556d438f8264d61f836cfab4951c52d4df60e4944fb734fb38a9",
     "packages/ui/components/Kbd.wrn": "5afaabbb15902bd8fb82cb4155cf6cbfff55600927b54d564d27e2dd8b752386",
     "packages/ui/components/LayoutSplitter.wrn": "6bd6812e364420ed5d3439862116c58d0b011b298679005795bdccdbb7455066",
-    "packages/ui/components/LegendIndicator.wrn": "11f13413242e106daf347638ee2b2313fd20b05fc7001f03c0f4c00a558dfec0",
+    "packages/ui/components/LegendIndicator.wrn": "830a79bcda542b372c8e5164651d2e6f6192beeca73a64fb2e31adb25cb0ee16",
     "packages/ui/components/Link.wrn": "b986abcc66bc0b1c6296f3ff4e560812e35d89cc680d5251d7a3883e68c1d053",
     "packages/ui/components/List.wrn": "9bfa9613f388e5b126fc27d505e8165d7aa4a058e72132b755585464e116490e",
-    "packages/ui/components/ListGroup.wrn": "885020eea4dbdfc90b5a659e48a339cba7a205ddb539e30d7f1aa57244d728a5",
+    "packages/ui/components/ListGroup.wrn": "94d1887e74992e0ad8fc204c9b37c2888ed19ee796c62ab04aae34eef1e6c6d0",
     "packages/ui/components/Map.wrn": "9023a7a188480b24222a3910d26f6926918470369a1ab610f841c31a6120b9aa",
     "packages/ui/components/MarketingSectionHeader.wrn": "6f89a3b298ea299db686ddf903f92c4fe5d321719213943b16be82ba36c23302",
     "packages/ui/components/Marquee.wrn": "2a88c8bd8378469add26b0d937adccac4aa9f2c2005393010298e8e4fa89693e",
@@ -60,16 +60,16 @@
     "packages/ui/components/MetricGrid.wrn": "6018a98c10628ed240ed236ed916c0ff60994d192c3aadafd10bc876be0f9364",
     "packages/ui/components/Modal.wrn": "59d4ae9d6dd2700692d9edecfe53ee868e9f864363a4885961d1813cb2bee51f",
     "packages/ui/components/Nav.wrn": "7dc456b879e9248bde267b986cdcb138b8f3127d98b51e27bc9708129953f5e2",
-    "packages/ui/components/Navbar.wrn": "70640f9ff6e615c70ea9a5e996058bad45ebf0e97b02c9d827228a8f475f72e2",
+    "packages/ui/components/Navbar.wrn": "4f55470827c7a36062db82c495bf646f6bb428b75ba331e5a932e21f940476ea",
     "packages/ui/components/PageHeader.wrn": "59264dfb26a132fd3eb265c4374f9fcae781f30dd94a087c57e6e8256717cf14",
     "packages/ui/components/Pagination.wrn": "9ceb74745b159150b015bbbb1974c68e14a7d4b92bd03491cb23b8855aa07983",
-    "packages/ui/components/PinInput.wrn": "2b656cf832c02fa9c28e2fe78bf1147ff05b17a9d8e744c33e1a63bad7c7ebb3",
+    "packages/ui/components/PinInput.wrn": "dff3c69e2b5b2ee39f97a2c54ec6e36becd46bdc9b636a9ec249201b7d606d5a",
     "packages/ui/components/Popover.wrn": "f2996f00fad3e35fba2d48e70af17f592854eb73b9e8c6a83526aa78c4e41293",
-    "packages/ui/components/PortalDashboard.wrn": "79b54868f150a551cede0731cc5390a45ce22375f1929f2d537ce67a987bde50",
+    "packages/ui/components/PortalDashboard.wrn": "ed1713879ab6911920d641111885254e747081c54eb64e9305eda23272318e44",
-    "packages/ui/components/PreferenceSwitcher.wrn": "241060fb24a16e795c53981506d273fe9110cbb250c73c85928c788c75d05ded",
+    "packages/ui/components/PreferenceSwitcher.wrn": "5daf957dd91ab3acd5f2e16d8c717cc7938ef6fa41ea0b60e0561cf06aa146d2",
     "packages/ui/components/PublicPageShell.wrn": "369b74f65e27227311a2ed73e9ca56c8b60908100d6840a798e8ba5f2c8b1040",
-    "packages/ui/components/RangeSlider.wrn": "eff9db1616d424f9c803185b4efe011942866acad3328179438a200210d97710",
+    "packages/ui/components/RangeSlider.wrn": "97e77a1ba628d43b8585bc27d14167d5743ae8f435398fb7bcead50fe07dfc9b",
-    "packages/ui/components/Rating.wrn": "41bbce2eb7fb6ad08a3aacde97d03af6e346824962148e7655743028c59185d3",
+    "packages/ui/components/Rating.wrn": "959063a3a912d5f9247f851ceb882d7df986f8cd6e1893304224a59be6f88481",
     "packages/ui/components/Scrollspy.wrn": "76d1c17580c8d460f1222ce97585bdcac9779141f2f30d5460c84ff9f75413d8",
     "packages/ui/components/SearchBox.wrn": "717f7647fabd762f8ed60a7c3306eac3ddb83c0da292a53c76d91886c2b8f94f",
     "packages/ui/components/Section.wrn": "33eb8a82a2102229c2b1f64cec497e9e8e70b67adab8dbe396be860fccbb699c",
@@ -78,34 +78,32 @@
     "packages/ui/components/SplitHero.wrn": "70e843565ff869bcf413b11b6d9830b2e2bd229863a00904596f71e2dff0e76d",
     "packages/ui/components/StatsBar.wrn": "c7d1df3895f25b6d3a2e1012a18b97592c7f33e65418b880d486f20c2d490686",
     "packages/ui/components/Stepper.wrn": "df9093e4222ef3250963a8c6fbfec74477242735d23eabe896c29731c54fc14d",
-    "packages/ui/components/StrongPassword.wrn": "0df060bf01ace77ad0158df489588df75fd5d426dc04f000abacc2b3ddd93fc5",
+    "packages/ui/components/StrongPassword.wrn": "a89d82649983e4b251babe69ff85f3f9623ad7c230c7ef74883749e646f43cf4",
-    "packages/ui/components/StyledIcon.wrn": "bf9b41e9c402c4886feddda504c3f12348bbbe49b9003de69d807db4bf52d1b1",
+    "packages/ui/components/StyledIcon.wrn": "ef3406d097cc9967f0f7d8d5f66108de4c78b453b47cc0c6627630d455acc9fa",
     "packages/ui/components/Tabs.wrn": "e38336d28876caa4e97da32a569749e3803b030284a85ce9f35fa788e51cc5b0",
     "packages/ui/components/TextLink.wrn": "6e18906337cd3d30c2a0122593d249bde8f7cedc697b90ae388e2bd0e8eff3e1",
-    "packages/ui/components/TimePicker.wrn": "d2fb7cd156bb2abb997a9e85d27c36b80f4ba81515b523a125e793363568475c",
+    "packages/ui/components/TimePicker.wrn": "3b5bc1c380bb4d3569863ed783a8d8f94f7a5fa8948f4bda54f48b828a15ab52",
     "packages/ui/components/Timeline.wrn": "686a37ebc62732842846d004491336970db94945bca942f226097d863e159d1c",
     "packages/ui/components/Toaster.wrn": "288b2b370f65bf823e8d2a6f8c8cf66972332b8174303d33ebe8546d5e1d52c4",
-    "packages/ui/components/ToggleCount.wrn": "285abf0ed5c7156c5a6f404af0c2519f181b591975515e845cbc3c21349c5cfd",
+    "packages/ui/components/ToggleCount.wrn": "a17440af5d52be0ce59655bb61565a89832fe41f950f115da1da0abfaa86dea3",
-    "packages/ui/components/TogglePassword.wrn": "94cd3579bb48e53283c82400bff58ea0f2ca92646b87385502e3b474ba787a96",
+    "packages/ui/components/TogglePassword.wrn": "a4546b6825533efc6b010a095583da1664f8b63a28718bfab71609c4136aeeb5",
     "packages/ui/components/TreeView.wrn": "c354fce9c5e81fed6eec4089dfd2a7f6bb84eb189c94efc88e00251efdc12c0b",
     "packages/ui/components/Typography.wrn": "1b4d1b91dee0ff522d27c566becc3bc49bd9ec979ae6334e6a15fca5d88eccac",
-    "packages/ui/components/WysiwygEditor.wrn": "231da25f4064b065adb2783252d430aa336585e008547a010a41174a41284524",
+    "packages/ui/components/WysiwygEditor.wrn": "5535de685d70514651da061698eafc954c5dfea6de944e0c852c456c2d489df1",
-    "packages/ui/components/alert.wrn": "6dde2cee818a66e1d80df6b93e9f971d5389f95387961593350b0c297e3ed367",
+    "packages/ui/components/alert.wrn": "490a6f5b311b22ca5d630639c831b325b6918b2dd5440a242749f90af59f8b13",
-    "packages/ui/components/avatar.wrn": "ac2239cc746ec35b81a34ec6e27f4ee74ca04dc6058bad5853aa66640f2a9426",
+    "packages/ui/components/avatar.wrn": "78f602b031eb1de2db588dbcb83bbbbb9c52bef2c1c6a4a905276c3ec3e78119",
-    "packages/ui/components/badge.wrn": "9e1e884e9e2e9d881348c5121f53f4c85b91355cbfa49eeb2bff43f5ab38fab5",
+    "packages/ui/components/badge.wrn": "7049be83eab9c909f2efc39cbbb5dae4aba3a6be2051b9271b92892a6438ad93",
     "packages/ui/components/button.wrn": "da1660c671daf2feffe1024203ac1a8bc947beb07691bef595c1552c664b9cde",
-    "packages/ui/components/checkbox.wrn": "a5fb8410558696b3c8e63d5cd8dd49b44d51ed35b809cb2b189501e2e7b323e2",
+    "packages/ui/components/checkbox.wrn": "6e055207275294fd2390671dfa6c16db2bae692422f38689adad282601d04539",
-    "packages/ui/components/input.wrn": "184066a837982ef3fe44e518730d0cccb7dd6772d5af58116c0774b71cb894e2",
+    "packages/ui/components/input.wrn": "5c7c2a8e2334e8c2c966a70ec4c4140ddd99a9084b9f7e2de630152bb3f2d8a4",
     "packages/ui/components/progress.wrn": "61b01ba575d35691e3dfebfcb03ccd1c6b79f1df1c0d41857ec3b01944081a5d",
-    "packages/ui/components/radio.wrn": "cc65395aad6c0bac690c18cb7c36b1d2784e4c3284be3d3cb277b745f2f29bbc",
+    "packages/ui/components/radio.wrn": "f5ec1cab84c0d1b5e75133c44ce2220cd3ae5ad16a72d04c6b92b2482b9bf8b8",
-    "packages/ui/components/select.wrn": "d58b454958edccce99f96c642eb67d5a0e64e2b97e58e742d445fe45164a7660",
+    "packages/ui/components/select.wrn": "0a15a19f17e3f9565d8370eab1b97f1ec7299c4e248d80d64e63897fe6ff1c0e",
     "packages/ui/components/skeleton.wrn": "dda95a2c59c6060ab2b9f916eb046fbe74a68b398a051afc0bde41808e059c3a",
     "packages/ui/components/spinner.wrn": "ffbd28ec6fc017fc94c67778f8966eab2eefa3b47f3f27f064c77dbeb65d84c1",
-    "packages/ui/components/switch.wrn": "917219d77b2089584bc444fe94f2cb0670f800d73f69ae70f0368bfece16be0c",
+    "packages/ui/components/switch.wrn": "9d3892f7a800e0fd98f39c3205eeb96a416f8a1d6834d11678a4c8abf9ee5d71",
-    "packages/ui/components/textarea.wrn": "602ef2c8a081476f790408119b96ec2b51fb18abe76a43ee2b955dcb60debd17",
+    "packages/ui/components/textarea.wrn": "dc6f079201c06caaa0ca01b65c5efe80ec4a0b50fecac9726ac3e5a8256c4f16",
     "packages/ui/components/tooltip.wrn": "40028dfbb17f6725c76c2e091af9c30ea4db6aa4dea919d38f53874ea70315d1",
-    "packages/ui/styles/ComponentBaseStyles.wrn": "566724a7bcc8f7caa067d5415177bf982ebae7b579a34052ce6f2092cbade4d7",
-    "packages/ui/styles/FieldStyles.wrn": "460fc8cbb0228151927fd6a61caceae0a148fdbc3009c13ba511ab0a4010b42d",
     "packages/ui/styles/SelectStyles.wrn": "2c45e9c04678aaff76632e908b3c061410be0d6999a54a9203a39a3817d698f2",
     "packages/ui/ui.css": "b7e2ae796ffbb738451364f63fce13022a81d81207f7e49c7f6220d24c36acd9"
   }

editors/vscode/syntaxes/wrn.tmLanguage.json

@@ -328,7 +328,8 @@
         {
           "include": "source.css"
         }
-      ]
+      ],
+      "applyEndPatternLast": true
     },
     "css-braces": {
       "begin": "\\{",
@@ -753,6 +754,24 @@
     },
     "interpolation": {
       "patterns": [
+        {
+          "name": "meta.block.directive.wrn",
+          "match": "(\\{)(#if|#each|:else(?:\\s+if)?|/if|/each)(?:\\s+([^}]*))?(\\})",
+          "captures": {
+            "1": {
+              "name": "punctuation.definition.keyword.wrn"
+            },
+            "2": {
+              "name": "keyword.control.wrn"
+            },
+            "3": {
+              "name": "meta.embedded.expr.wrn"
+            },
+            "4": {
+              "name": "punctuation.definition.keyword.wrn"
+            }
+          }
+        },
         {
           "name": "meta.interpolation.i18n.wrn",
           "match": "(\\{)(t:)([^}]*)(\\})",

editors/vscode/test/validate.mjs

@@ -58,6 +58,17 @@ missingIncludes.length === 0
 grammar.repository?.["conditional-class-single"]
   ? ok("single-quoted class directives are registered")
   : bad("single-quoted class directives are registered");
+grammar.repository?.["style-block"]?.applyEndPatternLast === true
+  ? ok("style blocks keep nested CSS braces embedded")
+  : bad("style blocks keep nested CSS braces embedded");
+grammar.repository?.["view-block"]?.applyEndPatternLast === true
+  ? ok("view blocks keep template directive braces embedded")
+  : bad("view blocks keep template directive braces embedded");
+grammar.repository?.interpolation?.patterns?.some(
+  (pattern) => pattern.name === "meta.block.directive.wrn",
+)
+  ? ok("template block directives have dedicated grammar scopes")
+  : bad("template block directives have dedicated grammar scopes");
 
 // 3. Marketplace metadata and the gallery icon meet vsce requirements.
 try {

package.json

@@ -27,8 +27,13 @@
     "test:all": "bun run test && bun run test:examples && bun run test:services && bun run test:editor",
     "test:coverage": "bun test --coverage packages",
     "security:audit": "bun audit",
-    "release:prepare": "bun run scripts/release.ts prepare",
+    "release:prepare": "bun run scripts/release-changed.ts prepare",
-    "release:private": "bun run scripts/release.ts publish",
+    "release:private": "bun run scripts/release-changed.ts publish",
+    "release:all:prepare": "bun run scripts/release.ts prepare",
+    "release:all:private": "bun run scripts/release.ts publish",
+    "release:changed:plan": "bun run scripts/release-changed.ts plan",
+    "release:changed:prepare": "bun run scripts/release-changed.ts prepare",
+    "release:changed:publish": "bun run scripts/release-changed.ts publish",
     "test:db:live": "bash scripts/test-live-db.sh",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",

packages/captcha/components/Captcha.wrn

@@ -318,4 +318,34 @@ component Captcha {
             </div>
         </section>
     }
+
+    style {
+        /*
+         * Compact image challenges read as a single sequence: challenge,
+         * secondary actions, answer, then verification. Flattening the footer
+         * lets Listen/New challenge move directly beneath the image without
+         * changing the DOM or the client runtime selectors.
+         */
+        [data-wrn-captcha]:is([data-captcha-compact="true"], [data-captcha-size="compact"])[data-captcha-layout="horizontal"] {
+            grid-template-columns: minmax(0, 1fr);
+        }
+
+        [data-wrn-captcha]:is([data-captcha-compact="true"], [data-captcha-size="compact"])
+            [data-captcha-response-panel]
+            [data-captcha-footer] {
+            display: contents;
+        }
+
+        [data-wrn-captcha]:is([data-captcha-compact="true"], [data-captcha-size="compact"])
+            [data-captcha-footer]
+            > div:first-child {
+            order: -1;
+            justify-content: flex-start;
+        }
+
+        [data-wrn-captcha]:is([data-captcha-compact="true"], [data-captcha-size="compact"])
+            [data-captcha-verify] {
+            align-self: flex-start;
+        }
+    }
 }

packages/captcha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/captcha",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "First-class CAPTCHA challenges, providers, verification guards, page gates, and WRNexusJS UI.",
   "type": "module",
   "sideEffects": false,

packages/captcha/test/component.test.ts

@@ -58,6 +58,9 @@ test("Captcha.wrn parses and exposes the full public contract", async () => {
   expect(source).toContain("group-data-[captcha-size=compact]/captcha:max-h-24");
   expect(source).toContain("group-data-[captcha-size=compact]/captcha:h-8");
   expect(source).toContain("group-data-[captcha-size=compact]/captcha:hidden");
+  expect(source).toContain("[data-captcha-footer]");
+  expect(source).toContain("display: contents");
+  expect(source).toContain("order: -1");
   expect(source).toContain("data-[captcha-size=big]");
   expect(source).toContain("{...attrs}");
   expect(source).toContain("--wire-");

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/cli/src/doctor.ts

@@ -79,24 +79,7 @@ export function repairProject(appRoot: string): DoctorRepair[] {
     try {
       const source = readFileSync(pkgPath, "utf8");
       const pkg = JSON.parse(source) as Record<string, unknown>;
-      const ranges = frameworkRanges(pkg);
-      const preferred = [...ranges.keys()].sort((left, right) => {
-        const a = parseVersion(left);
-        const b = parseVersion(right);
-        return b[0] - a[0] || b[1] - a[1] || b[2] - a[2];
-      })[0];
       let changed = false;
-      if (preferred && ranges.size > 1) {
-        for (const field of ["dependencies", "devDependencies", "peerDependencies"]) {
-          const dependencies = pkg[field] as Record<string, string> | undefined;
-          for (const name of Object.keys(dependencies ?? {})) {
-            if (name.startsWith("@wrnexus/") && dependencies![name] !== preferred) {
-              dependencies![name] = preferred;
-              changed = true;
-            }
-          }
-        }
-      }
       const marker = (pkg.wrnexus as Record<string, unknown> | undefined) ?? {};
       if (!marker.version || !versionAtLeast(String(marker.version), "0.8.0")) {
         marker.version = "0.8.0";
@@ -108,9 +91,7 @@ export function repairProject(appRoot: string): DoctorRepair[] {
         repairs.push({
           name: "package.json",
           changed: true,
-          detail: preferred
+          detail: "recorded 0.8.0 migration marker",
-            ? `aligned framework packages to ${preferred}`
-            : "recorded 0.8.0 marker",
         });
       }
     } catch {
@@ -154,15 +135,13 @@ export function inspectProject(appRoot: string): DoctorCheck[] {
     try {
       const pkg = JSON.parse(readFileSync(pkgPath, "utf8")) as Record<string, unknown>;
       const ranges = frameworkRanges(pkg);
+      const invalid = [...ranges.keys()].filter((range) => !/[~^]?\d+\.\d+\.\d+/.test(range));
       checks.push({
         name: "framework package versions",
-        ok: ranges.size <= 1,
+        ok: invalid.length === 0,
-        detail:
+        detail: invalid.length
-          ranges.size <= 1
+          ? `invalid ranges: ${invalid.join(", ")}`
-            ? ([...ranges.keys()][0] ?? "No @wrnexus packages declared")
+          : `${[...ranges.values()].reduce((count, names) => count + names.length, 0)} independently versioned package(s)`,
-            : `version skew: ${[...ranges.entries()]
-                .map(([range, names]) => `${range} (${names.join(", ")})`)
-                .join("; ")}`,
       });
       const marker = (pkg.wrnexus as { version?: string } | undefined)?.version;
       checks.push({

packages/cli/src/update.ts

@@ -2,13 +2,13 @@
  * `wrnexus update [dir] [--version=x.y.z | --latest] [--dry-run]`
  *
  * Upgrade an app (or every app in a workspace) to a WrNexus release:
- *   1. Bump every `@wrnexus/*` dependency to the target version.
+ *   1. Resolve and bump every installed `@wrnexus/*` dependency independently.
  *   2. `bun install`.
  *   3. Refresh framework-owned reference files (public/llms.txt) and apply any
  *      versioned, idempotent migrations that newer releases introduce.
  *   4. Record the applied version in package.json (`"wrnexus": { version }`).
  *
- * Target version resolution: `--version=x.y.z` > `--latest` (queries npm) >
+ * Migration version resolution: `--version=x.y.z` > `--latest` (queries npm) >
  * the running CLI's own version (the default — pair with `bunx @wrnexus/cli@latest
  * update` to jump to the newest release with no network guesswork).
  *
@@ -27,7 +27,8 @@ import {
   statSync,
   writeFileSync,
 } from "node:fs";
-import { spawnSync } from "node:child_process";
+import { execFile, spawnSync } from "node:child_process";
+import { promisify } from "node:util";
 import { basename, dirname, join, relative, resolve } from "node:path";
 import { pathToFileURL } from "node:url";
 import { formatWrn, parse } from "@wrnexus/syntax";
@@ -56,6 +57,31 @@ function latestPublished(): string | null {
   }
 }
 
+const execFileAsync = promisify(execFile);
+
+/** Resolve every installed WRNexus dependency independently and in parallel. */
+export async function latestPackageVersions(names: string[]): Promise<Map<string, string>> {
+  const npm = process.platform === "win32" ? "npm.cmd" : "npm";
+  const unique = [...new Set(names.filter((name) => name.startsWith("@wrnexus/")))];
+  const entries = await Promise.all(
+    unique.map(async (name) => {
+      try {
+        const { stdout } = await execFileAsync(npm, ["view", name, "version", "--json"], {
+          encoding: "utf8",
+        });
+        const parsed = JSON.parse(stdout.trim()) as string | string[];
+        const version = Array.isArray(parsed) ? parsed.at(-1) : parsed;
+        return typeof version === "string" && /^\d+\.\d+\.\d+/.test(version)
+          ? ([name, version] as const)
+          : null;
+      } catch {
+        return null;
+      }
+    }),
+  );
+  return new Map(entries.filter((entry): entry is readonly [string, string] => entry !== null));
+}
+
 /** Numeric compare of `x.y.z` (pre-release/build tags ignored). */
 function cmp(a: string, b: string): number {
   const pa = a.split("-")[0]!.split(".").map(Number);
@@ -2131,6 +2157,16 @@ const MIGRATIONS: Migration[] = [
       // interface contracts produced by earlier releases.
     },
   },
+  {
+    version: "0.8.9",
+    id: "0.8.9-independent-package-updates",
+    description:
+      "Resolves and updates each installed WRNexus package to its independently published npm version.",
+    apply() {
+      // Dependency resolution is handled by the update command before install;
+      // no application source rewrite is required.
+    },
+  },
 ];
 
 /** Release tooling uses this to require an explicit migration entry per version. */
@@ -2138,15 +2174,22 @@ export function updateMigrationVersions(): string[] {
   return [...new Set(MIGRATIONS.map((migration) => migration.version))];
 }
 
-/** Bump every `@wrnexus/*` range to `^target`. Returns the human-readable changes. */
+/** Bump each `@wrnexus/*` range to its independently resolved target. */
-function bumpDeps(pkg: Record<string, unknown>, target: string): string[] {
+export function bumpDeps(
+  pkg: Record<string, unknown>,
+  target: string,
+  packageVersions?: ReadonlyMap<string, string>,
+): string[] {
   const changed: string[] = [];
-  const next = `^${target}`;
   for (const field of ["dependencies", "devDependencies", "peerDependencies"]) {
     const deps = pkg[field] as Record<string, string> | undefined;
     if (!deps) continue;
     for (const name of Object.keys(deps)) {
-      if (name.startsWith("@wrnexus/") && deps[name] !== next) {
+      if (!name.startsWith("@wrnexus/")) continue;
+      const resolved = packageVersions ? packageVersions.get(name) : target;
+      if (!resolved) continue;
+      const next = `^${resolved}`;
+      if (deps[name] !== next) {
         changed.push(`${name} ${deps[name]} → ${next}`);
         deps[name] = next;
       }
@@ -2240,7 +2283,11 @@ export function updateApp(
   appRoot: string,
   target: string,
   dryRun: boolean,
-  options: { explicitImports?: boolean; report?: MigrationReport } = {},
+  options: {
+    explicitImports?: boolean;
+    report?: MigrationReport;
+    packageVersions?: ReadonlyMap<string, string>;
+  } = {},
 ): UpdatedApp | null {
   const pkgPath = join(appRoot, "package.json");
   if (!existsSync(pkgPath)) {
@@ -2264,7 +2311,7 @@ export function updateApp(
 
   if (!dryRun) log(`backup: ${backupProjectFiles(appRoot, from, target)}`);
 
-  const changes = bumpDeps(pkg, target);
+  const changes = bumpDeps(pkg, target, options.packageVersions);
   changes.forEach((c) => log(c));
   if (!changes.length) log("dependencies already current");
 
@@ -2288,7 +2335,7 @@ export function updateApp(
   // changes back before writing the dependency bump so neither side is lost.
   if (!dryRun) {
     Object.assign(pkg, JSON.parse(readFileSync(pkgPath, "utf8")) as Record<string, unknown>);
-    bumpDeps(pkg, target);
+    bumpDeps(pkg, target, options.packageVersions);
   }
   if (!dryRun) writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n", "utf8");
   return { root: appRoot, packagePath: pkgPath, pkg };
@@ -2386,11 +2433,30 @@ export async function runUpdate(dir: string, args: string[]): Promise<void> {
     return;
   }
 
-  console.log(`\n  ⚡ wrnexus update → ${target}${dryRun ? "  (dry run)" : ""}\n`);
-
   // Workspace → update the root manifest + every app; else just this app.
   const apps = await workspaceApps(root);
   const targets = apps ? [root, ...apps] : [root];
+  const dependencyNames = targets.flatMap((targetRoot) => {
+    const file = join(targetRoot, "package.json");
+    if (!existsSync(file)) return [];
+    const manifest = JSON.parse(readFileSync(file, "utf8")) as Record<string, any>;
+    return ["dependencies", "devDependencies", "peerDependencies"].flatMap((field) =>
+      Object.keys(manifest[field] ?? {}).filter((name) => name.startsWith("@wrnexus/")),
+    );
+  });
+  const packageVersions = versionArg
+    ? new Map<string, string>()
+    : await latestPackageVersions(dependencyNames);
+
+  console.log(`\n  ⚡ wrnexus update → migrations ${target}${dryRun ? "  (dry run)" : ""}`);
+  if (!versionArg) {
+    console.log(
+      `  Resolved ${packageVersions.size} installed WRNexus package version(s) from npm.\n`,
+    );
+  } else {
+    console.log("");
+  }
+
   const reports = new Map<string, MigrationReport>();
   const updated = targets
     .map((targetRoot) => {
@@ -2403,7 +2469,7 @@ export async function runUpdate(dir: string, args: string[]): Promise<void> {
         parseFailures: [],
       };
       reports.set(targetRoot, report);
-      return updateApp(targetRoot, target, dryRun, { explicitImports, report });
+      return updateApp(targetRoot, target, dryRun, { explicitImports, report, packageVersions });
     })
     .filter(Boolean) as UpdatedApp[];
 
@@ -2453,6 +2519,7 @@ export async function runUpdate(dir: string, args: string[]): Promise<void> {
     writeFileSync(app.packagePath, JSON.stringify(app.pkg, null, 2) + "\n", "utf8");
   }
 
-  console.log(`\n  ✓ Updated and verified ${updated.length} package(s) at ${target}.`);
+  console.log(`\n  ✓ Updated and verified ${updated.length} project manifest(s).`);
+  console.log(`    Migration checkpoint: ${target}; dependencies use their own npm versions.`);
   console.log(`    Backups are under .wrnexus/update-backups/. Review and redeploy.\n`);
 }

packages/cli/test/doctor.test.ts

@@ -41,7 +41,7 @@ test("doctor --fix applies safe repairs and is idempotent", () => {
   expect(repairs.map(({ name }) => name)).toContain("configuration");
   expect(existsSync(join(root, "wrnexus.config.ts"))).toBe(true);
   const manifest = JSON.parse(readFileSync(join(root, "package.json"), "utf8"));
-  expect(manifest.dependencies["@wrnexus/router"]).toBe("^0.8.0");
+  expect(manifest.dependencies["@wrnexus/router"]).toBe("^0.7.0");
   expect(manifest.wrnexus.version).toBe("0.8.0");
   expect(repairProject(root)).toEqual([]);
 });

packages/cli/test/update.test.ts

@@ -2,7 +2,38 @@ import { expect, test } from "bun:test";
 import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
-import { blockingVerificationChecks, updateApp, verificationCommands } from "../src/update.ts";
+import {
+  blockingVerificationChecks,
+  bumpDeps,
+  updateApp,
+  verificationCommands,
+} from "../src/update.ts";
+
+test("dependency updates use each package's independently published version", () => {
+  const pkg = {
+    dependencies: {
+      "@wrnexus/ui": "^0.8.8",
+      "@wrnexus/core": "^0.8.8",
+      "@wrnexus/unavailable": "^0.8.7",
+    },
+    devDependencies: { "@wrnexus/cli": "^0.8.8" },
+  };
+  const changes = bumpDeps(
+    pkg,
+    "0.8.9",
+    new Map([
+      ["@wrnexus/ui", "0.8.10"],
+      ["@wrnexus/core", "0.8.8"],
+      ["@wrnexus/cli", "0.8.9"],
+    ]),
+  );
+
+  expect(pkg.dependencies["@wrnexus/ui"]).toBe("^0.8.10");
+  expect(pkg.dependencies["@wrnexus/core"]).toBe("^0.8.8");
+  expect(pkg.dependencies["@wrnexus/unavailable"]).toBe("^0.8.7");
+  expect(pkg.devDependencies["@wrnexus/cli"]).toBe("^0.8.9");
+  expect(changes).toHaveLength(2);
+});
 
 test("updateApp migrates project files without marking an unverified update complete", () => {
   const root = mkdtempSync(join(tmpdir(), "wrnexus-update-"));

packages/ui/components/Accordion.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Accordion {
   outputs {
     change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -206,7 +204,6 @@ component Accordion {
         </section>
       {/each}
     </div>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -408,5 +405,74 @@ component Accordion {
         transition: none;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/AdvancedSelect.wrn

@@ -1,7 +1,5 @@
 import SelectStyles from "../styles/SelectStyles.wrn"
 
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component AdvancedSelect {
   outputs {
     search(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -460,7 +458,6 @@ component AdvancedSelect {
       >{validationMessage}</small>
     </div>
     <SelectStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -518,5 +515,74 @@ component AdvancedSelect {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/AuthForm.wrn

@@ -88,7 +88,6 @@ component AuthForm {
       </form>
       <slot />
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -146,7 +145,74 @@ component AuthForm {
       width: 100%;
       justify-content: center;
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
- import Button from "./button.wrn"

packages/ui/components/AuthSplitLayout.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component AuthSplitLayout {
   props {
     size: string = "default"
@@ -81,7 +79,6 @@ component AuthSplitLayout {
         </div>
       </section>
     </main>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -260,5 +257,74 @@ component AuthSplitLayout {
         place-items: start center;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/AvatarGroup.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component AvatarGroup {
   outputs {
     overflow(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
@@ -148,7 +146,6 @@ component AvatarGroup {
         {/if}
       </div>
     </div>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -355,5 +352,74 @@ component AvatarGroup {
       font-size: 0.65rem;
       font-weight: 800;
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/Blockquote.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Blockquote {
   props {
     quote: string = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
@@ -65,7 +63,6 @@ component Blockquote {
         </figcaption>
       {/if}
     </figure>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -269,5 +266,74 @@ component Blockquote {
         margin-inline-start: 0;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/ButtonGroup.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component ButtonGroup {
   outputs {
     click(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -90,7 +88,6 @@ items: unknown[] = []
       {/if}
       <slot />
     </div>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -235,5 +232,73 @@ items: unknown[] = []
       }
     }
 
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/Card.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Card {
   outputs {
     click(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -310,7 +308,6 @@ component Card {
         </article>
       {/if}
     </div>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -672,5 +669,74 @@ component Card {
         display: block;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/Carousel.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 // Interactive, hydration-safe content carousel.
 component Carousel {
   outputs {
@@ -462,7 +460,6 @@ component Carousel {
           </div>
         </div>
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -828,5 +825,74 @@ component Carousel {
         transition-duration: 0.01ms;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/ChatBubble.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component ChatBubble {
   outputs {
     action(payload: { action: boolean; item: string | number | boolean | null | object; index: number })
@@ -148,7 +146,6 @@ component ChatBubble {
       {/if}
       <slot />
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -348,5 +345,74 @@ component ChatBubble {
         padding-inline: 0;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/Collapse.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Collapse {
   outputs {
     toggle(payload: { index: number; item: string | number | boolean | null | object; open: boolean; openIndexes: number[] })
@@ -96,7 +94,6 @@ size: string = "default"
       {/each}
       <slot />
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -245,5 +242,74 @@ size: string = "default"
         transition: none;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/ColorPicker.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component ColorPicker {
   outputs {
     input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -41,8 +37,6 @@ component ColorPicker {
       <div class="wire-next__color-control" data-icon-position="{iconPosition}">{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<input id="{id || name}" type="color" name="{name}" value="{value}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" /><output>{value}</output></div>
       {#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -50,5 +44,564 @@ component ColorPicker {
       width: 3rem;
       padding: 0.2rem;
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/components/Combobox.wrn

@@ -1,7 +1,5 @@
 import SelectStyles from "../styles/SelectStyles.wrn"
 
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component ComboBox {
   outputs {
     search(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -390,7 +388,6 @@ component ComboBox {
       >{validationMessage}</small>
     </div>
     <SelectStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -416,5 +413,74 @@ component ComboBox {
       padding-left: 2.5em;
       cursor: text;
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/DataMap.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component DataMap {
   outputs {
     select(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -22,7 +20,6 @@ component DataMap {
       {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
       <slot />
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -38,5 +35,74 @@ component DataMap {
     .wire-next--data-map > p { margin: 0; color: var(--wire-color-muted); }
     .wire-next--data-map > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
     .wire-next--data-map > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/DataTable.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 //
 // DataTable -- columns, sorting, filtering, pagination and selection over an
 // array of records.
@@ -1045,7 +1043,6 @@ component DataTable {
 
       <slot></slot>
     </div>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -1643,5 +1640,74 @@ component DataTable {
         overflow: visible;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/DatePicker.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component DatePicker {
   outputs {
     input(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
@@ -62,8 +58,6 @@ size: string = "default"
       <div class="wire-next__calendar" role="dialog" aria-label="{label}"><div class="wire-next__date-selectors"><label>Month<select value="{selectedMonth}" @change="updateDate('month', event.currentTarget.value, event)">{#each months as month}<option value="{month.value}" selected="{month.value === selectedMonth}">{month.label}</option>{/each}</select></label><label>Year<select value="{selectedYear}" @change="updateDate('year', event.currentTarget.value, event)">{#each years as year}<option value="{year}" selected="{String(year) === selectedYear}">{year}</option>{/each}</select></label></div><div class="wire-next__calendar-grid">{#each days as day}<button type="button" data-value="{String(day).padStart(2, '0')}" aria-pressed="{String(day).padStart(2, '0') === selectedDay}" @click="selectDay(event)">{day}</button>{/each}</div><button type="button" class="wire-next__date-done" disabled="{!currentValue}" @click="finishDate(event)">Done</button></div>
       {#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -121,5 +115,564 @@ size: string = "default"
     .wire-next__calendar-grid button[data-today="true"] {
       box-shadow: inset 0 0 0 1px var(--wire-field-color);
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/components/DeviceFrame.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component DeviceFrame {
   outputs {
     change(payload: { device: string; orientation: string; sourceEvent: Event })
@@ -32,7 +30,6 @@ component DeviceFrame {
       <header><div>{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}</div>{#if showToolbar}<div class="wire-next__device-actions" role="toolbar" aria-label="Preview device">{#each items as item}<button type="button" aria-pressed="{item.value === device}" @click="setDevice(item.value, event)">{item.label}</button>{/each}<button type="button" aria-label="Rotate preview" @click="rotateFrame(event)">↻</button></div>{/if}</header>
       <div class="wire-next__device-shell">{#if src || srcdoc}<iframe title="{frameTitle}" src="{src}" srcdoc="{srcdoc}" allow="{allow}"></iframe>{:else}<div class="wire-next__device-content"><slot /></div>{/if}</div>
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -106,5 +103,74 @@ component DeviceFrame {
         flex-direction: column;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/DragAndDrop.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component DragAndDrop {
   outputs {
     dragStart(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -26,7 +24,6 @@ component DragAndDrop {
       {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
       <slot />
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -42,5 +39,74 @@ component DragAndDrop {
     .wire-next--drag-and-drop > p { margin: 0; color: var(--wire-color-muted); }
     .wire-next--drag-and-drop > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
     .wire-next--drag-and-drop > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/FeatureGrid.wrn

@@ -77,7 +77,6 @@ component FeatureGrid {
         </div>
       </div>
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -231,7 +230,74 @@ component FeatureGrid {
         padding: 1.5rem;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
- import FeatureCard from "./FeatureCard.wrn"

packages/ui/components/FileInput.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component FileInput {
   outputs {
     input(payload: { files: File[]; name: string; sourceEvent: Event })
@@ -55,8 +51,6 @@ size: string = "default"
       <div class="wire-next__file-control" data-icon-position="{iconPosition}">{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<span>{selectedName || value || placeholder}</span><input id="{id || name}" type="file" name="{name}" accept="{accept}" multiple="{multiple}" disabled="{disabled}" required="{required}" aria-readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="handleChange(event)" @change="handleChange(event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" /></div>
       {#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -75,5 +69,564 @@ size: string = "default"
       opacity: 0;
       inset: 0;
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/components/FileUploadProgress.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component FileUploadProgress {
   outputs {
     cancel(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
@@ -40,8 +36,6 @@ size: string = "default"
       <div class="wire-next__upload-status"><span class="wire-next__upload-status-icon" aria-hidden="true"></span><span>{#if currentStatus === "uploading"}Uploading securely…{:else if currentStatus === "complete"}Upload complete{:else if currentStatus === "error"}Upload failed{:else}Upload cancelled{/if}</span></div>
       <div class="wire-next__upload-actions">{#if currentStatus === "uploading"}<button type="button" @click="cancelUpload(event)">{cancelLabel}</button><button type="button" @click="completeUpload(event)">Complete</button>{/if}{#if currentStatus === "error" || currentStatus === "cancelled"}<button type="button" @click="retryUpload(event)">{retryLabel}</button>{/if}</div>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -89,5 +83,564 @@ size: string = "default"
       background: var(--wire-color-surface-2);
       color: inherit;
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/components/InputGroup.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component InputGroup {
   outputs {
     input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -54,8 +50,6 @@ component InputGroup {
       </div>
       {#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -88,5 +82,564 @@ component InputGroup {
       font-weight: 700;
       cursor: pointer;
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/components/LegendIndicator.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component LegendIndicator {
   outputs {
     toggle(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -22,7 +20,6 @@ component LegendIndicator {
       {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
       <slot />
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -38,5 +35,74 @@ component LegendIndicator {
     .wire-next--legend-indicator > p { margin: 0; color: var(--wire-color-muted); }
     .wire-next--legend-indicator > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
     .wire-next--legend-indicator > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/ListGroup.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component ListGroup {
   outputs {
     select(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -22,7 +20,6 @@ component ListGroup {
       {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
       <slot />
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -38,5 +35,74 @@ component ListGroup {
     .wire-next--list-group > p { margin: 0; color: var(--wire-color-muted); }
     .wire-next--list-group > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
     .wire-next--list-group > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/Navbar.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Navbar {
   outputs {
     toggle(payload: { open: boolean })
@@ -141,7 +139,6 @@ size: string = "default"
         </div>
       </div>
     </header>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -578,5 +575,74 @@ size: string = "default"
         transform: translateY(0);
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/PinInput.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component PinInput {
   outputs {
     input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -115,7 +113,6 @@ component PinInput {
         data-error="{name}"
       >{validationMessage}</small>
     </fieldset>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -237,5 +234,74 @@ component PinInput {
         height: min(3rem, 14vw);
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/PortalDashboard.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component PortalDashboard {
   outputs {
     action(payload: { item: string | number | boolean | null | object; value: string | number | boolean; index: number })
@@ -99,7 +97,6 @@ component PortalDashboard {
         </section>
       </div>
     </main>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -383,5 +380,74 @@ component PortalDashboard {
         grid-template-columns: 1fr;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/PreferenceSwitcher.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component PreferenceSwitcher {
   outputs {
     theme(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
@@ -83,7 +81,6 @@ size: string = "default"
         </div>
       </details>
     </div>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -252,5 +249,74 @@ size: string = "default"
         width: auto;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/RangeSlider.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component RangeSlider {
   outputs {
     input(payload: ({ value: number; name: string; sourceEvent: Event }) | ({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[]))
@@ -71,8 +67,6 @@ component RangeSlider {
       </div>
       {#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -210,5 +204,564 @@ component RangeSlider {
       cursor: not-allowed;
       opacity: 0.45;
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/components/Rating.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Rating {
   outputs {
     input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -22,7 +20,6 @@ component Rating {
       {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
       <slot />
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -38,5 +35,74 @@ component Rating {
     .wire-next--rating > p { margin: 0; color: var(--wire-color-muted); }
     .wire-next--rating > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
     .wire-next--rating > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/StrongPassword.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component StrongPassword {
   outputs {
     input(payload: { value: string; score: number; maximumScore: number; percent: number; level: string })
@@ -218,8 +214,6 @@ component StrongPassword {
 
       <small id="{name}-validation" class="wire-next__validation" data-error="{name}">{validationMessage}</small>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -413,5 +407,564 @@ component StrongPassword {
         grid-template-columns: 1fr;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/components/StyledIcon.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component StyledIcon {
   props {
     size: string = "default"
@@ -17,7 +15,6 @@ component StyledIcon {
       {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
       <slot />
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -33,5 +30,74 @@ component StyledIcon {
     .wire-next--styled-icon > p { margin: 0; color: var(--wire-color-muted); }
     .wire-next--styled-icon > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
     .wire-next--styled-icon > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/TimePicker.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component TimePicker {
   outputs {
     input(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
@@ -66,8 +62,6 @@ size: string = "default"
       {#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}
       <small class="wire-next__field-error" data-error="{name}">{error}</small>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -94,5 +88,564 @@ size: string = "default"
         grid-template-columns: 1fr;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/components/ToggleCount.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component ToggleCount {
   outputs {
     change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -281,7 +279,6 @@ component ToggleCount {
         </div>
       {/if}
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -470,5 +467,74 @@ component ToggleCount {
         transition: none;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/TogglePassword.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component TogglePassword {
   outputs {
     input(payload: { name?: string; value: string | number | boolean | null | object; visible: boolean })
@@ -156,8 +152,6 @@ component TogglePassword {
         data-error="{name}"
       >{validationMessage}</small>
     </fieldset>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -294,5 +288,564 @@ component TogglePassword {
       color: var(--wire-color-muted);
       font-size: 0.72em;
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/components/WysiwygEditor.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component WysiwygEditor {
   outputs {
     input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -24,7 +22,6 @@ component WysiwygEditor {
       {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
       <slot />
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -40,5 +37,74 @@ component WysiwygEditor {
     .wire-next--wysiwyg-editor > p { margin: 0; color: var(--wire-color-muted); }
     .wire-next--wysiwyg-editor > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
     .wire-next--wysiwyg-editor > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/alert.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Alert {
   outputs {
     dismiss(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -144,7 +142,6 @@ component Alert {
         </button>
       {/if}
     </section>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -392,5 +389,74 @@ component Alert {
         justify-self: end;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/avatar.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Avatar {
   outputs {
     load(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -88,7 +86,6 @@ src: string = ""
         </span>
       {/if}
     </span>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -350,5 +347,74 @@ src: string = ""
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/badge.wrn

@@ -1,5 +1,3 @@
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Badge {
   outputs {
     dismiss(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
@@ -101,7 +99,6 @@ component Badge {
         {/if}
       </span>
     </span>
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -350,5 +347,74 @@ component Badge {
         animation: none;
       }
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
   }
 }

packages/ui/components/checkbox.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Checkbox {
   outputs {
     input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -176,8 +172,6 @@ size: string = "default"
         {error}
       </small>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -205,5 +199,564 @@ size: string = "default"
     .wire-next__checkbox-slot :is(a, button) {
       color: var(--wire-field-color);
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/components/input.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Input {
   outputs {
     input(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
@@ -56,13 +52,42 @@ size: string = "default"
     client function handleKeyup(sourceEvent) { sourceEvent.stopPropagation(); output.keyup({ key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
   }
   view {
-    <div {...attrs} class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--field wire-next--input {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}">
+    <div
-      <div class="wire-next__field-heading">
+      {...attrs}
-        <label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>
+      class="wire-component wire-component--color-{color} wire-component--size-{size} wire-next--field wire-next--input {class}"
-        {#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}
+      data-variant="{variant}"
+      data-inline="{inline}"
+      data-floating="{variant === 'floating'}"
+      data-invalid="{error ? 'true' : 'false'}"
+    >
+      <div
+        class="wire-next__field-heading"
+      >
+        <label
+          class="{hiddenLabel ? 'wire-next__sr-only' : ''}"
+          for="{id || name}"
+        >
+          {label}
+        </label>
+        {#if cornerHint}
+          <span
+            class="wire-next__field-hint"
+          >
+            {cornerHint}
+          </span>
+        {/if}
       </div>
-      <div class="wire-next__field-control" data-icon-position="{iconPosition}">
+      <div
-        {#if icon}<span class="{icon} wire-next__field-icon" aria-hidden="true"></span>{/if}
+        class="wire-next__field-control"
+        data-icon-position="{iconPosition}"
+      >
+        {#if icon}
+          <span
+            class="{icon} wire-next__field-icon"
+            aria-hidden="true"
+          >
+          </span>
+        {/if}
         <input
           id="{id || name}"
           type="{type}"
@@ -90,17 +115,593 @@ size: string = "default"
           @keydown="handleKeydown(event)"
           @keyup="handleKeyup(event)"
         />
-        {#if variant === "floating"}<span class="wire-next__field-floating-label">{label}</span>{/if}
+        {#if variant === "floating"}
+          <span
+            class="wire-next__field-floating-label"
+          >
+            {label}
+          </span>
+        {/if}
       </div>
-      {#if helperText}<small id="{(id || name) + '-help'}" class="wire-next__field-help">{helperText}</small>{/if}
+      {#if helperText}
-      <small id="{(id || name) + '-error'}" class="wire-next__field-error" data-error="{name}">{error}</small>
+        <small
+          id="{(id || name) + '-help'}"
+          class="wire-next__field-help"
+        >
+          {helperText}
+        </small>
+      {/if}
+      <small
+        id="{(id || name) + '-error'}"
+        class="wire-next__field-error"
+        data-error="{name}"
+      >
+        {error}
+      </small>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
     .wire-next--input { width: 100%; min-width: 0; }
     .wire-next--input[data-invalid="true"] { --wire-component-color: var(--wire-color-danger); }
+
+    /* Shared component foundation. */
+
+    .wire-component {
+      --wire-component-color: var(--wire-color-primary);
+      --wire-component-scale: 1;
+      margin: 0;
+      color: var(--wire-color-text);
+      font-family: var(--wrn-font-sans, inherit);
+    }
+
+    .wire-component--color-primary {
+      --wire-component-color: var(--wire-color-primary);
+    }
+
+    .wire-component--color-secondary {
+      --wire-component-color: var(--wire-color-secondary);
+    }
+
+    .wire-component--color-success {
+      --wire-component-color: var(--wire-color-success);
+    }
+
+    .wire-component--color-warning {
+      --wire-component-color: var(--wire-color-warning);
+    }
+
+    .wire-component--color-danger {
+      --wire-component-color: var(--wire-color-danger);
+    }
+
+    .wire-component--color-info {
+      --wire-component-color: var(--wire-color-info);
+    }
+
+    .wire-component--size-xs {
+      --wire-component-scale: 0.78;
+    }
+
+    .wire-component--size-sm {
+      --wire-component-scale: 0.88;
+    }
+
+    .wire-component--size-default,
+    .wire-component--size-md {
+      --wire-component-scale: 1;
+    }
+
+    .wire-component--size-lg {
+      --wire-component-scale: 1.14;
+    }
+
+    .wire-component--size-xl {
+      --wire-component-scale: 1.28;
+    }
+
+    .wire-component:not(.wire-btn) {
+      font-size: calc(1em * var(--wire-component-scale));
+    }
+
+    .wire-component :is(a, button, input, select, textarea):focus-visible {
+      outline-color: var(--wire-component-color);
+    }
+
+    .wire-component p {
+      margin: 0;
+      color: var(--wire-color-muted);
+      line-height: 1.6;
+    }
+
+    /* Shared field foundation. */
+
+    /* Validation states set by the browser validation runtime. */
+    .wire-invalid {
+      border-color: var(--wire-color-danger) !important;
+    }
+
+    .wire-field-error {
+      display: block;
+      min-height: 1em;
+      margin-top: 0.25rem;
+      color: var(--wire-color-danger);
+      font-size: 0.8rem;
+    }
+
+    .wire-next--choice {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.55rem;
+      cursor: pointer;
+    }
+
+    .wire-next--choice input {
+      width: 1.1rem;
+      height: 1.1rem;
+      accent-color: var(--wire-color-primary);
+    }
+
+    .wire-next--field {
+      display: grid;
+      width: min(100%, 28rem);
+      gap: 0.4rem;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+    .wire-next--field :where(input, textarea, select) {
+      width: 100%;
+      min-height: 2.65rem;
+      padding: 0.6rem 0.7rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.6rem;
+      outline: 0;
+      color: var(--wire-color-text);
+      background: var(--wire-color-bg);
+      font: inherit;
+      font-weight: 500;
+    }
+    .wire-auth-form form > .wire-next--field,
+    .wire-auth-form form > .wire-field {
+      width: 100%;
+      max-width: none;
+    }
+    .wire-auth-form__submit > .wire-btn {
+      width: 100%;
+      min-height: 3rem;
+      border-radius: 0.75rem;
+      box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+    }
+    .wire-next--field :where(input, textarea, select):focus-visible {
+      border-color: var(--wire-color-primary);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+    }
+    .wire-next--field textarea {
+      resize: vertical;
+    }
+    .wire-next--field,
+    .wire-next--choice-field {
+      --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+      width: min(100%, 34rem);
+      min-width: 0;
+      color: var(--wire-color-text);
+      font-size: 0.8125rem;
+      font-weight: 500;
+    }
+    .wire-next--field.wire-next--size-sm,
+    .wire-next--choice-field.wire-next--size-sm {
+      font-size: 0.8125rem;
+    }
+    .wire-next--field.wire-next--size-lg,
+    .wire-next--choice-field.wire-next--size-lg {
+      font-size: 1rem;
+    }
+    .wire-next__field-heading {
+      display: flex;
+      min-width: 0;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 1rem;
+    }
+    .wire-next__field-heading label {
+      color: var(--wire-color-text);
+      font-weight: 600;
+    }
+    .wire-next__field-hint,
+    .wire-next__field-help {
+      color: var(--wire-color-muted);
+      font-size: 0.82em;
+      font-weight: 500;
+    }
+    .wire-next__field-control {
+      position: relative;
+      min-width: 0;
+    }
+    .wire-next__field-control > :is(input, textarea, select) {
+      padding-inline: 0.85rem;
+      border-color: var(--wire-color-border);
+      border-radius: var(--wire-radius-sm);
+      background: var(--wire-color-surface);
+      font-size: 0.8125rem;
+    }
+    .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+      padding-inline-start: 2.5rem;
+    }
+    .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+      padding-inline-end: 2.5rem;
+    }
+    .wire-next__field-icon {
+      position: absolute;
+      z-index: 1;
+      top: 50%;
+      left: 0.85rem;
+      color: var(--wire-color-muted);
+      pointer-events: none;
+      transform: translateY(-50%);
+    }
+    .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+      right: 0.85rem;
+      left: auto;
+    }
+    .wire-next--field[data-variant="outlined"]
+    .wire-next__field-control
+    > :is(input, textarea, select) {
+      border-width: 2px;
+    }
+    .wire-next--field[data-variant="underline"]
+    .wire-next__field-control
+    > :is(input, textarea, select) {
+      padding-inline: 0;
+      border-width: 0 0 1px;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+    .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+      border-radius: 999px;
+      padding-inline: 1.15rem;
+    }
+    .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+      border-color: transparent;
+      background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+    }
+    .wire-next__field-floating-label {
+      position: absolute;
+      top: 50%;
+      left: 0.85rem;
+      color: var(--wire-color-muted);
+      pointer-events: none;
+      transform: translateY(-50%);
+      transition: 150ms ease;
+    }
+    .wire-next--textarea .wire-next__field-floating-label {
+      top: 1.35rem;
+    }
+    .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+      padding-top: 1.2rem;
+      padding-bottom: 0.3rem;
+    }
+    .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      overflow: hidden !important;
+      margin: -1px !important;
+      clip: rect(0, 0, 0, 0) !important;
+      white-space: nowrap !important;
+    }
+    .wire-next--field[data-floating="true"]
+    .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+      display: none;
+    }
+    .wire-next--field[data-floating="true"]
+    .wire-next__field-control
+    > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+    + .wire-next__field-floating-label {
+      top: 0.42rem;
+      font-size: 0.7em;
+      transform: none;
+    }
+    .wire-next__field-error {
+      min-height: 1em;
+      color: var(--wire-color-danger);
+      font-size: 0.82em;
+      font-weight: 600;
+    }
+    .wire-next__field-error:empty {
+      display: none;
+    }
+    .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+    .wire-next--choice-field[data-invalid="true"] input {
+      border-color: var(--wire-color-danger);
+    }
+    .wire-next--field :is(input, textarea, select):disabled,
+    .wire-next--choice-field input:disabled {
+      cursor: not-allowed;
+      opacity: 0.58;
+    }
+    .wire-next--field :is(input, textarea, select):read-only {
+      background: var(--wire-color-surface-2);
+    }
+    .wire-next--field[data-inline="true"],
+    .wire-next--choice-field[data-inline="true"] {
+      display: grid;
+      width: 100%;
+      max-width: none;
+      grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+      justify-content: center;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .wire-next--field[data-inline="true"] .wire-next__field-heading,
+    .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+      min-height: 2.65rem;
+      align-items: center;
+    }
+    .wire-next--field[data-inline="true"] .wire-next__field-heading {
+      justify-content: flex-end;
+    }
+    .wire-next--field[data-inline="true"] .wire-next__field-help,
+    .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+      display: flex;
+      min-height: 2.65rem;
+      align-items: center;
+    }
+    .wire-next--choice-field[data-inline="true"] {
+      grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+    }
+    .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+      display: none;
+    }
+    .wire-next--field[data-inline="true"] .wire-next__field-error,
+    .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+      grid-column: 2 / -1;
+    }
+    .wire-next__sr-only {
+      position: absolute !important;
+      width: 1px !important;
+      height: 1px !important;
+      overflow: hidden !important;
+      padding: 0 !important;
+      border: 0 !important;
+      margin: -1px !important;
+      clip: rect(0, 0, 0, 0) !important;
+      white-space: nowrap !important;
+    }
+    .wire-next__choice-field {
+      display: grid;
+      width: 100%;
+      max-width: none;
+      gap: 0.4rem;
+    }
+    .wire-next__choice {
+      display: flex;
+      min-width: 0;
+      align-items: center;
+      gap: 0.65rem;
+      color: var(--wire-color-text);
+      width: 100%;
+      font-size: 0.75rem;
+      font-weight: 500;
+    }
+    .wire-next__checkbox-content > .wire-next__choice {
+      width: 100%;
+      min-width: 0;
+      align-items: flex-start;
+    }
+    .wire-next__choice input {
+      flex: 0 0 auto;
+      margin: 0;
+      accent-color: var(--wire-field-color);
+    }
+    .wire-next__choice-copy {
+      display: grid;
+      min-width: 0;
+      gap: 0.15rem;
+      line-height: 1.35;
+    }
+    .wire-next__choice-copy small {
+      color: var(--wire-color-muted);
+      font-weight: 500;
+    }
+    .wire-next__radio-group,
+    .wire-next__checkbox-group {
+      display: grid;
+      min-width: 0;
+      gap: 0.65rem;
+    }
+    .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+    .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+      grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+      align-items: stretch;
+    }
+    .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+    .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+    }
+    .wire-next--radio-field[data-card="true"] .wire-next--radio,
+    .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+      min-height: 4.5rem;
+      padding: 0.85rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius-sm);
+      background: var(--wire-color-surface);
+    }
+    .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+    .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+      border-color: var(--wire-field-color);
+      box-shadow: 0 0 0 1px var(--wire-field-color);
+    }
+    .wire-next--radio-field[data-list="true"] .wire-next--radio,
+    .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+      padding-block: 0.75rem;
+      border-bottom: 1px solid var(--wire-color-border);
+    }
+    .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+    .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+      justify-content: space-between;
+    }
+    .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+    .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+      order: 2;
+    }
+    .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+    .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+      order: 1;
+    }
+    .wire-next__choice[data-variant="outlined"],
+    .wire-next__choice[data-variant="floating"] {
+      padding: 0.65rem 0.8rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius-sm);
+    }
+    .wire-next__choice[data-variant="pill"] {
+      padding: 0.65rem 1rem;
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+    }
+    .wire-next__choice[data-variant="ghost"] {
+      padding: 0.65rem 0.8rem;
+      border-radius: var(--wire-radius-sm);
+      background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+    }
+    .wire-next__choice[data-variant="underline"] {
+      padding-block: 0.5rem;
+      border-bottom: 1px solid var(--wire-color-border);
+    }
+    .wire-next--select .wire-next__field-control {
+      display: flex;
+      align-items: center;
+    }
+    .wire-next__color-control,
+    .wire-next__range-control,
+    .wire-next__input-group-control,
+    .wire-next__file-control {
+      display: flex;
+      min-width: 0;
+      align-items: center;
+      gap: 0.65rem;
+    }
+    .wire-next__picker-control,
+    .wire-next--time-picker .wire-next__field-control {
+      position: relative;
+      display: flex;
+      min-width: 0;
+      align-items: center;
+    }
+    .wire-next__picker-control > button:first-of-type,
+    .wire-next__time-trigger {
+      display: flex;
+      width: 100%;
+      min-height: 2.65rem;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+      padding: 0.7rem 0.85rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius-sm);
+      background: var(--wire-color-surface);
+      color: var(--wire-color-text);
+      font: inherit;
+      text-align: left;
+    }
+    .wire-next__calendar,
+    .wire-next__time-panel {
+      z-index: 20;
+      display: grid;
+      width: min(100%, 22rem);
+      gap: 0.75rem;
+      padding: 0.85rem;
+      border: 1px solid var(--wire-color-border);
+      border-radius: var(--wire-radius-md);
+      background: var(--wire-color-surface);
+      box-shadow: var(--wire-shadow-3);
+    }
+    .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+    .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+      display: none;
+    }
+    .wire-next__calendar button,
+    .wire-next__time-panel button {
+      min-height: 2.25rem;
+      border: 0;
+      border-radius: var(--wire-radius-sm);
+      background: transparent;
+      color: inherit;
+    }
+    .wire-next__calendar-weekdays,
+    .wire-next__calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 0.2rem;
+      text-align: center;
+    }
+    .wire-next__calendar-weekdays {
+      color: var(--wire-color-muted);
+      font-size: 0.75rem;
+    }
+    .wire-next__calendar-grid button:hover,
+    .wire-next__time-panel button:hover {
+      background: var(--wire-color-surface-2);
+    }
+    .wire-next__calendar-grid button[aria-pressed="true"],
+    .wire-next__time-panel button[aria-pressed="true"] {
+      background: var(--wire-field-color);
+      color: var(--wire-color-primary-contrast, #fff);
+    }
+    .wire-next__time-period {
+      display: flex;
+      gap: 0.35rem;
+    }
+    .wire-next--file-upload-progress .wire-next__row,
+    .wire-next__upload-actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+    }
+    .wire-next--file-upload-progress .wire-next__row > span {
+      display: grid;
+      min-width: 0;
+    }
+    .wire-next--field[data-variant="underline"]
+    :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+      border-width: 0 0 1px;
+      border-radius: 0;
+      background: transparent;
+    }
+    .wire-next--field[data-variant="outlined"]
+    :is(.wire-next__input-group-control, .wire-next__file-control) {
+      border-width: 2px;
+    }
+    .wire-next--field[data-variant="pill"]
+    :is(.wire-next__input-group-control, .wire-next__file-control) {
+      border-radius: 999px;
+    }
+    .wire-next--field[data-variant="ghost"]
+    :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+      border-color: transparent;
+      background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+    }
+    @media (max-width: 640px) {
+      .wire-next--field[data-inline="true"],
+      .wire-next--choice-field[data-inline="true"] {
+        grid-template-columns: 1fr;
+      }
+
+      .wire-next--field[data-inline="true"] .wire-next__field-error,
+      .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+        grid-column: auto;
+      }
+    }
+    .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+    .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+      border-color: var(--wire-color-danger);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+    }
+    .wire-next--strong-password.wire-next--invalid input,
+    .wire-next--strong-password input.wire-invalid {
+      border-color: var(--wire-color-danger);
+    }
   }
 }

packages/ui/components/radio.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Radio {
   outputs {
     input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -59,12 +55,569 @@ size: string = "default"
       {/if}
       {#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
     .wire-next--radio-field { width: 100%; min-width: 0; }
     .wire-next--radio-field[data-invalid="true"] { --wire-component-color: var(--wire-color-danger); }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/components/select.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Select {
   outputs {
     input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -64,8 +60,6 @@ size: string = "default"
       {#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}
       <small class="wire-next__field-error" data-error="{name}">{error}</small>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -75,5 +69,564 @@ size: string = "default"
       margin: 0;
       line-height: 1.35;
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/components/switch.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Switch {
   outputs {
     input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -42,8 +38,6 @@ component Switch {
       <label class="wire-next__choice wire-next--switch" for="{id || name}" data-variant="{variant}" data-icon-position="{iconPosition}"><input id="{id || name}" type="checkbox" role="switch" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-checked="{checked ? 'true' : 'false'}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" />{#if icon}<span class="{icon}" aria-hidden="true"></span>{/if}<span class="{hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''}">{label}</span></label>
       {#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
@@ -88,5 +82,564 @@ component Switch {
       background: var(--wire-color-primary-contrast, #fff);
       transform: translateX(1.1rem);
     }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/components/textarea.wrn

@@ -1,7 +1,3 @@
-import FieldStyles from "../styles/FieldStyles.wrn"
-
-import ComponentBaseStyles from "../styles/ComponentBaseStyles.wrn"
-
 component Textarea {
   outputs {
     input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -56,12 +52,569 @@ size: string = "default"
       {#if helperText}<small id="{(id || name) + '-help'}" class="wire-next__field-help">{helperText}</small>{/if}
       <small id="{(id || name) + '-error'}" class="wire-next__field-error" data-error="{name}">{error}</small>
     </div>
-    <FieldStyles hidden />
-    <ComponentBaseStyles hidden />
   }
 
   style {
     .wire-next--textarea { width: 100%; min-width: 0; }
     .wire-next--textarea[data-invalid="true"] { --wire-component-color: var(--wire-color-danger); }
+
+    /* Shared component foundation. */
+
+        .wire-component {
+          --wire-component-color: var(--wire-color-primary);
+          --wire-component-scale: 1;
+          margin: 0;
+          color: var(--wire-color-text);
+          font-family: var(--wrn-font-sans, inherit);
+        }
+
+        .wire-component--color-primary {
+          --wire-component-color: var(--wire-color-primary);
+        }
+
+        .wire-component--color-secondary {
+          --wire-component-color: var(--wire-color-secondary);
+        }
+
+        .wire-component--color-success {
+          --wire-component-color: var(--wire-color-success);
+        }
+
+        .wire-component--color-warning {
+          --wire-component-color: var(--wire-color-warning);
+        }
+
+        .wire-component--color-danger {
+          --wire-component-color: var(--wire-color-danger);
+        }
+
+        .wire-component--color-info {
+          --wire-component-color: var(--wire-color-info);
+        }
+
+        .wire-component--size-xs {
+          --wire-component-scale: 0.78;
+        }
+
+        .wire-component--size-sm {
+          --wire-component-scale: 0.88;
+        }
+
+        .wire-component--size-default,
+        .wire-component--size-md {
+          --wire-component-scale: 1;
+        }
+
+        .wire-component--size-lg {
+          --wire-component-scale: 1.14;
+        }
+
+        .wire-component--size-xl {
+          --wire-component-scale: 1.28;
+        }
+
+        .wire-component:not(.wire-btn) {
+          font-size: calc(1em * var(--wire-component-scale));
+        }
+
+        .wire-component :is(a, button, input, select, textarea):focus-visible {
+          outline-color: var(--wire-component-color);
+        }
+
+        .wire-component p {
+          margin: 0;
+          color: var(--wire-color-muted);
+          line-height: 1.6;
+        }
+
+    /* Shared field foundation. */
+
+        /* Validation states set by the browser validation runtime. */
+        .wire-invalid {
+          border-color: var(--wire-color-danger) !important;
+        }
+
+        .wire-field-error {
+          display: block;
+          min-height: 1em;
+          margin-top: 0.25rem;
+          color: var(--wire-color-danger);
+          font-size: 0.8rem;
+        }
+
+        .wire-next--choice {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.55rem;
+          cursor: pointer;
+        }
+
+        .wire-next--choice input {
+          width: 1.1rem;
+          height: 1.1rem;
+          accent-color: var(--wire-color-primary);
+        }
+
+        .wire-next--field {
+          display: grid;
+          width: min(100%, 28rem);
+          gap: 0.4rem;
+          font-size: 0.78rem;
+          font-weight: 700;
+        }
+        .wire-next--field :where(input, textarea, select) {
+          width: 100%;
+          min-height: 2.65rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: 0.6rem;
+          outline: 0;
+          color: var(--wire-color-text);
+          background: var(--wire-color-bg);
+          font: inherit;
+          font-weight: 500;
+        }
+        .wire-auth-form form > .wire-next--field,
+        .wire-auth-form form > .wire-field {
+          width: 100%;
+          max-width: none;
+        }
+        .wire-auth-form__submit > .wire-btn {
+          width: 100%;
+          min-height: 3rem;
+          border-radius: 0.75rem;
+          box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
+        }
+        .wire-next--field :where(input, textarea, select):focus-visible {
+          border-color: var(--wire-color-primary);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
+        }
+        .wire-next--field textarea {
+          resize: vertical;
+        }
+        .wire-next--field,
+        .wire-next--choice-field {
+          --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
+          width: min(100%, 34rem);
+          min-width: 0;
+          color: var(--wire-color-text);
+          font-size: 0.8125rem;
+          font-weight: 500;
+        }
+        .wire-next--field.wire-next--size-sm,
+        .wire-next--choice-field.wire-next--size-sm {
+          font-size: 0.8125rem;
+        }
+        .wire-next--field.wire-next--size-lg,
+        .wire-next--choice-field.wire-next--size-lg {
+          font-size: 1rem;
+        }
+        .wire-next__field-heading {
+          display: flex;
+          min-width: 0;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 1rem;
+        }
+        .wire-next__field-heading label {
+          color: var(--wire-color-text);
+          font-weight: 600;
+        }
+        .wire-next__field-hint,
+        .wire-next__field-help {
+          color: var(--wire-color-muted);
+          font-size: 0.82em;
+          font-weight: 500;
+        }
+        .wire-next__field-control {
+          position: relative;
+          min-width: 0;
+        }
+        .wire-next__field-control > :is(input, textarea, select) {
+          padding-inline: 0.85rem;
+          border-color: var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          font-size: 0.8125rem;
+        }
+        .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
+          padding-inline-start: 2.5rem;
+        }
+        .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
+          padding-inline-end: 2.5rem;
+        }
+        .wire-next__field-icon {
+          position: absolute;
+          z-index: 1;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+        }
+        .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
+          right: 0.85rem;
+          left: auto;
+        }
+        .wire-next--field[data-variant="outlined"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="underline"]
+          .wire-next__field-control
+          > :is(input, textarea, select) {
+          padding-inline: 0;
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+          box-shadow: none;
+        }
+        .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
+          border-radius: 999px;
+          padding-inline: 1.15rem;
+        }
+        .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        .wire-next__field-floating-label {
+          position: absolute;
+          top: 50%;
+          left: 0.85rem;
+          color: var(--wire-color-muted);
+          pointer-events: none;
+          transform: translateY(-50%);
+          transition: 150ms ease;
+        }
+        .wire-next--textarea .wire-next__field-floating-label {
+          top: 1.35rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
+          padding-top: 1.2rem;
+          padding-bottom: 0.3rem;
+        }
+        .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
+          display: none;
+        }
+        .wire-next--field[data-floating="true"]
+          .wire-next__field-control
+          > :is(input, textarea):is(:focus, :not(:placeholder-shown))
+          + .wire-next__field-floating-label {
+          top: 0.42rem;
+          font-size: 0.7em;
+          transform: none;
+        }
+        .wire-next__field-error {
+          min-height: 1em;
+          color: var(--wire-color-danger);
+          font-size: 0.82em;
+          font-weight: 600;
+        }
+        .wire-next__field-error:empty {
+          display: none;
+        }
+        .wire-next--field[data-invalid="true"] :is(input, textarea, select),
+        .wire-next--choice-field[data-invalid="true"] input {
+          border-color: var(--wire-color-danger);
+        }
+        .wire-next--field :is(input, textarea, select):disabled,
+        .wire-next--choice-field input:disabled {
+          cursor: not-allowed;
+          opacity: 0.58;
+        }
+        .wire-next--field :is(input, textarea, select):read-only {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next--field[data-inline="true"],
+        .wire-next--choice-field[data-inline="true"] {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
+          justify-content: center;
+          align-items: center;
+          gap: 0.75rem;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-heading {
+          justify-content: flex-end;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-help,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
+          display: flex;
+          min-height: 2.65rem;
+          align-items: center;
+        }
+        .wire-next--choice-field[data-inline="true"] {
+          grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
+        }
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
+          display: none;
+        }
+        .wire-next--field[data-inline="true"] .wire-next__field-error,
+        .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+          grid-column: 2 / -1;
+        }
+        .wire-next__sr-only {
+          position: absolute !important;
+          width: 1px !important;
+          height: 1px !important;
+          overflow: hidden !important;
+          padding: 0 !important;
+          border: 0 !important;
+          margin: -1px !important;
+          clip: rect(0, 0, 0, 0) !important;
+          white-space: nowrap !important;
+        }
+        .wire-next__choice-field {
+          display: grid;
+          width: 100%;
+          max-width: none;
+          gap: 0.4rem;
+        }
+        .wire-next__choice {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+          color: var(--wire-color-text);
+          width: 100%;
+          font-size: 0.75rem;
+          font-weight: 500;
+        }
+        .wire-next__checkbox-content > .wire-next__choice {
+          width: 100%;
+          min-width: 0;
+          align-items: flex-start;
+        }
+        .wire-next__choice input {
+          flex: 0 0 auto;
+          margin: 0;
+          accent-color: var(--wire-field-color);
+        }
+        .wire-next__choice-copy {
+          display: grid;
+          min-width: 0;
+          gap: 0.15rem;
+          line-height: 1.35;
+        }
+        .wire-next__choice-copy small {
+          color: var(--wire-color-muted);
+          font-weight: 500;
+        }
+        .wire-next__radio-group,
+        .wire-next__checkbox-group {
+          display: grid;
+          min-width: 0;
+          gap: 0.65rem;
+        }
+        .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
+          align-items: stretch;
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
+        .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
+          grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
+          min-height: 4.5rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+        }
+        .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
+        .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
+          border-color: var(--wire-field-color);
+          box-shadow: 0 0 0 1px var(--wire-field-color);
+        }
+        .wire-next--radio-field[data-list="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
+          padding-block: 0.75rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
+          justify-content: space-between;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
+          order: 2;
+        }
+        .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
+        .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
+          order: 1;
+        }
+        .wire-next__choice[data-variant="outlined"],
+        .wire-next__choice[data-variant="floating"] {
+          padding: 0.65rem 0.8rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+        }
+        .wire-next__choice[data-variant="pill"] {
+          padding: 0.65rem 1rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
+        }
+        .wire-next__choice[data-variant="ghost"] {
+          padding: 0.65rem 0.8rem;
+          border-radius: var(--wire-radius-sm);
+          background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
+        }
+        .wire-next__choice[data-variant="underline"] {
+          padding-block: 0.5rem;
+          border-bottom: 1px solid var(--wire-color-border);
+        }
+        .wire-next--select .wire-next__field-control {
+          display: flex;
+          align-items: center;
+        }
+        .wire-next__color-control,
+        .wire-next__range-control,
+        .wire-next__input-group-control,
+        .wire-next__file-control {
+          display: flex;
+          min-width: 0;
+          align-items: center;
+          gap: 0.65rem;
+        }
+        .wire-next__picker-control,
+        .wire-next--time-picker .wire-next__field-control {
+          position: relative;
+          display: flex;
+          min-width: 0;
+          align-items: center;
+        }
+        .wire-next__picker-control > button:first-of-type,
+        .wire-next__time-trigger {
+          display: flex;
+          width: 100%;
+          min-height: 2.65rem;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+          padding: 0.7rem 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-sm);
+          background: var(--wire-color-surface);
+          color: var(--wire-color-text);
+          font: inherit;
+          text-align: left;
+        }
+        .wire-next__calendar,
+        .wire-next__time-panel {
+          z-index: 20;
+          display: grid;
+          width: min(100%, 22rem);
+          gap: 0.75rem;
+          padding: 0.85rem;
+          border: 1px solid var(--wire-color-border);
+          border-radius: var(--wire-radius-md);
+          background: var(--wire-color-surface);
+          box-shadow: var(--wire-shadow-3);
+        }
+        .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
+        .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
+          display: none;
+        }
+        .wire-next__calendar button,
+        .wire-next__time-panel button {
+          min-height: 2.25rem;
+          border: 0;
+          border-radius: var(--wire-radius-sm);
+          background: transparent;
+          color: inherit;
+        }
+        .wire-next__calendar-weekdays,
+        .wire-next__calendar-grid {
+          display: grid;
+          grid-template-columns: repeat(7, 1fr);
+          gap: 0.2rem;
+          text-align: center;
+        }
+        .wire-next__calendar-weekdays {
+          color: var(--wire-color-muted);
+          font-size: 0.75rem;
+        }
+        .wire-next__calendar-grid button:hover,
+        .wire-next__time-panel button:hover {
+          background: var(--wire-color-surface-2);
+        }
+        .wire-next__calendar-grid button[aria-pressed="true"],
+        .wire-next__time-panel button[aria-pressed="true"] {
+          background: var(--wire-field-color);
+          color: var(--wire-color-primary-contrast, #fff);
+        }
+        .wire-next__time-period {
+          display: flex;
+          gap: 0.35rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row,
+        .wire-next__upload-actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 0.75rem;
+        }
+        .wire-next--file-upload-progress .wire-next__row > span {
+          display: grid;
+          min-width: 0;
+        }
+        .wire-next--field[data-variant="underline"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-width: 0 0 1px;
+          border-radius: 0;
+          background: transparent;
+        }
+        .wire-next--field[data-variant="outlined"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-width: 2px;
+        }
+        .wire-next--field[data-variant="pill"]
+          :is(.wire-next__input-group-control, .wire-next__file-control) {
+          border-radius: 999px;
+        }
+        .wire-next--field[data-variant="ghost"]
+          :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
+          border-color: transparent;
+          background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
+        }
+        @media (max-width: 640px) {
+          .wire-next--field[data-inline="true"],
+          .wire-next--choice-field[data-inline="true"] {
+            grid-template-columns: 1fr;
+          }
+
+          .wire-next--field[data-inline="true"] .wire-next__field-error,
+          .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
+            grid-column: auto;
+          }
+        }
+        .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
+        .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
+          border-color: var(--wire-color-danger);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
+        }
+        .wire-next--strong-password.wire-next--invalid input,
+        .wire-next--strong-password input.wire-invalid {
+          border-color: var(--wire-color-danger);
+        }
   }
 }

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/styles/ComponentBaseStyles.wrn

@@ -1,73 +0,0 @@
-component ComponentBaseStyles {
-  view {
-  }
-
-  style {
-    .wire-component {
-      --wire-component-color: var(--wire-color-primary);
-      --wire-component-scale: 1;
-      margin: 0;
-      color: var(--wire-color-text);
-      font-family: var(--wrn-font-sans, inherit);
-    }
-
-    .wire-component--color-primary {
-      --wire-component-color: var(--wire-color-primary);
-    }
-
-    .wire-component--color-secondary {
-      --wire-component-color: var(--wire-color-secondary);
-    }
-
-    .wire-component--color-success {
-      --wire-component-color: var(--wire-color-success);
-    }
-
-    .wire-component--color-warning {
-      --wire-component-color: var(--wire-color-warning);
-    }
-
-    .wire-component--color-danger {
-      --wire-component-color: var(--wire-color-danger);
-    }
-
-    .wire-component--color-info {
-      --wire-component-color: var(--wire-color-info);
-    }
-
-    .wire-component--size-xs {
-      --wire-component-scale: 0.78;
-    }
-
-    .wire-component--size-sm {
-      --wire-component-scale: 0.88;
-    }
-
-    .wire-component--size-default,
-    .wire-component--size-md {
-      --wire-component-scale: 1;
-    }
-
-    .wire-component--size-lg {
-      --wire-component-scale: 1.14;
-    }
-
-    .wire-component--size-xl {
-      --wire-component-scale: 1.28;
-    }
-
-    .wire-component:not(.wire-btn) {
-      font-size: calc(1em * var(--wire-component-scale));
-    }
-
-    .wire-component :is(a, button, input, select, textarea):focus-visible {
-      outline-color: var(--wire-component-color);
-    }
-
-    .wire-component p {
-      margin: 0;
-      color: var(--wire-color-muted);
-      line-height: 1.6;
-    }
-  }
-}

packages/ui/styles/FieldStyles.wrn

@@ -1,494 +0,0 @@
-component FieldStyles {
-  view {
-  }
-
-  style {
-    /* Validation states set by the browser validation runtime. */
-    .wire-invalid {
-      border-color: var(--wire-color-danger) !important;
-    }
-
-    .wire-field-error {
-      display: block;
-      min-height: 1em;
-      margin-top: 0.25rem;
-      color: var(--wire-color-danger);
-      font-size: 0.8rem;
-    }
-
-    .wire-next--choice {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.55rem;
-      cursor: pointer;
-    }
-
-    .wire-next--choice input {
-      width: 1.1rem;
-      height: 1.1rem;
-      accent-color: var(--wire-color-primary);
-    }
-
-    .wire-next--field {
-      display: grid;
-      width: min(100%, 28rem);
-      gap: 0.4rem;
-      font-size: 0.78rem;
-      font-weight: 700;
-    }
-    .wire-next--field :where(input, textarea, select) {
-      width: 100%;
-      min-height: 2.65rem;
-      padding: 0.6rem 0.7rem;
-      border: 1px solid var(--wire-color-border);
-      border-radius: 0.6rem;
-      outline: 0;
-      color: var(--wire-color-text);
-      background: var(--wire-color-bg);
-      font: inherit;
-      font-weight: 500;
-    }
-    .wire-auth-form form > .wire-next--field,
-    .wire-auth-form form > .wire-field {
-      width: 100%;
-      max-width: none;
-    }
-    .wire-auth-form__submit > .wire-btn {
-      width: 100%;
-      min-height: 3rem;
-      border-radius: 0.75rem;
-      box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent);
-    }
-    .wire-next--field :where(input, textarea, select):focus-visible {
-      border-color: var(--wire-color-primary);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent);
-    }
-    .wire-next--field textarea {
-      resize: vertical;
-    }
-    .wire-next--field,
-    .wire-next--choice-field {
-      --wire-field-color: var(--wire-component-color, var(--wire-color-primary));
-      width: min(100%, 34rem);
-      min-width: 0;
-      color: var(--wire-color-text);
-      font-size: 0.8125rem;
-      font-weight: 500;
-    }
-    .wire-next--field.wire-next--size-sm,
-    .wire-next--choice-field.wire-next--size-sm {
-      font-size: 0.8125rem;
-    }
-    .wire-next--field.wire-next--size-lg,
-    .wire-next--choice-field.wire-next--size-lg {
-      font-size: 1rem;
-    }
-    .wire-next__field-heading {
-      display: flex;
-      min-width: 0;
-      align-items: baseline;
-      justify-content: space-between;
-      gap: 1rem;
-    }
-    .wire-next__field-heading label {
-      color: var(--wire-color-text);
-      font-weight: 600;
-    }
-    .wire-next__field-hint,
-    .wire-next__field-help {
-      color: var(--wire-color-muted);
-      font-size: 0.82em;
-      font-weight: 500;
-    }
-    .wire-next__field-control {
-      position: relative;
-      min-width: 0;
-    }
-    .wire-next__field-control > :is(input, textarea, select) {
-      padding-inline: 0.85rem;
-      border-color: var(--wire-color-border);
-      border-radius: var(--wire-radius-sm);
-      background: var(--wire-color-surface);
-      font-size: 0.8125rem;
-    }
-    .wire-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
-      padding-inline-start: 2.5rem;
-    }
-    .wire-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
-      padding-inline-end: 2.5rem;
-    }
-    .wire-next__field-icon {
-      position: absolute;
-      z-index: 1;
-      top: 50%;
-      left: 0.85rem;
-      color: var(--wire-color-muted);
-      pointer-events: none;
-      transform: translateY(-50%);
-    }
-    .wire-next__field-control[data-icon-position="end"] > .wire-next__field-icon {
-      right: 0.85rem;
-      left: auto;
-    }
-    .wire-next--field[data-variant="outlined"]
-      .wire-next__field-control
-      > :is(input, textarea, select) {
-      border-width: 2px;
-    }
-    .wire-next--field[data-variant="underline"]
-      .wire-next__field-control
-      > :is(input, textarea, select) {
-      padding-inline: 0;
-      border-width: 0 0 1px;
-      border-radius: 0;
-      background: transparent;
-      box-shadow: none;
-    }
-    .wire-next--field[data-variant="pill"] .wire-next__field-control > :is(input, select) {
-      border-radius: 999px;
-      padding-inline: 1.15rem;
-    }
-    .wire-next--field[data-variant="ghost"] .wire-next__field-control > :is(input, textarea, select) {
-      border-color: transparent;
-      background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
-    }
-    .wire-next__field-floating-label {
-      position: absolute;
-      top: 50%;
-      left: 0.85rem;
-      color: var(--wire-color-muted);
-      pointer-events: none;
-      transform: translateY(-50%);
-      transition: 150ms ease;
-    }
-    .wire-next--textarea .wire-next__field-floating-label {
-      top: 1.35rem;
-    }
-    .wire-next--field[data-floating="true"] .wire-next__field-control > :is(input, textarea, select) {
-      padding-top: 1.2rem;
-      padding-bottom: 0.3rem;
-    }
-    .wire-next--field[data-floating="true"] .wire-next__field-heading > label {
-      position: absolute !important;
-      width: 1px !important;
-      height: 1px !important;
-      overflow: hidden !important;
-      margin: -1px !important;
-      clip: rect(0, 0, 0, 0) !important;
-      white-space: nowrap !important;
-    }
-    .wire-next--field[data-floating="true"]
-      .wire-next__field-heading:not(:has(.wire-next__field-hint)) {
-      display: none;
-    }
-    .wire-next--field[data-floating="true"]
-      .wire-next__field-control
-      > :is(input, textarea):is(:focus, :not(:placeholder-shown))
-      + .wire-next__field-floating-label {
-      top: 0.42rem;
-      font-size: 0.7em;
-      transform: none;
-    }
-    .wire-next__field-error {
-      min-height: 1em;
-      color: var(--wire-color-danger);
-      font-size: 0.82em;
-      font-weight: 600;
-    }
-    .wire-next__field-error:empty {
-      display: none;
-    }
-    .wire-next--field[data-invalid="true"] :is(input, textarea, select),
-    .wire-next--choice-field[data-invalid="true"] input {
-      border-color: var(--wire-color-danger);
-    }
-    .wire-next--field :is(input, textarea, select):disabled,
-    .wire-next--choice-field input:disabled {
-      cursor: not-allowed;
-      opacity: 0.58;
-    }
-    .wire-next--field :is(input, textarea, select):read-only {
-      background: var(--wire-color-surface-2);
-    }
-    .wire-next--field[data-inline="true"],
-    .wire-next--choice-field[data-inline="true"] {
-      display: grid;
-      width: 100%;
-      max-width: none;
-      grid-template-columns: minmax(7rem, max-content) minmax(12rem, 20rem) minmax(10rem, 1fr);
-      justify-content: center;
-      align-items: center;
-      gap: 0.75rem;
-    }
-    .wire-next--field[data-inline="true"] .wire-next__field-heading,
-    .wire-next--choice-field[data-inline="true"] .wire-next__field-heading {
-      min-height: 2.65rem;
-      align-items: center;
-    }
-    .wire-next--field[data-inline="true"] .wire-next__field-heading {
-      justify-content: flex-end;
-    }
-    .wire-next--field[data-inline="true"] .wire-next__field-help,
-    .wire-next--choice-field[data-inline="true"] .wire-next__field-help {
-      display: flex;
-      min-height: 2.65rem;
-      align-items: center;
-    }
-    .wire-next--choice-field[data-inline="true"] {
-      grid-template-columns: minmax(12rem, 20rem) minmax(10rem, 1fr);
-    }
-    .wire-next--choice-field[data-inline="true"] .wire-next__field-heading:empty {
-      display: none;
-    }
-    .wire-next--field[data-inline="true"] .wire-next__field-error,
-    .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
-      grid-column: 2 / -1;
-    }
-    .wire-next__sr-only {
-      position: absolute !important;
-      width: 1px !important;
-      height: 1px !important;
-      overflow: hidden !important;
-      padding: 0 !important;
-      border: 0 !important;
-      margin: -1px !important;
-      clip: rect(0, 0, 0, 0) !important;
-      white-space: nowrap !important;
-    }
-    .wire-next__choice-field {
-      display: grid;
-      width: 100%;
-      max-width: none;
-      gap: 0.4rem;
-    }
-    .wire-next__choice {
-      display: flex;
-      min-width: 0;
-      align-items: center;
-      gap: 0.65rem;
-      color: var(--wire-color-text);
-      width: 100%;
-      font-size: 0.75rem;
-      font-weight: 500;
-    }
-    .wire-next__checkbox-content > .wire-next__choice {
-      width: 100%;
-      min-width: 0;
-      align-items: flex-start;
-    }
-    .wire-next__choice input {
-      flex: 0 0 auto;
-      margin: 0;
-      accent-color: var(--wire-field-color);
-    }
-    .wire-next__choice-copy {
-      display: grid;
-      min-width: 0;
-      gap: 0.15rem;
-      line-height: 1.35;
-    }
-    .wire-next__choice-copy small {
-      color: var(--wire-color-muted);
-      font-weight: 500;
-    }
-    .wire-next__radio-group,
-    .wire-next__checkbox-group {
-      display: grid;
-      min-width: 0;
-      gap: 0.65rem;
-    }
-    .wire-next--radio-field[data-orientation="horizontal"] .wire-next__radio-group,
-    .wire-next--checkbox-field[data-orientation="horizontal"] .wire-next__checkbox-group {
-      grid-template-columns: repeat(auto-fit, minmax(8rem, max-content));
-      align-items: stretch;
-    }
-    .wire-next--radio-field[data-card="true"] .wire-next__radio-group,
-    .wire-next--checkbox-field[data-card="true"] .wire-next__checkbox-group {
-      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
-    }
-    .wire-next--radio-field[data-card="true"] .wire-next--radio,
-    .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox {
-      min-height: 4.5rem;
-      padding: 0.85rem;
-      border: 1px solid var(--wire-color-border);
-      border-radius: var(--wire-radius-sm);
-      background: var(--wire-color-surface);
-    }
-    .wire-next--radio-field[data-card="true"] .wire-next--radio:has(input:checked),
-    .wire-next--checkbox-field[data-card="true"] .wire-next--checkbox:has(input:checked) {
-      border-color: var(--wire-field-color);
-      box-shadow: 0 0 0 1px var(--wire-field-color);
-    }
-    .wire-next--radio-field[data-list="true"] .wire-next--radio,
-    .wire-next--checkbox-field[data-list="true"] .wire-next--checkbox {
-      padding-block: 0.75rem;
-      border-bottom: 1px solid var(--wire-color-border);
-    }
-    .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio,
-    .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox {
-      justify-content: space-between;
-    }
-    .wire-next--radio-field[data-right-aligned="true"] .wire-next--radio input,
-    .wire-next--checkbox-field[data-right-aligned="true"] .wire-next--checkbox input {
-      order: 2;
-    }
-    .wire-next--radio-field[data-right-aligned="true"] .wire-next__choice-copy,
-    .wire-next--checkbox-field[data-right-aligned="true"] .wire-next__choice-copy {
-      order: 1;
-    }
-    .wire-next__choice[data-variant="outlined"],
-    .wire-next__choice[data-variant="floating"] {
-      padding: 0.65rem 0.8rem;
-      border: 1px solid var(--wire-color-border);
-      border-radius: var(--wire-radius-sm);
-    }
-    .wire-next__choice[data-variant="pill"] {
-      padding: 0.65rem 1rem;
-      border-radius: 999px;
-      background: color-mix(in srgb, var(--wire-field-color) 9%, var(--wire-color-surface));
-    }
-    .wire-next__choice[data-variant="ghost"] {
-      padding: 0.65rem 0.8rem;
-      border-radius: var(--wire-radius-sm);
-      background: color-mix(in srgb, var(--wire-field-color) 7%, transparent);
-    }
-    .wire-next__choice[data-variant="underline"] {
-      padding-block: 0.5rem;
-      border-bottom: 1px solid var(--wire-color-border);
-    }
-    .wire-next--select .wire-next__field-control {
-      display: flex;
-      align-items: center;
-    }
-    .wire-next__color-control,
-    .wire-next__range-control,
-    .wire-next__input-group-control,
-    .wire-next__file-control {
-      display: flex;
-      min-width: 0;
-      align-items: center;
-      gap: 0.65rem;
-    }
-    .wire-next__picker-control,
-    .wire-next--time-picker .wire-next__field-control {
-      position: relative;
-      display: flex;
-      min-width: 0;
-      align-items: center;
-    }
-    .wire-next__picker-control > button:first-of-type,
-    .wire-next__time-trigger {
-      display: flex;
-      width: 100%;
-      min-height: 2.65rem;
-      align-items: center;
-      justify-content: space-between;
-      gap: 0.75rem;
-      padding: 0.7rem 0.85rem;
-      border: 1px solid var(--wire-color-border);
-      border-radius: var(--wire-radius-sm);
-      background: var(--wire-color-surface);
-      color: var(--wire-color-text);
-      font: inherit;
-      text-align: left;
-    }
-    .wire-next__calendar,
-    .wire-next__time-panel {
-      z-index: 20;
-      display: grid;
-      width: min(100%, 22rem);
-      gap: 0.75rem;
-      padding: 0.85rem;
-      border: 1px solid var(--wire-color-border);
-      border-radius: var(--wire-radius-md);
-      background: var(--wire-color-surface);
-      box-shadow: var(--wire-shadow-3);
-    }
-    .wire-next--date-picker[data-expanded="false"] .wire-next__calendar,
-    .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel {
-      display: none;
-    }
-    .wire-next__calendar button,
-    .wire-next__time-panel button {
-      min-height: 2.25rem;
-      border: 0;
-      border-radius: var(--wire-radius-sm);
-      background: transparent;
-      color: inherit;
-    }
-    .wire-next__calendar-weekdays,
-    .wire-next__calendar-grid {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 0.2rem;
-      text-align: center;
-    }
-    .wire-next__calendar-weekdays {
-      color: var(--wire-color-muted);
-      font-size: 0.75rem;
-    }
-    .wire-next__calendar-grid button:hover,
-    .wire-next__time-panel button:hover {
-      background: var(--wire-color-surface-2);
-    }
-    .wire-next__calendar-grid button[aria-pressed="true"],
-    .wire-next__time-panel button[aria-pressed="true"] {
-      background: var(--wire-field-color);
-      color: var(--wire-color-primary-contrast, #fff);
-    }
-    .wire-next__time-period {
-      display: flex;
-      gap: 0.35rem;
-    }
-    .wire-next--file-upload-progress .wire-next__row,
-    .wire-next__upload-actions {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 0.75rem;
-    }
-    .wire-next--file-upload-progress .wire-next__row > span {
-      display: grid;
-      min-width: 0;
-    }
-    .wire-next--field[data-variant="underline"]
-      :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
-      border-width: 0 0 1px;
-      border-radius: 0;
-      background: transparent;
-    }
-    .wire-next--field[data-variant="outlined"]
-      :is(.wire-next__input-group-control, .wire-next__file-control) {
-      border-width: 2px;
-    }
-    .wire-next--field[data-variant="pill"]
-      :is(.wire-next__input-group-control, .wire-next__file-control) {
-      border-radius: 999px;
-    }
-    .wire-next--field[data-variant="ghost"]
-      :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) {
-      border-color: transparent;
-      background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface));
-    }
-    @media (max-width: 640px) {
-      .wire-next--field[data-inline="true"],
-      .wire-next--choice-field[data-inline="true"] {
-        grid-template-columns: 1fr;
-      }
-    
-      .wire-next--field[data-inline="true"] .wire-next__field-error,
-      .wire-next--choice-field[data-inline="true"] .wire-next__field-error {
-        grid-column: auto;
-      }
-    }
-    .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input,
-    .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input {
-      border-color: var(--wire-color-danger);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent);
-    }
-    .wire-next--strong-password.wire-next--invalid input,
-    .wire-next--strong-password input.wire-invalid {
-      border-color: var(--wire-color-danger);
-    }
-  }
-}

packages/ui/test/ui.test.ts

@@ -28,7 +28,9 @@ test("bundled UI assets are discoverable and readable", () => {
 
 test("global UI CSS stays below its migration ratchet", () => {
   const css = uiCss();
-  expect(gzipSync(new TextEncoder().encode(css)).length).toBeLessThanOrEqual(3_762);
+  // Component selectors belong to their owning .wrn files. Keep this asset to
+  // resets, tokens, accessibility behavior, motion and reusable utilities.
+  expect(gzipSync(new TextEncoder().encode(css)).length).toBeLessThanOrEqual(3_800);
   for (const localOrRemovedFamily of [
     ".wire-switch",
     ".wire-alert",
@@ -38,7 +40,6 @@ test("global UI CSS stays below its migration ratchet", () => {
     ".wire-segmented-group",
     ".wire-dropdown",
     ".wire-btn",
-    ".wire-next",
   ]) {
     expect(css).not.toContain(localOrRemovedFamily);
   }
@@ -476,10 +477,9 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced-
   expect(css).toContain(".wire-bg-primary");
   expect(css).toContain(".wire-text-muted");
   expect(css).toContain(".wire-visually-hidden");
-  expect(css).not.toContain(".wire-next--field");
+  expect(css).toContain(".wire-component--color-primary");
-  expect(
+  expect(css).toContain(".wire-next--field");
-    readFileSync(join(uiComponentsDir(), "..", "styles", "FieldStyles.wrn"), "utf8"),
+  expect(css).toContain(".wire-next__strong-password-requirements");
-  ).toContain(".wire-next--field");
   expect(css).toContain('[data-show="false"]');
   expect(css).toContain("display: none !important");
   /*
@@ -501,6 +501,20 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced-
   expect(css).toMatch(/\.wire-footer__link\s*\{[^}]*font-size: 0\.8125rem;[^}]*font-weight: 400;/s);
 });
 
+test("every component owns its styles without pseudo-component mounts", () => {
+  const globalCss = uiCss();
+  expect(globalCss).not.toContain(".wire-component");
+  expect(globalCss).not.toContain(".wire-next");
+  for (const name of uiComponentNames()) {
+    const source = readFileSync(uiComponentPath(name), "utf8");
+    expect(source).toMatch(/\n\s*style\s*\{/);
+    expect(source).not.toContain("ComponentBaseStyles");
+    expect(source).not.toContain("FieldStyles");
+  }
+  expect(readFileSync(uiComponentPath("Alert"), "utf8")).toContain("Shared component foundation.");
+  expect(readFileSync(uiComponentPath("Input"), "utf8")).toContain("Shared field foundation.");
+});
+
 test("component boundaries have no default margins and expose the canonical class prop", () => {
   for (const name of uiComponentNames()) {
     const source = readFileSync(uiComponentPath(name), "utf8");

scripts/audit-package-kits.mjs

@@ -112,8 +112,8 @@ for (const directory of packageDirectories) {
   if (hasHelperKit) helperPackageCount++;
   componentCount += components.length;
 
-  if (manifest.version !== releaseVersion)
+  if (!/^0\.8\.\d+$/.test(manifest.version))
-    failures.push(`${manifest.name}: version is ${manifest.version}`);
+    failures.push(`${manifest.name}: invalid independent version ${manifest.version}`);
   if (!existsSync(entry)) failures.push(`${manifest.name}: missing public entry ${main}`);
   if (!existsSync(join(packageRoot, "README.md")))
     failures.push(`${manifest.name}: missing README.md`);

scripts/release-changed.ts

@@ -0,0 +1,138 @@
+/** Independent private releases for changed @wrnexus packages. */
+import { existsSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { spawnSync } from "node:child_process";
+
+const root = resolve(import.meta.dir, "..");
+const npm = process.platform === "win32" ? "npm.cmd" : "npm";
+const mode = process.argv[2] ?? "plan";
+const requested = process.argv.slice(3).filter((arg) => !arg.startsWith("--"));
+
+interface PackageInfo {
+  dir: string;
+  name: string;
+  file: string;
+  manifest: Record<string, any>;
+}
+
+function run(command: string, args: string[], capture = false, allowFailure = false) {
+  const result = spawnSync(command, args, {
+    cwd: root,
+    encoding: capture ? "utf8" : undefined,
+    stdio: capture ? "pipe" : "inherit",
+  });
+  if (result.error) throw result.error;
+  if (result.status !== 0 && !allowFailure) {
+    throw new Error(`${command} ${args.join(" ")} failed with ${result.status}`);
+  }
+  return result;
+}
+
+function allPackages(): PackageInfo[] {
+  return readdirSync(join(root, "packages"), { withFileTypes: true }).flatMap((entry) => {
+    const file = join(root, "packages", entry.name, "package.json");
+    if (!entry.isDirectory() || !existsSync(file)) return [];
+    const manifest = JSON.parse(readFileSync(file, "utf8"));
+    return manifest.name?.startsWith("@wrnexus/")
+      ? [{ dir: entry.name, name: manifest.name, file, manifest }]
+      : [];
+  });
+}
+
+function changedPaths(): string[] {
+  const tracked = String(run("git", ["diff", "HEAD", "--name-only"], true).stdout ?? "");
+  const untracked = String(
+    run("git", ["ls-files", "--others", "--exclude-standard"], true).stdout ?? "",
+  );
+  return `${tracked}\n${untracked}`
+    .split(/\r?\n/)
+    .filter(Boolean)
+    .map((path) => path.replace(/\\/g, "/"));
+}
+
+function selectChanged(all: PackageInfo[]): PackageInfo[] {
+  if (requested.length) {
+    return all.filter((pkg) => requested.includes(pkg.dir) || requested.includes(pkg.name));
+  }
+  const paths = changedPaths();
+  return all.filter((pkg) => paths.some((path) => path.startsWith(`packages/${pkg.dir}/`)));
+}
+
+function patch(version: string): string {
+  const match = /^(\d+)\.(\d+)\.(\d+)$/.exec(version);
+  if (!match) throw new Error(`Cannot patch-bump invalid package version ${version}`);
+  return `${match[1]}.${match[2]}.${Number(match[3]) + 1}`;
+}
+
+function syncWorkspaceLock(pkgs: PackageInfo[]): void {
+  const file = join(root, "bun.lock");
+  let source = readFileSync(file, "utf8");
+  for (const pkg of pkgs) {
+    const escaped = pkg.dir.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const pattern = new RegExp(
+      `("packages/${escaped}": \\{\\r?\\n\\s+"name": "[^"]+",\\r?\\n\\s+"version": ")[^"]+(")`,
+    );
+    if (!pattern.test(source)) throw new Error(`bun.lock is missing workspace package ${pkg.name}`);
+    source = source.replace(pattern, `$1${pkg.manifest.version}$2`);
+  }
+  writeFileSync(file, source);
+}
+
+function registryHas(pkg: PackageInfo): boolean {
+  return (
+    run(npm, ["view", `${pkg.name}@${pkg.manifest.version}`, "version", "--json"], true, true)
+      .status === 0
+  );
+}
+
+function unpublished(all: PackageInfo[]): PackageInfo[] {
+  return all.filter((pkg) => !registryHas(pkg));
+}
+
+function print(pkgs: PackageInfo[], action: string): void {
+  if (!pkgs.length) {
+    console.log(`No packages need ${action}.`);
+    return;
+  }
+  console.log(`Packages selected for ${action}:`);
+  for (const pkg of pkgs) console.log(`  ${pkg.name}@${pkg.manifest.version}`);
+}
+
+const all = allPackages();
+if (mode === "plan") {
+  const selected = selectChanged(all);
+  print(selected, "a patch release");
+  for (const pkg of selected) console.log(`    -> ${patch(pkg.manifest.version)}`);
+} else if (mode === "prepare") {
+  const selected = selectChanged(all);
+  if (!selected.length)
+    throw new Error("No changed packages found. Pass package names explicitly if needed.");
+  for (const pkg of selected) {
+    pkg.manifest.version = patch(String(pkg.manifest.version));
+    writeFileSync(pkg.file, `${JSON.stringify(pkg.manifest, null, 2)}\n`);
+  }
+  syncWorkspaceLock(selected);
+  // Bun currently leaves workspace manifest versions stale when only
+  // --lockfile-only is used. The workspace entries are synchronized above;
+  // this install refreshes dependency resolution without changing versions.
+  run(process.execPath, ["install"]);
+  run(process.execPath, ["run", "scripts/publish-packages.ts", ...selected.map((pkg) => pkg.name)]);
+  print(selected, "release preparation");
+  console.log(
+    "Review and commit the version and lockfile changes, then run bun run release:changed:publish.",
+  );
+} else if (mode === "publish") {
+  const selected = requested.length ? selectChanged(all) : unpublished(all);
+  if (!selected.length) throw new Error("Every local package version is already published.");
+  run(process.execPath, ["run", "check:component-imports"]);
+  run(process.execPath, ["test", ...selected.map((pkg) => `packages/${pkg.dir}`)]);
+  run(process.execPath, ["run", "scripts/publish-packages.ts", ...selected.map((pkg) => pkg.name)]);
+  run(npm, ["whoami"]);
+  for (const pkg of selected) {
+    const stage = join(root, ".publish", pkg.dir);
+    if (!registryHas(pkg)) run(npm, ["publish", stage, "--access", "restricted"]);
+    console.log(`  ✓ ${pkg.name}@${pkg.manifest.version}`);
+  }
+} else {
+  throw new Error("Usage: bun scripts/release-changed.ts plan | prepare | publish [package ...]");
+}

scripts/security-performance-audit.mjs

@@ -60,8 +60,8 @@ const manifests = trackedFiles
   .filter(({ value }) => value.name?.startsWith("@wrnexus/"));
 addCheck(
   "SEC-PACKAGE-VERSION",
-  manifests.every(({ value }) => value.version === frameworkVersion),
+  manifests.every(({ value }) => /^0\.8\.\d+$/.test(value.version)),
-  `Every @wrnexus package must use version ${frameworkVersion}.`,
+  "Every @wrnexus package must use a valid independent 0.8 version.",
 );
 addCheck(
   "SEC-PRIVATE-PUBLISH",

scripts/validate-0.7.mjs

@@ -82,8 +82,8 @@ check(
   "Temporary focused helpers must not create lint or formatting cascades before workspace repair.",
 );
 check(
-  "all framework package versions align",
+  "all framework packages use compatible independent versions",
-  manifests.every(({ manifest }) => manifest.version === rootVersion),
+  manifests.every(({ manifest }) => /^0\.(?:7|8)\.\d+$/.test(manifest.version)),
   [...new Set(manifests.map(({ manifest }) => manifest.version))].join(", "),
 );
 for (const name of ["security", "cache", "image", "observability", "benchmark"]) {

scripts/validate-0.8.mjs

@@ -59,19 +59,28 @@ check(
 );
 check("root version is a 0.8 release", /^0\.8\.\d+$/.test(releaseVersion));
 check(
-  `all framework packages use ${releaseVersion}`,
+  "all framework packages use valid independent 0.8 versions",
-  packageManifests.every((manifest) => manifest.version === releaseVersion),
+  packageManifests.every((manifest) => /^0\.8\.\d+$/.test(manifest.version)),
 );
-const bunLockPackageVersions = [
+const bunLockPackages = [
   ...text("bun.lock").matchAll(/^ {4}"packages\/[^"\r\n]+": \{\r?\n([\s\S]*?)^ {4}\},?$/gm),
-].map((match) => /^ {6}"version": "([^"]+)"/m.exec(match[1])?.[1]);
+].map((match) => ({
+  name: /^ {6}"name": "([^"]+)"/m.exec(match[1])?.[1],
+  version: /^ {6}"version": "([^"]+)"/m.exec(match[1])?.[1],
+}));
+const packageVersions = new Map(
+  packageManifests.map((manifest) => [manifest.name, manifest.version]),
+);
 check(
-  `bun.lock framework workspaces use ${releaseVersion}`,
+  "bun.lock matches each independent framework package version",
-  bunLockPackageVersions.length === packageManifests.length &&
+  bunLockPackages.length === packageManifests.length &&
-    bunLockPackageVersions.every((version) => version === releaseVersion),
+    bunLockPackages.every(({ name, version }) => packageVersions.get(name) === version),
 );
 const editorManifest = JSON.parse(text("editors/vscode/package.json"));
-check(`VS Code extension uses ${releaseVersion}`, editorManifest.version === releaseVersion);
+check(
+  "VS Code extension uses a valid independent 0.8 version",
+  /^0\.8\.\d+$/.test(editorManifest.version),
+);
 check(
   "standalone realtime package exists",
   existsSync(join(root, "packages/realtime/src/index.ts")) &&